diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index ce04c19..ae80f3b 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -7,7 +7,7 @@ import { HeadContent, Scripts, } from "@tanstack/react-router"; -import { useState, type ReactNode } from "react"; +import { useEffect, useRef, useState, type ReactNode } from "react"; import { Menu, X, Phone, ChevronDown } from "lucide-react"; import { ScrollToTop } from "@/components/scroll-to-top"; import { QuickContact } from "@/components/quick-contact"; @@ -173,49 +173,124 @@ function Header() { const [open, setOpen] = useState(false); return ( -
-
- - Promist - - - - Profen Engineering - - -
- {open && ( -
-
- {NAV_ITEMS.map((item) => ( - setOpen(false)} /> - ))} + <> +
+
+ {/* Mobile: hamburger left, Promist beside it, Profen pushed right. + Desktop: lg:justify-center restores the original centered layout. */} +
+ + + Promist +
+
- )} -
+
+ {/* Drawer must be a sibling of
: the header's backdrop-blur creates a + containing block, which would trap a fixed-position drawer inside the 80px bar. */} + setOpen(false)} /> + + ); +} + +function MobileDrawer({ open, onClose }: { open: boolean; onClose: () => void }) { + const closeButtonRef = useRef(null); + + // Lock body scroll while the drawer is open + useEffect(() => { + if (!open) return; + const previous = document.body.style.overflow; + document.body.style.overflow = "hidden"; + return () => { + document.body.style.overflow = previous; + }; + }, [open]); + + // Close on Escape; move focus into the drawer when it opens + useEffect(() => { + if (!open) return; + closeButtonRef.current?.focus(); + const onKeyDown = (event: KeyboardEvent) => { + if (event.key === "Escape") onClose(); + }; + document.addEventListener("keydown", onKeyDown); + return () => document.removeEventListener("keydown", onKeyDown); + }, [open, onClose]); + + return ( +
+ {/* Backdrop */} + ); } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index ad435dc..c92b9bc 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -153,7 +153,7 @@ function HeroSlider() { {/* Arrows */}