Import source: src/components/shell/sidebar
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,254 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import { ChevronDown, Menu, Search, Star, X } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Logo } from "@/components/common/logo";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { groupRoutes, routeItems, sidebarRoutes } from "@/lib/routes";
|
||||||
|
import { useUiStore } from "@/stores/ui-store";
|
||||||
|
|
||||||
|
export function Sidebar() {
|
||||||
|
const collapsed = useUiStore((state) => state.sidebarCollapsed);
|
||||||
|
const toggleSidebar = useUiStore((state) => state.toggleSidebar);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
className={cn(
|
||||||
|
"glass-bar fixed bottom-2 left-2 top-2 z-30 hidden overflow-hidden rounded-2xl border border-border/60 lg:flex lg:flex-col",
|
||||||
|
collapsed ? "w-[72px]" : "w-[var(--sidebar-width)]",
|
||||||
|
)}
|
||||||
|
aria-label="Primary navigation"
|
||||||
|
>
|
||||||
|
<SidebarBody
|
||||||
|
collapsed={collapsed}
|
||||||
|
headerAction={
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={toggleSidebar}
|
||||||
|
aria-label="Collapse sidebar"
|
||||||
|
>
|
||||||
|
<Menu className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MobileSidebar() {
|
||||||
|
const open = useUiStore((state) => state.mobileSidebarOpen);
|
||||||
|
const setOpen = useUiStore((state) => state.setMobileSidebarOpen);
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setOpen(false);
|
||||||
|
}, [pathname, setOpen]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
const onKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (event.key === "Escape") setOpen(false);
|
||||||
|
};
|
||||||
|
window.addEventListener("keydown", onKeyDown);
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
window.removeEventListener("keydown", onKeyDown);
|
||||||
|
};
|
||||||
|
}, [open, setOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("fixed inset-0 z-40 lg:hidden", !open && "pointer-events-none")}
|
||||||
|
aria-hidden={!open}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute inset-0 bg-background/60 backdrop-blur-sm transition-opacity duration-300",
|
||||||
|
open ? "opacity-100" : "opacity-0",
|
||||||
|
)}
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
/>
|
||||||
|
<aside
|
||||||
|
className={cn(
|
||||||
|
"glass-bar absolute inset-y-0 left-0 flex w-[min(86vw,300px)] flex-col overflow-hidden rounded-r-2xl border-r border-border/60 transition-transform duration-300 ease-out",
|
||||||
|
open ? "translate-x-0" : "-translate-x-full",
|
||||||
|
)}
|
||||||
|
aria-label="Primary navigation"
|
||||||
|
>
|
||||||
|
<SidebarBody
|
||||||
|
collapsed={false}
|
||||||
|
onNavigate={() => setOpen(false)}
|
||||||
|
headerAction={
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
aria-label="Close navigation"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarBody({
|
||||||
|
collapsed,
|
||||||
|
headerAction,
|
||||||
|
onNavigate,
|
||||||
|
}: {
|
||||||
|
collapsed: boolean;
|
||||||
|
headerAction: React.ReactNode;
|
||||||
|
onNavigate?: () => void;
|
||||||
|
}) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const favorites = useUiStore((state) => state.favorites);
|
||||||
|
const recent = useUiStore((state) => state.recent);
|
||||||
|
const [filter, setFilter] = useState("");
|
||||||
|
|
||||||
|
const favoritesRoutes = routeItems.filter((item) => favorites.includes(item.path));
|
||||||
|
const recentRoutes = routeItems.filter((item) => recent.includes(item.path));
|
||||||
|
const visible = useMemo(() => {
|
||||||
|
if (!filter) return sidebarRoutes;
|
||||||
|
const term = filter.toLowerCase();
|
||||||
|
return routeItems.filter((item) =>
|
||||||
|
[item.label, item.category, item.description, ...item.keywords].some((value) =>
|
||||||
|
value.toLowerCase().includes(term),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}, [filter]);
|
||||||
|
const groups = groupRoutes(visible);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex h-[var(--header-height)] items-center justify-between border-b border-border/60 px-3">
|
||||||
|
<Link href="/dashboard" className="overflow-hidden" onClick={onNavigate}>
|
||||||
|
<Logo compact={collapsed} className={collapsed ? "" : "h-9"} />
|
||||||
|
</Link>
|
||||||
|
{headerAction}
|
||||||
|
</div>
|
||||||
|
{!collapsed ? (
|
||||||
|
<div className="border-b border-border/60 p-3">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
value={filter}
|
||||||
|
onChange={(event) => setFilter(event.target.value)}
|
||||||
|
placeholder="Find tools"
|
||||||
|
className="h-8 pl-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className="min-h-0 flex-1 overflow-y-auto px-2 py-3">
|
||||||
|
{!collapsed && !filter ? (
|
||||||
|
<SidebarSection
|
||||||
|
title="Favorites"
|
||||||
|
routes={favoritesRoutes.slice(0, 6)}
|
||||||
|
pathname={pathname}
|
||||||
|
collapsed={collapsed}
|
||||||
|
icon="star"
|
||||||
|
onNavigate={onNavigate}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{!collapsed && !filter ? (
|
||||||
|
<SidebarSection
|
||||||
|
title="Recently used"
|
||||||
|
routes={recentRoutes.slice(0, 4)}
|
||||||
|
pathname={pathname}
|
||||||
|
collapsed={collapsed}
|
||||||
|
onNavigate={onNavigate}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{Object.entries(groups).map(([title, routes]) => (
|
||||||
|
<SidebarSection
|
||||||
|
key={title}
|
||||||
|
title={title}
|
||||||
|
routes={routes}
|
||||||
|
pathname={pathname}
|
||||||
|
collapsed={collapsed}
|
||||||
|
onNavigate={onNavigate}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SidebarSection({
|
||||||
|
title,
|
||||||
|
routes,
|
||||||
|
pathname,
|
||||||
|
collapsed,
|
||||||
|
icon,
|
||||||
|
onNavigate,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
routes: typeof routeItems;
|
||||||
|
pathname: string;
|
||||||
|
collapsed: boolean;
|
||||||
|
icon?: "star";
|
||||||
|
onNavigate?: () => void;
|
||||||
|
}) {
|
||||||
|
if (!routes.length) return null;
|
||||||
|
return (
|
||||||
|
<div className="mb-3">
|
||||||
|
{!collapsed ? (
|
||||||
|
<div className="mb-1 flex items-center gap-1 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
{icon === "star" ? (
|
||||||
|
<Star className="h-3 w-3 text-accent" />
|
||||||
|
) : (
|
||||||
|
<ChevronDown className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
{routes.map((route) => {
|
||||||
|
const Icon = route.icon;
|
||||||
|
const active =
|
||||||
|
pathname === route.path ||
|
||||||
|
(route.path !== "/dashboard" && pathname.startsWith(`${route.path}/`));
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={`${title}-${route.path}`}
|
||||||
|
href={route.path}
|
||||||
|
title={collapsed ? route.label : undefined}
|
||||||
|
onClick={onNavigate}
|
||||||
|
className={cn(
|
||||||
|
"focus-ring group relative flex items-center gap-2.5 rounded-md px-2 py-2 text-sm text-muted-foreground transition-colors duration-150 hover:bg-muted/70 hover:text-foreground",
|
||||||
|
active &&
|
||||||
|
"bg-primary/10 font-medium text-primary hover:bg-primary/15 hover:text-primary",
|
||||||
|
collapsed && "justify-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{active ? (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-full bg-primary shadow-[0_0_8px_hsl(var(--primary)/0.7)]",
|
||||||
|
collapsed && "left-0.5",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<Icon
|
||||||
|
className={cn(
|
||||||
|
"h-4 w-4 shrink-0 transition-transform duration-150 group-hover:scale-110",
|
||||||
|
active && "scale-105",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{!collapsed ? <span className="truncate">{route.label}</span> : null}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user