🐞 fix(/layout): nav

贺子良 · 贺子良 · commit 00c9a14e1cd3 · 2022-02-26T21:16:09.000+08:00
fix open nav menu's bug
diff --git a/src/layout/index.jsx b/src/layout/index.jsx
@@ -68,17 +68,7 @@ export default function Layout() {
                             <span className="header-menu__line"></span>
                             <span className="header-menu__line"></span>
                         </figure>
-                        <div
-                            className="header-nav"
-                            style={
-                                showMenu
-                                    ? {
-                                          opacity: 1,
-                                          PointerEvents: "none",
-                                      }
-                                    : null
-                            }
-                        >
+                        <div className="header-nav">
                             <CustomLink
                                 to="/projects"
                                 onClick={() => setShowMenu(false)}
diff --git a/src/layout/styles.js b/src/layout/styles.js
@@ -179,8 +179,14 @@ export const LayoutWrapper = styled.div`
                     transform: translateX(3px) rotate(-45deg);
                 }
 
+                .header-menu--open + .header-nav {
+                    opacity: 1;
+                    pointer-events: initial;
+                }
+
                 .header-nav {
                     opacity: 0;
+                    pointer-events: none;
                     position: fixed;
                     display: flex;
                     flex-direction: column;
@@ -192,6 +198,11 @@ export const LayoutWrapper = styled.div`
                     height: 100vh;
                     z-index: 5;
                     background: #fff;
+                    > a {
+                        font-size: 25px;
+                        margin-left: 0 !important;
+                    }
+
                     > a:not(:last-child) {
                         margin-bottom: 40px;
                     }
