better-auth-dashboard
Version:
A better-Auth powered admin dashboard.
58 lines (57 loc) • 4.07 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronRight, Home } from "lucide-react";
import { memo, useEffect, useState } from "react";
export const AppSidebar = memo(({ components, path, plugins, }) => {
const [pathname, setPathname] = useState("");
const { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, Collapsible, CollapsibleContent, CollapsibleTrigger, } = components;
const items = [
{
title: "Home",
url: `${path}`,
icon: Home,
subItems: [],
},
// {
// title: "Search",
// url: `${path}/search`,
// icon: Search,
// },
...plugins.map((x) => ({
title: x.title,
url: `${path}/${x.slug}`,
icon: x.icon,
subItems: x.subItems.map((z) => ({
title: z.title,
url: `${path}/${x.slug}/${z.slug}`,
icon: z.icon,
})),
})),
// {
// title: "Settings",
// url: `${path}/settings`,
// icon: Settings,
// },
];
useEffect(() => {
setPathname(typeof window !== "undefined" ? window.location.pathname : "");
}, []);
return (_jsx(Sidebar, { children: _jsx(SidebarContent, { children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Admin Dashboard" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: items.map((item, i) => {
if (item.subItems.length === 0) {
return (_jsx(SidebarItem, { SidebarMenuButton: SidebarMenuButton, item: item, pathname: pathname, setPathname: setPathname, SidebarMenuItem: SidebarMenuItem }, item.title + i));
}
else {
return (_jsx(Collapsible, { title: item.title, className: "group/collapsible", children: _jsxs(SidebarGroup, { className: "p-0", children: [_jsx(SidebarGroupLabel, { asChild: true, className: "text-sm group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", children: _jsx(CollapsibleTrigger, { className: "py-2 min-h-[35px]", children: _jsxs("div", { className: "flex items-center w-full gap-2 h-5 [&>svg]:size-4", children: [_jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" })] }) }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { className: "pl-2 mt-1", children: item.subItems.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: pathname === item.url, onClick: () => {
window.history.pushState(item.title, item.title, item.url);
setPathname(item.url);
}, children: _jsxs("div", { children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }) }, item.title))) }) }) })] }) }, item.title));
}
}) }) })] }) }) }));
});
AppSidebar.displayName = `AppSidebar`;
function SidebarItem({ SidebarMenuButton, SidebarMenuItem, item, pathname, setPathname, }) {
return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: pathname === item.url, suppressHydrationWarning: true, onClick: () => {
window.history.pushState(item.title, item.title, item.url);
setPathname(item.url);
}, className: "cursor-pointer select-none", children: _jsxs("div", { className: "w-full h-full", children: [_jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }) }));
}