105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
useSidebar,
|
|
} from '@/components/ui/sidebar'
|
|
import { useAuth } from '@/hooks/use-auth'
|
|
import { Home, Settings, Volume2 } from 'lucide-react'
|
|
import { Link, useLocation } from 'react-router'
|
|
import { NavPlan } from './NavPlan'
|
|
import { NavUser } from './NavUser'
|
|
|
|
const navigationItems = [
|
|
{
|
|
title: 'Dashboard',
|
|
href: '/dashboard',
|
|
icon: Home,
|
|
},
|
|
{
|
|
title: 'Soundboard',
|
|
href: '/soundboard',
|
|
icon: Volume2,
|
|
},
|
|
]
|
|
|
|
const adminNavigationItems = [
|
|
{
|
|
title: 'Sounds',
|
|
href: '/admin/sounds',
|
|
icon: Settings,
|
|
},
|
|
]
|
|
|
|
export function AppSidebar() {
|
|
const { user, logout } = useAuth()
|
|
const { state } = useSidebar()
|
|
const location = useLocation()
|
|
|
|
const isOpen = state === 'expanded'
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logout()
|
|
} catch (error) {
|
|
console.error('Logout failed:', error)
|
|
}
|
|
}
|
|
|
|
if (!user) return null
|
|
|
|
const allNavItems = [
|
|
...navigationItems,
|
|
...(user.role === 'admin' ? adminNavigationItems : []),
|
|
]
|
|
|
|
return (
|
|
<Sidebar>
|
|
<SidebarHeader>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
|
<span className="text-primary-foreground font-bold text-sm">
|
|
SB
|
|
</span>
|
|
</div>
|
|
{isOpen && (
|
|
<div>
|
|
<h2 className="text-lg font-semibold">Soundboard</h2>
|
|
<p className="text-xs text-muted-foreground">v2.0</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SidebarHeader>
|
|
|
|
<SidebarContent>
|
|
<SidebarMenu>
|
|
{allNavItems.map(item => {
|
|
const Icon = item.icon
|
|
const isActive = location.pathname === item.href
|
|
|
|
return (
|
|
<SidebarMenuItem key={item.href}>
|
|
<SidebarMenuButton asChild isActive={isActive}>
|
|
<Link to={item.href}>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
)
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter>
|
|
<NavPlan user={user} />
|
|
<NavUser user={user} logout={handleLogout} />
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
)
|
|
}
|