adjust css of navbar & menu

mcg25035 · Mar 3, 2024 · abcb6c4 · abcb6c4
1 parent 631ecb6
commit abcb6c4
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 27 deletions.
diff --git a/public/menu_overlay.webp b/public/menu_overlay.webp
diff --git 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 (
         <div className="nav-link" onMouseOut={onMouse.out} onMouseOver={onMouse.over}>
-            <RouterLink ref={ref} to={`/${to}`} className="nav-text">
-                {name}
+            <RouterLink ref={ref[0]} to={`/${to}`} className="nav-text">
+                <p className="text-main">{name}</p>
+                {subtext && <p className="text-sub">{subtext}</p>}
             </RouterLink>
         </div>
     );

diff --git a/src/Link.scss b/src/Link.scss
@@ -16,14 +16,26 @@ div.nav-link{
         text-align: center;
         margin: 0;
         font-family: 'Noto Sans TC';
-        font-weight: 500;
+        font-weight: 400;
         white-space: nowrap;
     }
 
     a.nav-text.on-hover{
         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
@@ -29,22 +29,34 @@ function Nav() {
     }, [prevScrollPos]);
 
     return (
-        <div className={`z-[2] bg-white top-0 fixed w-full px-16 items-center h-[100rem] transform ${ visible ? '' : 'translate-y-[-100%]' } transition-all duration-150 ease-out`}>
-            <div className="menu mr-[20px] flex justify-between items-center">
-                <span className="h-[100rem]"><Icon/></span>
-                <div className={`hamburger-icon ${isOpen ? 'open' : ''}`} onClick={toggleMenu}>
-                    <span className="line l1"></span>
-                    <span className="line l2"></span>
-                    <span className="line l3"></span>
+        <div>
+            <div className={`bg-white z-[5] top-0 fixed w-full px-16 items-center h-[100rem] transform ${ visible ? '' : 'translate-y-[-100%]' } transition-all duration-150 ease-out`}>
+                <div className="menu mr-[20px] flex justify-between items-center">
+                    <span className="h-[100rem]"><Icon/></span>
                 </div>
+                {/* block relative bg-white p-[25px] top-1 float-end */}
+            </div>
+            <div className={`bg-transparent z-[7] top-0 fixed w-full px-16 items-center h-[100rem] transform ${ visible ? '' : 'translate-y-[-100%]' } transition-all duration-150 ease-out`}>
+                <div className="menu-transparent mr-[20px] flex justify-between items-center">
+                    <div className={`hamburger-icon ${isOpen ? 'open' : ''}`} onClick={toggleMenu}>
+                        <span className="line l1"></span>
+                        <span className="line l2"></span>
+                        <span className="line l3"></span>
+                    </div>
+                </div>
+                {/* block relative bg-white p-[25px] top-1 float-end */}
+            </div>
+            <ul className={`menu z-[6] ${isOpen ? '':'menu-hidden'}`}>
+                    <li className="navbar-area"></li>
+                    <li><Link to="about_us" name="關於我們" subtext="About Us" /></li>
+                    <li><Link to="donate" name="贊助支持" subtext="Donate"/></li>
+                    <li><Link to="working_project" name="企劃進度" subtext="Project Progress" /></li>
+                    <li><Link to="join_us" name="加入我們" subtext="Join Us" /></li>
+                    <li><Link to="login" name="登入" subtext="Login"/></li>
+                    <li><Link to="login" name="測試多一項" subtext="test"/></li>
+                </ul>
+            <div className={`menu-overlay z-[4] ${isOpen ? '':'menu-hidden'}`}>
             </div>
-            <ul className={`block relative bg-white p-[25px] top-1 float-end ${isOpen ? '':'hidden'}`}>
-                <li><Link to="about_us" name="關於我們" /></li>
-                <li><Link to="donate" name="贊助支持" /></li>
-                <li><Link to="working_project" name="企劃進度" /></li>
-                <li><Link to="join_us" name="加入我們" /></li>
-                <li><Link to="login" name="登入"/></li>
-            </ul>
         </div>
     );
 }

diff --git 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);
 }