openhands
c7c4617f2a
- mobile-nav: pure block/hidden toggle, no transforms, no transition-all - nav-dropdown: clean block/hidden toggle, no CSS animation hacks - navigation: removed shadow-sm, no will-change, no GPU compositing - top-header: consistent mobile layout, clean details/summary dropdowns - admin-mobile-wrapper: inline transition instead of CSS class for sidebar - globals.css: removed transition-all from nav-item/dropdown-item, replaced with specific color/background-color transitions only, added hover bg
94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { type ReactNode, useEffect, useRef, useState } from "react";
|
|
|
|
interface MobileNavProps {
|
|
children: ReactNode;
|
|
menuLabel?: string;
|
|
closeLabel?: string;
|
|
}
|
|
|
|
export function MobileNav({
|
|
children,
|
|
menuLabel = "Open menu",
|
|
closeLabel = "Close menu",
|
|
}: MobileNavProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setOpen(false);
|
|
};
|
|
document.addEventListener("keydown", onKey);
|
|
return () => document.removeEventListener("keydown", onKey);
|
|
}, [open]);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg ml-auto shrink-0"
|
|
style={{
|
|
color: "var(--color-navbar-text-readable, var(--color-navbar-text))",
|
|
}}
|
|
aria-expanded={open}
|
|
aria-controls="mobile-menu"
|
|
aria-label={open ? closeLabel : menuLabel}
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
{open ? (
|
|
<>
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<line x1="3" y1="6" x2="21" y2="6" />
|
|
<line x1="3" y1="12" x2="21" y2="12" />
|
|
<line x1="3" y1="18" x2="21" y2="18" />
|
|
</>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className="fixed inset-0 z-30 md:hidden"
|
|
onClick={() => setOpen(false)}
|
|
style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
|
|
/>
|
|
)}
|
|
|
|
<div
|
|
id="mobile-menu"
|
|
ref={panelRef}
|
|
role="menu"
|
|
className={`${open ? "block" : "hidden"} md:block w-full md:w-auto`}
|
|
style={{ backgroundColor: "var(--color-navbar)" }}
|
|
>
|
|
<div
|
|
className="flex flex-col md:flex-row md:items-center gap-y-0.5 p-2 md:p-0 rounded-xl md:rounded-none border md:border-0 shadow-lg md:shadow-none mt-1 md:mt-0"
|
|
style={{
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
|
|
}}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|