53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { NavItem, navItems } from '@/lib/nav-items';
|
|
import { cn } from '@/lib/utils';
|
|
import { useSelectedLayoutSegment } from 'next/navigation';
|
|
import AppLink from '../AppLink';
|
|
|
|
export default function Sidenav() {
|
|
return (
|
|
<div className="fixed top-0 left-0 hidden h-full w-60 space-y-4 bg-dark shadow-md md:block">
|
|
<div className="px-6 pt-4">
|
|
<div className="flex items-center">
|
|
<div className="mx-auto">
|
|
<AppLink href="/">
|
|
<h1 className="text-2xl font-bold">Peer-at Code</h1>
|
|
</AppLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr className="mx-auto w-1/2 pb-4" />
|
|
<ul className="relative flex flex-col space-y-4 px-8">
|
|
{navItems.map((item) => (
|
|
<li className="relative" key={item.slug}>
|
|
<NavItem item={item} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="absolute bottom-5 flex w-full items-center text-center">
|
|
<button className="mx-auto rounded-md bg-light-dark py-3 px-8 hover:bg-light-dark/60">
|
|
<span className="text-sm font-semibold">Session ici plus tard</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NavItem({ item }: { item: NavItem }) {
|
|
const segment = useSelectedLayoutSegment();
|
|
const isActive = segment?.split('/').pop() === item.slug || (item.slug === '' && !segment);
|
|
return (
|
|
<AppLink
|
|
href={item.disabled ? '/dashboard' : `/dashboard/${item.slug}`}
|
|
className={cn('block rounded-md px-3 py-3 text-sm font-medium', {
|
|
'bg-light-dark text-gray-400 hover:bg-light-dark/60': !isActive,
|
|
'bg-blue-500 text-white': isActive,
|
|
'text-gray-600 hover:text-gray-600': item.disabled
|
|
})}
|
|
passHref
|
|
>
|
|
{item.name}
|
|
</AppLink>
|
|
);
|
|
}
|