75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Shared state + styling for a sidebar that collapses in place on large screens
|
|
* and opens as a slide-in drawer on small ones. One toggle drives both, choosing
|
|
* the right behaviour by media query at click time. Defaults: open on desktop
|
|
* (CSS `lg:` classes), closed on mobile (state) — so SSR and hydration agree.
|
|
*/
|
|
export function useCollapsibleSidebar() {
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const [desktopCollapsed, setDesktopCollapsed] = useState(false);
|
|
|
|
function toggle() {
|
|
if (typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches) {
|
|
setDesktopCollapsed((c) => !c);
|
|
} else {
|
|
setMobileOpen((o) => !o);
|
|
}
|
|
}
|
|
|
|
return {
|
|
mobileOpen,
|
|
desktopCollapsed,
|
|
toggle,
|
|
closeMobile: () => setMobileOpen(false),
|
|
};
|
|
}
|
|
|
|
export function sidebarAsideClass(mobileOpen: boolean, desktopCollapsed: boolean) {
|
|
return cn(
|
|
"z-40 w-64 shrink-0 border-r border-border/60 bg-surface",
|
|
// Small screens: a fixed slide-in drawer sitting below the header.
|
|
"fixed bottom-0 left-0 top-[4.125rem] transition-transform duration-200",
|
|
mobileOpen ? "translate-x-0 shadow-[var(--shadow-lg)]" : "-translate-x-full",
|
|
// Large screens: part of the layout flow, collapsible in place.
|
|
"lg:static lg:z-auto lg:translate-x-0 lg:shadow-none lg:transition-none",
|
|
desktopCollapsed ? "lg:hidden" : "lg:block",
|
|
);
|
|
}
|
|
|
|
export const sidebarNavClass =
|
|
"h-full overflow-y-auto p-4 lg:sticky lg:top-[4.125rem] lg:h-[calc(100vh-4.125rem)]";
|
|
|
|
export function SidebarBackdrop({ show, onClick }: { show: boolean; onClick: () => void }) {
|
|
if (!show) return null;
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-30 bg-foreground/30 lg:hidden"
|
|
onClick={onClick}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function SidebarToggle({ onClick, className }: { onClick: () => void; className?: string }) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
aria-label="Toggle topics menu"
|
|
className={cn(
|
|
"mb-5 inline-flex items-center gap-2 rounded-xl border border-border/60 bg-surface px-3 py-2 text-sm font-bold text-muted shadow-[var(--shadow-sm)] transition-colors hover:text-foreground",
|
|
className,
|
|
)}
|
|
>
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
Topics
|
|
</button>
|
|
);
|
|
}
|