103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { cn } from '@/lib/utils'
|
|
import {
|
|
Monitor,
|
|
LayoutDashboard,
|
|
Laptop,
|
|
History,
|
|
Settings,
|
|
Download,
|
|
Link2,
|
|
ShieldCheck
|
|
} from 'lucide-react'
|
|
|
|
interface Profile {
|
|
fullName: string | null
|
|
company: string | null
|
|
role: string | null
|
|
}
|
|
|
|
interface AuthUser {
|
|
id: string
|
|
email: string
|
|
name: string
|
|
}
|
|
|
|
interface DashboardSidebarProps {
|
|
user: AuthUser
|
|
profile: Profile | null
|
|
}
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', icon: LayoutDashboard, label: 'Overview' },
|
|
{ href: '/dashboard/machines', icon: Laptop, label: 'Machines' },
|
|
{ href: '/dashboard/connect', icon: Link2, label: 'Quick Connect' },
|
|
{ href: '/dashboard/sessions', icon: History, label: 'Sessions' },
|
|
{ href: '/download', icon: Download, label: 'Download Agent' },
|
|
{ href: '/dashboard/settings', icon: Settings, label: 'Settings' },
|
|
]
|
|
|
|
const adminNavItems = [
|
|
{ href: '/dashboard/admin', icon: ShieldCheck, label: 'Admin' },
|
|
]
|
|
|
|
export function DashboardSidebar({ profile }: DashboardSidebarProps) {
|
|
const pathname = usePathname()
|
|
const isAdmin = profile?.role === 'admin'
|
|
const allNavItems = isAdmin ? [...navItems, ...adminNavItems] : navItems
|
|
|
|
return (
|
|
<aside className="hidden lg:flex w-64 flex-col border-r border-border/50 bg-sidebar">
|
|
<div className="flex h-16 items-center gap-2 px-6 border-b border-sidebar-border">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
|
|
<Monitor className="h-4 w-4 text-primary-foreground" />
|
|
</div>
|
|
<span className="font-bold text-sidebar-foreground">RemoteLink</span>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-4 space-y-1">
|
|
{allNavItems.map((item) => {
|
|
const isActive =
|
|
pathname === item.href ||
|
|
(item.href !== '/dashboard' && pathname.startsWith(item.href))
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-sidebar-accent text-sidebar-accent-foreground'
|
|
: 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'
|
|
)}
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
{item.label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-sidebar-border">
|
|
<div className="flex items-center gap-3 px-3 py-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium">
|
|
{profile?.fullName?.charAt(0)?.toUpperCase() || 'U'}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-sidebar-foreground truncate">
|
|
{profile?.fullName || 'User'}
|
|
</p>
|
|
<p className="text-xs text-sidebar-foreground/60 truncate">
|
|
{profile?.company || 'Personal'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|