stacking fix

SamirPaul1 · Aug 11, 2024 · 3c948cc · 3c948cc
1 parent bb81935
commit 3c948cc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -9,7 +9,7 @@ import SearchButton from './SearchButton'
 const Header = () => {
   let headerClass = 'flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10'
   if (siteMetadata.stickyNav) {
-    headerClass += ' sticky top-0'
+    headerClass += ' sticky top-0 z-50'
   }
 
   return (

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
@@ -52,8 +52,9 @@ const MobileNav = () => {
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
+            unmount={false}
           >
-            <div className="z-5 fixed inset-0 bg-black/25" />
+            <div className="fixed inset-0 z-60 bg-black/25" />
           </Transition.Child>
 
           <Transition.Child
@@ -66,7 +67,7 @@ const MobileNav = () => {
             leaveTo="translate-x-full opacity-0"
             unmount={false}
           >
-            <Dialog.Panel className="fixed left-0 top-0 z-10 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
+            <Dialog.Panel className="fixed left-0 top-0 z-70 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
               <nav
                 ref={navRef}
                 className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
@@ -84,7 +85,7 @@ const MobileNav = () => {
               </nav>
 
               <button
-                className="fixed right-4 top-7 z-20 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
+                className="fixed right-4 top-7 z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
                 aria-label="Toggle Menu"
                 onClick={onToggleNav}
               >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -28,6 +28,11 @@ module.exports = {
         primary: colors.pink,
         gray: colors.gray,
       },
+      zIndex: {
+        60: '60',
+        70: '70',
+        80: '80',
+      },
       typography: ({ theme }) => ({
         DEFAULT: {
           css: {