77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Menu, X } from "lucide-react";
|
|
import { type ReactNode, useEffect, useState } from "react";
|
|
|
|
export function AdminMobileWrapper({
|
|
sidebar,
|
|
children,
|
|
}: {
|
|
sidebar: ReactNode;
|
|
children: ReactNode;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const handler = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setOpen(false);
|
|
};
|
|
document.addEventListener("keydown", handler);
|
|
return () => document.removeEventListener("keydown", handler);
|
|
}, [open]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[var(--admin-canvas)] flex flex-col lg:flex-row">
|
|
{/* Mobile header */}
|
|
<div
|
|
className={`lg:hidden sticky top-0 flex items-center gap-3 px-4 py-3 border-b ${
|
|
open ? "z-30" : "z-50"
|
|
}`}
|
|
style={{
|
|
backgroundColor: "var(--admin-sidebar-background)",
|
|
borderColor: "var(--admin-border)",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(!open)}
|
|
className="flex items-center justify-center w-9 h-9 rounded-lg
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--admin-sidebar-background)]"
|
|
style={{ color: "var(--admin-sidebar-text-readable)" }}
|
|
>
|
|
{open ? <X size={18} /> : <Menu size={18} />}
|
|
</button>
|
|
<span
|
|
className="text-sm font-bold"
|
|
style={{ color: "var(--admin-sidebar-text-readable)" }}
|
|
>
|
|
Admin Panel
|
|
</span>
|
|
</div>
|
|
|
|
{/* Backdrop */}
|
|
{open && (
|
|
<div
|
|
className="fixed inset-0 z-40 lg:hidden"
|
|
onClick={() => setOpen(false)}
|
|
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<div
|
|
className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
|
|
open ? "translate-x-0" : "-translate-x-full"
|
|
}`}
|
|
style={{ transition: "transform 300ms ease-in-out" }}
|
|
>
|
|
{sidebar}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex flex-col flex-1 min-w-0">{children}</div>
|
|
</div>
|
|
);
|
|
}
|