From 3c948ccdde780aa82122b8bdaecc0b15949e4826 Mon Sep 17 00:00:00 2001
From: Atreya Choudhury <atreyachoudhury@hotmail.com>
Date: Sun, 11 Aug 2024 09:06:30 +0200
Subject: [PATCH] stacking fix

---
 components/Header.tsx    | 2 +-
 components/MobileNav.tsx | 7 ++++---
 tailwind.config.js       | 5 +++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 5ed4e699d..e4f27fc96 100644
--- 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
index 2dbabb6d3..a7770a504 100644
--- 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
index d6449db08..3c1420981 100644
--- 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: {