4e50e7e79d
- Improved import organization and formatting in PlaylistsPage, RegisterPage, SoundsPage, SettingsPage, and UsersPage for better readability. - Added error handling and user feedback with toast notifications in SoundsPage and SettingsPage. - Enhanced user experience by implementing debounced search functionality in PlaylistsPage and SoundsPage. - Updated the layout and structure of forms in SettingsPage and UsersPage for better usability. - Improved accessibility and semantics by ensuring proper labeling and descriptions in forms. - Fixed minor bugs related to state management and API calls in various components.
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { Separator } from '@/components/ui/separator'
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
SidebarRail,
|
|
} from '@/components/ui/sidebar'
|
|
import { useAuth } from '@/contexts/AuthContext'
|
|
import {
|
|
Download,
|
|
Home,
|
|
Music,
|
|
PlayCircle,
|
|
Settings,
|
|
Users,
|
|
} from 'lucide-react'
|
|
import { CreditsNav } from './nav/CreditsNav'
|
|
import { NavGroup } from './nav/NavGroup'
|
|
import { NavItem } from './nav/NavItem'
|
|
import { UserNav } from './nav/UserNav'
|
|
import { CompactPlayer } from './player/CompactPlayer'
|
|
|
|
interface AppSidebarProps {
|
|
showCompactPlayer?: boolean
|
|
}
|
|
|
|
export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
|
|
const { user, logout } = useAuth()
|
|
|
|
if (!user) return null
|
|
|
|
return (
|
|
<Sidebar variant="sidebar" collapsible="icon">
|
|
<SidebarHeader>
|
|
<div className="flex items-center gap-2 px-2 py-2">
|
|
<Music className="h-6 w-6" />
|
|
<span className="font-semibold text-lg group-data-[collapsible=icon]:hidden">
|
|
SDB v2
|
|
</span>
|
|
</div>
|
|
</SidebarHeader>
|
|
|
|
<SidebarContent>
|
|
<NavGroup label="Application">
|
|
<NavItem href="/" icon={Home} title="Dashboard" />
|
|
<NavItem href="/sounds" icon={Music} title="Sounds" />
|
|
<NavItem href="/playlists" icon={PlayCircle} title="Playlists" />
|
|
<NavItem href="/extractions" icon={Download} title="Extractions" />
|
|
</NavGroup>
|
|
|
|
{user.role === 'admin' && (
|
|
<NavGroup label="Admin">
|
|
<NavItem href="/admin/users" icon={Users} title="Users" />
|
|
<NavItem href="/admin/settings" icon={Settings} title="Settings" />
|
|
</NavGroup>
|
|
)}
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter>
|
|
{showCompactPlayer && (
|
|
<>
|
|
<Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
|
|
<div className="p-2">
|
|
<CompactPlayer />
|
|
</div>
|
|
<Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
|
|
</>
|
|
)}
|
|
<CreditsNav user={user} />
|
|
<Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
|
|
<UserNav user={user} logout={logout} />
|
|
</SidebarFooter>
|
|
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
)
|
|
}
|