112 lines
2.7 KiB
TypeScript
112 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
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-[#FAF9F6] 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",
|
|
pathname === item.href && "bg-accent"
|
|
)}
|
|
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>
|
|
</>
|
|
)
|
|
}
|
|
|