[fix] add backdrop color on menu expand (#40)

calblueprint · Jan 22, 2024 · b0abc62 · b0abc62
1 parent 049d445
commit b0abc62
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -67,7 +67,9 @@ export default function NavBar({ links }: Props) {
       </button>
 
       {/* backdrop */}
-      <div className={styles.backdrop}></div>
+      <div
+        className={`${styles.backdrop} ${menuVisible ? styles.show : null}`}
+      ></div>
 
       {/* links */}
       <section className={styles.links}>

diff --git a/src/components/Navbar/style.module.scss b/src/components/Navbar/style.module.scss
@@ -65,9 +65,15 @@ nav {
   width: 100%;
   height: 100%;
   z-index: 9;
+  transition: 1s;
+
+  &.show {
+    background: white;
+    transition: 0s;
+  }
 
   @media (min-width: breakpoints.$tablet) {
-    visibility: hidden;
+    background: none !important;
   }
 }