From f70076b482191ac899a02989363231e783772e80 Mon Sep 17 00:00:00 2001
From: Zeeshan Khan <zeeshanatnorth@gmail.com>
Date: Tue, 2 Jun 2026 14:01:56 +0200
Subject: [PATCH] fix: mobile menu now renders in front of hero banner video on
 mobile

- Moved mobile drawer (and AnimatePresence) out of <nav> into sibling in React fragment so its z-index is evaluated at root stacking context (was previously confined inside nav's z context).
- Raised mobile menu container to z-[9999], sliding panel to z-[10000].
- Bumped LanguageSwitcher backdrop/dropdown to z-[9998]/z-[9999] for when opened from inside mobile menu.
- Lowered hero video to z-0 and gradient to z-5 (true background).
- Nav back to z-[50] (still above normal content).
- This ensures the full mobile menu (hamburger + drawer + language dropdown when clicked inside it) always stacks above the mobile_banner video and is fully visible.
---
 app/page.tsx                    |  4 ++--
 components/LanguageSwitcher.tsx |  4 ++--
 components/Navbar.tsx           | 10 ++++++----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 48dc75f..5a64956 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -196,7 +196,7 @@ export default function ShahiKitchenHomepage() {
           muted
           playsInline
           preload="auto"
-          className="absolute inset-0 z-10 w-full h-full object-cover 
+          className="absolute inset-0 z-0 w-full h-full object-cover 
                      object-[50%_10%] sm:object-[50%_12%] md:object-[50%_16%] 
                      lg:object-[50%_20%] xl:object-[50%_24%]"
           onError={(e) => console.error('Hero banner video failed to load', e)}
@@ -217,7 +217,7 @@ export default function ShahiKitchenHomepage() {
         </video>
 
         {/* Subtle gradient to improve visibility of baked-in text */}
-        <div className="absolute inset-0 z-20 bg-gradient-to-b from-black/5 via-transparent to-black/30" />
+        <div className="absolute inset-0 z-5 bg-gradient-to-b from-black/5 via-transparent to-black/30" />
       </section>
 
       {/* ADVANCED SIGNATURE MENU */}
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
index 6c87085..e6a3cae 100644
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@@ -31,12 +31,12 @@ export default function LanguageSwitcher() {
         <>
           {/* Backdrop */}
           <div 
-            className="fixed inset-0 z-[1010]" 
+            className="fixed inset-0 z-[9998]" 
             onClick={() => setIsOpen(false)} 
           />
           
           {/* Dropdown */}
-          <div className="absolute right-0 top-full mt-2 z-[1020] w-44 rounded-2xl border border-[#c99a2e]/20 bg-[#fbf7ef] shadow-2xl overflow-hidden">
+          <div className="absolute right-0 top-full mt-2 z-[9999] w-44 rounded-2xl border border-[#c99a2e]/20 bg-[#fbf7ef] shadow-2xl overflow-hidden">
             {languages.map((lang) => (
               <button
                 key={lang.code}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index eab7305..250dd08 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -53,8 +53,9 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
   const closeMenu = () => setIsOpen(false);
 
   return (
+    <>
     <nav 
-      className="fixed top-0 left-0 right-0 z-[999] h-[64px] border-b border-[#c99a2e]/20 bg-[#fbf7ef] shadow-sm backdrop-blur-xl"
+      className="fixed top-0 left-0 right-0 z-[50] h-[64px] border-b border-[#c99a2e]/20 bg-[#fbf7ef] shadow-sm backdrop-blur-xl"
     >
       <div className="max-w-7xl mx-auto px-6 flex items-center justify-between h-full">
         {/* Top subtle gold line for extra frame separation */}
@@ -177,11 +178,12 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
           </button>
         </div>
       </div>
+    </nav>
 
       {/* Modern Mobile Menu Drawer (slide-in, animated, high-contrast, touch-friendly) - high z to always appear in front of hero banner video etc. */}
       <AnimatePresence>
         {isOpen && (
-          <div className="md:hidden fixed inset-0 z-[1000]">
+          <div className="md:hidden fixed inset-0 z-[9999]">
             {/* Backdrop */}
             <motion.div
               className="absolute inset-0 bg-[#101724]/70 backdrop-blur-md"
@@ -194,7 +196,7 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
 
             {/* Sliding Panel - modern, full-bleed on small phones, elegant on larger */}
             <motion.div
-              className="absolute right-0 top-0 bottom-0 w-[82%] max-w-[340px] bg-[#fbf7ef] shadow-2xl border-l border-[#c99a2e]/10 flex flex-col overflow-y-auto z-[1001]"
+              className="absolute right-0 top-0 bottom-0 w-[82%] max-w-[340px] bg-[#fbf7ef] shadow-2xl border-l border-[#c99a2e]/10 flex flex-col overflow-y-auto z-[10000]"
               initial={{ x: '100%' }}
               animate={{ x: 0 }}
               exit={{ x: '100%' }}
@@ -281,6 +283,6 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
           </div>
         )}
       </AnimatePresence>
-    </nav>
+    </>
   );
 }