67 lines
No EOL
1.7 KiB
JavaScript
67 lines
No EOL
1.7 KiB
JavaScript
"use client"
|
|
import { Button } from '@/components/ui/button'
|
|
import { BriefcaseBusiness, CalendarClock, Clock, Settings } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
|
|
const menu = [
|
|
{
|
|
id: 1,
|
|
name: 'Meeting',
|
|
path: '/dashboard/meeting',
|
|
icon: BriefcaseBusiness
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Scheduled Meeting',
|
|
path: '/dashboard/scheduled_meeting',
|
|
icon: CalendarClock
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Availability',
|
|
path: '/dashboard/availability',
|
|
icon: Clock
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Setting',
|
|
path: '/dashboard/setting',
|
|
icon: Settings
|
|
}
|
|
]
|
|
|
|
const SideNav = () => {
|
|
|
|
const path = usePathname();
|
|
const [activePath, setActivePath] = useState(path);
|
|
|
|
useEffect(() => {
|
|
path && setActivePath(path)
|
|
}, [path])
|
|
|
|
return (
|
|
<div className='px-5 py-10'>
|
|
<div className='flex justify-center'>
|
|
<p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
|
|
</div>
|
|
<Link href={'/create_meeting'}>
|
|
<Button className="flex gap-2 w-full mt-10">Create</Button>
|
|
</Link>
|
|
<div className='mt-5'>
|
|
{menu.map((item, index) => (
|
|
<Link href={item.path} key={index}>
|
|
<Button variant="ghost" className={`w-full flex justify-start gap-2 mt-2 hover:bg-gray-200 ${activePath == item.path && 'bg-gray-200'}`}>
|
|
<item.icon/>
|
|
{item.name}
|
|
</Button>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SideNav |