89 lines
1.8 KiB
TypeScript
89 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
|
|
import { NavMain } from "@/components/nav-main";
|
|
import { NavProjects } from "@/components/nav-projects";
|
|
import { NavUser } from "@/components/nav-user";
|
|
import { TeamSwitcher } from "@/components/team-switcher";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarRail,
|
|
} from "@/components/ui/sidebar";
|
|
import {
|
|
GalleryVerticalEndIcon,
|
|
AudioLinesIcon,
|
|
TerminalIcon,
|
|
TerminalSquareIcon,
|
|
BotIcon,
|
|
BookOpenIcon,
|
|
Settings2Icon,
|
|
FrameIcon,
|
|
PieChartIcon,
|
|
MapIcon,
|
|
} from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
/*
|
|
(property) items: {
|
|
title: string;
|
|
url: string;
|
|
icon?: React.ReactNode;
|
|
isActive?: boolean;
|
|
items?: {
|
|
title: string;
|
|
url: string;
|
|
}[];
|
|
}[]
|
|
*/
|
|
|
|
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
|
const checkActive = (url: string) => {
|
|
// /dashboard
|
|
const pathname = usePathname();
|
|
return pathname === url;
|
|
};
|
|
|
|
// Dashboard
|
|
// Write (Blogs)
|
|
// SSH
|
|
// Scripts
|
|
const items = [
|
|
{
|
|
title: "Dashboard",
|
|
url: "/dashboard",
|
|
icon: <PieChartIcon className="h-4 w-4" />,
|
|
isActive: checkActive("/dashboard"),
|
|
},
|
|
{
|
|
title: "Write",
|
|
url: "/write",
|
|
icon: <BookOpenIcon className="h-4 w-4" />,
|
|
isActive: checkActive("/write"),
|
|
},
|
|
{
|
|
title: "SSH",
|
|
url: "/ssh",
|
|
icon: <TerminalSquareIcon className="h-4 w-4" />,
|
|
isActive: checkActive("/ssh"),
|
|
},
|
|
{
|
|
title: "Scripts",
|
|
url: "/scripts",
|
|
icon: <TerminalIcon className="h-4 w-4" />,
|
|
isActive: checkActive("/scripts"),
|
|
},
|
|
];
|
|
return (
|
|
<Sidebar collapsible="icon" {...props}>
|
|
<SidebarContent>
|
|
<NavMain items={items} />
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
);
|
|
}
|