109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { LayoutGrid, BookOpen, Share2, Palette, GitFork, Building2, Users } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
import { useRouter, usePathname } from "next/navigation"
|
|
|
|
interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const menuItems = [
|
|
{
|
|
title: "Board",
|
|
icon: LayoutGrid,
|
|
href: "/board",
|
|
iframe: "https://example.com/board",
|
|
},
|
|
{
|
|
title: "Chapter",
|
|
icon: BookOpen,
|
|
href: "/chapter",
|
|
iframe: "https://example.com/chapter",
|
|
},
|
|
{
|
|
title: "Flow",
|
|
icon: Share2,
|
|
href: "/flow",
|
|
iframe: "https://example.com/flow",
|
|
},
|
|
{
|
|
title: "Design",
|
|
icon: Palette,
|
|
href: "/design",
|
|
iframe: "https://example.com/design",
|
|
},
|
|
{
|
|
title: "GitLab",
|
|
icon: GitFork,
|
|
href: "/gitlab",
|
|
iframe: "https://gitlab.com",
|
|
badge: 1,
|
|
},
|
|
{
|
|
title: "CRM",
|
|
icon: Building2,
|
|
href: "/crm",
|
|
iframe: "https://example.com/crm",
|
|
},
|
|
{
|
|
title: "The Great Missions",
|
|
icon: Users,
|
|
href: "/missions",
|
|
iframe: "https://example.com/missions",
|
|
},
|
|
]
|
|
|
|
export function Sidebar({ isOpen, onClose, className }: SidebarProps) {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
const handleNavigation = (href: string) => {
|
|
router.push(href)
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isOpen && <div className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm" onClick={onClose} />}
|
|
<div
|
|
className={cn(
|
|
"fixed top-0 left-0 z-50 h-full w-64 transform bg-black text-white transition-transform duration-200 ease-in-out",
|
|
isOpen ? "translate-x-0" : "-translate-x-full",
|
|
className,
|
|
)}
|
|
>
|
|
<ScrollArea className="h-full w-full">
|
|
<div className="space-y-1 p-4">
|
|
{menuItems.map((item) => (
|
|
<Button
|
|
key={item.title}
|
|
variant="ghost"
|
|
className={cn(
|
|
"w-full justify-start gap-2 text-white hover:bg-gray-800 hover:text-white",
|
|
pathname === item.href && "bg-gray-800",
|
|
)}
|
|
onClick={() => handleNavigation(item.href)}
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
<span>{item.title}</span>
|
|
{item.badge && (
|
|
<span className="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white">
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|