fixed mobile navbar

Keith-Web3 · May 19, 2023 · e07c670 · e07c670
1 parent c28215d
commit e07c670
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
@@ -31,10 +31,12 @@ const Header: React.FC<{
       'header__dropdown',
       'header__ellipsis',
       'dropdown__option',
+      'header__chevron',
     ]
     const listener = function (e: MouseEvent) {
       if (!classNames.includes((e.target as HTMLElement).className)) {
         setIsDropDownOpen(false)
+        setIsNavOpened(false)
       }
     }
     document.body.addEventListener('click', listener)
@@ -45,11 +47,7 @@ const Header: React.FC<{
   }, [])
 
   return (
-    <motion.header
-      layout
-      // transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-      className="header"
-    >
+    <motion.header layout className="header">
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}

diff --git a/src/sass/index.scss b/src/sass/index.scss
@@ -42,7 +42,7 @@ body {
     z-index: -1;
   }
   @media (max-width: 700px) {
-    position: sticky;
+    position: absolute;
     inset: 0 0 auto 0;
     height: max-content;
   }

diff --git a/src/sass/shared/navbar.scss b/src/sass/shared/navbar.scss
@@ -28,6 +28,9 @@
     border-radius: 8px;
     margin: $spacer auto 0;
 
+    @include screen(700, 'max') {
+      box-shadow: 0 0 3px rgba($dark-400, 0.35);
+    }
     @include screen(700) {
       margin: 0;
       display: flex;