This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -3,82 +3,89 @@
|
||||
import { useState } from "react";
|
||||
|
||||
interface MobileNavProps {
|
||||
children: React.ReactNode;
|
||||
/** Accessible label for the menu button. Pass translated string from server. */
|
||||
menuLabel?: string;
|
||||
closeLabel?: string;
|
||||
children: React.ReactNode;
|
||||
/** Accessible label for the menu button. Pass translated string from server. */
|
||||
menuLabel?: string;
|
||||
closeLabel?: string;
|
||||
}
|
||||
|
||||
export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Close menu" }: MobileNavProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
export function MobileNav({
|
||||
children,
|
||||
menuLabel = "Open menu",
|
||||
closeLabel = "Close menu",
|
||||
}: MobileNavProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
|
||||
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>
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
|
||||
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.45)",
|
||||
backdropFilter: "blur(6px)",
|
||||
WebkitBackdropFilter: "blur(6px)",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{open && (
|
||||
<div
|
||||
className="fixed inset-0 z-30 md:hidden"
|
||||
onClick={() => setOpen(false)}
|
||||
style={{
|
||||
backgroundColor: "rgba(0,0,0,0.45)",
|
||||
backdropFilter: "blur(6px)",
|
||||
WebkitBackdropFilter: "blur(6px)",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
id="mobile-menu"
|
||||
role="menu"
|
||||
className={`${
|
||||
open
|
||||
? "max-h-[80vh] opacity-100 translate-y-0"
|
||||
: "max-h-0 opacity-0 translate-y-[-6px] pointer-events-none md:pointer-events-auto"
|
||||
} overflow-y-auto transition-[opacity,transform] duration-200 ease-out md:!max-h-none md:!opacity-100 md:!translate-y-0 md:!overflow-visible md:flex md:items-center md:gap-x-1 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>
|
||||
</>
|
||||
);
|
||||
<div
|
||||
id="mobile-menu"
|
||||
role="menu"
|
||||
className={`${
|
||||
open
|
||||
? "max-h-[80vh] opacity-100 translate-y-0"
|
||||
: "max-h-0 opacity-0 translate-y-[-6px] pointer-events-none md:pointer-events-auto"
|
||||
} overflow-y-auto transition-[opacity,transform] duration-200 ease-out md:!max-h-none md:!opacity-100 md:!translate-y-0 md:!overflow-visible md:flex md:items-center md:gap-x-1 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user