77 lines
3.4 KiB
TypeScript
77 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { Link } from '../common/Link'
|
|
import { usePathname } from 'next/navigation'
|
|
import {
|
|
HomeIcon,
|
|
MicrophoneIcon,
|
|
BookOpenIcon,
|
|
UserGroupIcon,
|
|
UserIcon,
|
|
ArrowRightOnRectangleIcon
|
|
} from '@heroicons/react/24/outline'
|
|
import { useAuth } from '@/lib/hooks/useAuth'
|
|
|
|
const navigation = [
|
|
{ name: 'Home', href: '/dashboard', icon: HomeIcon },
|
|
{ name: 'Podcasts', href: '/podcast', icon: MicrophoneIcon },
|
|
{ name: 'The Journal', href: '/thejournal', icon: BookOpenIcon },
|
|
{ name: 'Forum', href: 'https://forum.morethanadiagnosis.org', icon: UserGroupIcon },
|
|
{ name: 'Resources', href: '/resources', icon: BookOpenIcon },
|
|
{ name: 'Profile', href: '/profile', icon: UserIcon },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname()
|
|
const { logout } = useAuth()
|
|
|
|
return (
|
|
<div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
|
<div className="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white">
|
|
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
|
|
<div className="flex items-center flex-shrink-0 px-4 mb-8">
|
|
<span className="text-xl font-bold text-primary-600">MoreThanADiagnosis</span>
|
|
</div>
|
|
<nav className="mt-5 flex-1 px-2 space-y-1">
|
|
{navigation.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
variant="neutral"
|
|
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${isActive
|
|
? 'bg-primary-50 text-primary-700'
|
|
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<item.icon
|
|
className={`mr-3 flex-shrink-0 h-6 w-6 ${isActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-500'
|
|
}`}
|
|
aria-hidden="true"
|
|
/>
|
|
{item.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
<div className="flex-shrink-0 flex border-t border-gray-200 p-4">
|
|
<button
|
|
onClick={() => logout()}
|
|
className="flex-shrink-0 w-full group block"
|
|
>
|
|
<div className="flex items-center">
|
|
<ArrowRightOnRectangleIcon className="inline-block h-5 w-5 text-gray-400 group-hover:text-gray-500" />
|
|
<div className="ml-3">
|
|
<p className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
|
|
Sign out
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|