From abcb6c45aa49737ee72bb7ea4569488c03761613 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=97=E6=A5=B5=E9=9B=84?= <70533278+mcg25035@users.noreply.github.com> Date: Sun, 3 Mar 2024 18:16:31 +0800 Subject: [PATCH] adjust css of navbar & menu --- public/menu_overlay.webp | Bin 0 -> 1688 bytes src/Link.jsx | 29 ++++++++++++--------- src/Link.scss | 14 ++++++++++- src/Nav.jsx | 40 ++++++++++++++++++----------- src/Nav.scss | 53 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 109 insertions(+), 27 deletions(-) create mode 100644 public/menu_overlay.webp diff --git a/public/menu_overlay.webp b/public/menu_overlay.webp new file mode 100644 index 0000000000000000000000000000000000000000..a59171c822692f38101e3bdc10fc9be19bca7c3f GIT binary patch literal 1688 zcmWIYbaR`)#=sEn>J$(bU=hK^z`!5?#GjcMYM2-teF8kLGBGfS7D#wby3CQU^6=ri z&*v*%@95-k&y%*ClxEh>FR}a5PvxJ?{}0xGkpII@0VSkub+kC9DqUmoo%f;F15f@n zni}`+`>X2fzsvvanfiP0F|ob&yCW8V|9X0VRejn1?7i#b?OxXYwemj*WVrnJ`ug?U zd)L>e^L~6i{jbuWUsuI};>SaQ#)ttK*C$?C6JMYGv~GPVkat`8$Jf)(1@_nNeDwd_ z*FPuz&e(hX_pj1?#k#+n_TQTyD}V6+g>4*le{a3lI^oUE{O4DweRPnrY|MNCeOa4z z3i`5VvMzb{RJwH@QEI)J9FfAU3C{)2t()80Aziei9P9EyFZZMP}=SJ#8<>vwm4 zczwMtx#$Ob1ovhKbV z{%v;5qgy>#&Ls$`%`CQRph1azjhW$jV+KmPHR%FEZwh(n#)|7O-cC17;s0V8qi{TXw> zfeG~RCW&3k)-N%AseQf+7#??~?n}y50@`%lgB@gIn6j+SEdO}UPnQnr*wrrGsJhk@ z%vqyWd(;YO1!urZ?aDnR1smI9mNvUid3~Lo0hrzurZ6)wOvqxG%c%8*sg}uZqQ^pC z)g{VG3LFd@gg7(v9+oFcJ8-^XzMnIvecw$>{@P7Na=%la*nT^CqWbOR3Eyw4E56_6 e=R7Js8Z4v90ZTUMU|{(7{~pH*e_)kD5&!_iOO;gs literal 0 HcmV?d00001 diff --git a/src/Link.jsx b/src/Link.jsx index 9f2e956..a690039 100644 --- a/src/Link.jsx +++ b/src/Link.jsx @@ -3,27 +3,32 @@ import React from "react"; import { Link as RouterLink } from "react-router-dom"; import PropTypes from "prop-types"; -function Link({ name, to }){ - var ref = React.createRef(); +function Link({ name, to, subtext }){ + var ref = [React.createRef()]; var onMouse = { over: ()=>{ - /**@type {HTMLElement} */ - var element = ref.current; - - element.classList.add("on-hover"); + for (var i = 0; i < ref.length; i++){ + /**@type {HTMLElement} */ + var element = ref[i].current; + if (!element) continue; + element.classList.add("on-hover"); + } }, out: ()=>{ - /**@type {HTMLElement} */ - var element = ref.current; - - element.classList.remove("on-hover"); + for (var i = 0; i < ref.length; i++){ + /**@type {HTMLElement} */ + var element = ref[i].current; + if (!element) continue; + element.classList.remove("on-hover"); + } } }; return (
- - {name} + +

{name}

+ {subtext &&

{subtext}

}
); diff --git a/src/Link.scss b/src/Link.scss index ac01766..683cb49 100644 --- a/src/Link.scss +++ b/src/Link.scss @@ -16,7 +16,7 @@ div.nav-link{ text-align: center; margin: 0; font-family: 'Noto Sans TC'; - font-weight: 500; + font-weight: 400; white-space: nowrap; } @@ -24,6 +24,18 @@ div.nav-link{ color: rgb(17, 137, 249); transition: all 0.3s; } + + p.text-main{ + text-align: left; + font-size: 38rem; + font-weight: 500; + } + + p.text-sub{ + text-align: left; + font-size: 24rem; + font-weight: 300; + } } /* div.nav-link:hover{ diff --git a/src/Nav.jsx b/src/Nav.jsx index de4939f..79d7d1c 100644 --- a/src/Nav.jsx +++ b/src/Nav.jsx @@ -29,22 +29,34 @@ function Nav() { }, [prevScrollPos]); return ( -
-
- -
- - - +
+
+
+
+ {/* block relative bg-white p-[25px] top-1 float-end */} +
+
+
+
+ + + +
+
+ {/* block relative bg-white p-[25px] top-1 float-end */} +
+
    +
  • +
    • +
    • +
    • +
    • +
    • +
    • +
+
-
    -
    • -
    • -
    • -
    • -
    • -
); } diff --git a/src/Nav.scss b/src/Nav.scss index 1554022..de37970 100644 --- a/src/Nav.scss +++ b/src/Nav.scss @@ -11,6 +11,59 @@ $breakpoint-lg: 992px; transition: transform 0.2s, opacity 0.2s; } +ul.menu{ + top: 0; + width: 15vw; + height: 100vh; + position: fixed; + right: 0vw; + transition: all 0.3s; + background: url('menu_overlay.webp') no-repeat bottom right 60%; + background-color: rgb(230, 243, 251); + + li.navbar-area{ + height: 100rem; + margin-left: 30rem; + margin-top: 0; + } + + li{ + margin-top: 30rem; + div { + margin-left: 50rem; + } + } +} + +div.menu{ + position: relative; +} + +div.menu-transparent{ + height: 100%; + flex-direction: row-reverse; +} + +div.menu-overlay{ + width: 125vw; + height: 125vh; + position: fixed; + top: -10vh; + left: -10vw; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(2px); + transition: all 0.3s; +} + +div.menu-overlay.menu-hidden{ + opacity: 0%; + pointer-events: none; +} + +ul.menu.menu-hidden{ + right: -15vw; +} + .open .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }