From 583047895f7de0eb11e25bfdd83c6cc3e2acd899 Mon Sep 17 00:00:00 2001
From: Zeeshan Khan <zeeshanatnorth@gmail.com>
Date: Tue, 2 Jun 2026 13:52:23 +0200
Subject: [PATCH] fix: ensure mobile menu and language dropdown appear in front
 of hero banner video (raised z-indexes for overlays)

- Navbar: z-[999]
- Mobile menu container/panel: z-[1000]/z-[1001]
- Cart drawer: z-[980]/z-[990]
- LanguageSwitcher dropdown/backdrop: z-[1010]/z-[1020]
- Updated comments
- Mobile menu (incl. when clicking language inside it) now reliably stacks above the mobile banner video and other content.
---
 components/CartDrawer.tsx       | 8 ++++----
 components/LanguageSwitcher.tsx | 4 ++--
 components/Navbar.tsx           | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/CartDrawer.tsx b/components/CartDrawer.tsx
index bc5d1e1..48ebac5 100644
--- a/components/CartDrawer.tsx
+++ b/components/CartDrawer.tsx
@@ -11,7 +11,7 @@
  * KEY DESIGN CHOICES:
  * - Fixed position, full-height, max-w-md (beautiful on both mobile and desktop)
  * - Backdrop click closes it (standard mobile pattern)
- * - z-[70] sits above almost everything (including the sticky category nav)
+ * - z-[990] sits above almost everything (including the sticky category nav) (below mobile menu)
  * - All cart mutations go through the context — this component is "dumb" UI only
  * 
  * THE ORDERING FLOW (very important for restaurant context):
@@ -82,13 +82,13 @@ Thank you!`;
       {/* SEMI-TRANSPARENT BACKDROP */}
       {/* Clicking anywhere outside the drawer closes it (standard mobile pattern) */}
       <div 
-        className="fixed inset-0 bg-black/40 z-[60]" 
+        className="fixed inset-0 bg-black/40 z-[980]" 
         onClick={closeCart}
       />
 
       {/* THE ACTUAL DRAWER — slides in from right */}
-      {/* z-[70] ensures it sits above sticky nav, category pills, and most other UI */}
-      <div className="fixed top-0 right-0 h-full w-full max-w-md bg-[#F8F5F0] z-[70] shadow-2xl flex flex-col">
+      {/* z-[990] ensures it sits above sticky nav, category pills, and most other UI (below mobile menu) */}
+      <div className="fixed top-0 right-0 h-full w-full max-w-md bg-[#F8F5F0] z-[990] shadow-2xl flex flex-col">
         {/* HEADER — Title + item count + quick clear + close button */}
         <div className="flex items-center justify-between p-6 border-b border-[#EDE6D9]">
           <div className="flex items-center gap-3">
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
index 2f04e5f..6c87085 100644
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@@ -31,12 +31,12 @@ export default function LanguageSwitcher() {
         <>
           {/* Backdrop */}
           <div 
-            className="fixed inset-0 z-40" 
+            className="fixed inset-0 z-[1010]" 
             onClick={() => setIsOpen(false)} 
           />
           
           {/* Dropdown */}
-          <div className="absolute right-0 top-full mt-2 z-50 w-44 rounded-2xl border border-[#c99a2e]/20 bg-[#fbf7ef] shadow-2xl overflow-hidden">
+          <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">
             {languages.map((lang) => (
               <button
                 key={lang.code}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 87f1948..eab7305 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -54,7 +54,7 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
 
   return (
     <nav 
-      className="fixed top-0 left-0 right-0 z-[60] h-[64px] border-b border-[#c99a2e]/20 bg-[#fbf7ef] shadow-sm backdrop-blur-xl"
+      className="fixed top-0 left-0 right-0 z-[999] 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 */}
@@ -178,10 +178,10 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
         </div>
       </div>
 
-      {/* Modern Mobile Menu Drawer (slide-in, animated, high-contrast, touch-friendly) */}
+      {/* 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-[65]">
+          <div className="md:hidden fixed inset-0 z-[1000]">
             {/* Backdrop */}
             <motion.div
               className="absolute inset-0 bg-[#101724]/70 backdrop-blur-md"
@@ -194,7 +194,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"
+              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]"
               initial={{ x: '100%' }}
               animate={{ x: 0 }}
               exit={{ x: '100%' }}