46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { Link } from '../common/Link'
|
|
import { usePathname } from 'next/navigation'
|
|
import {
|
|
HomeIcon,
|
|
BookOpenIcon,
|
|
UserGroupIcon,
|
|
UserIcon
|
|
} from '@heroicons/react/24/outline'
|
|
|
|
const navigation = [
|
|
{ name: 'Home', href: '/', icon: HomeIcon },
|
|
{ name: 'Journal', href: '/thejournal', icon: BookOpenIcon },
|
|
{ name: 'Forum', href: 'https://forum.morethanadiagnosis.org', icon: UserGroupIcon },
|
|
{ name: 'Profile', href: '/profile', icon: UserIcon },
|
|
]
|
|
|
|
export function MobileNav() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 pb-safe">
|
|
<div className="flex justify-around items-center h-16">
|
|
{navigation.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
variant="neutral"
|
|
className={`flex flex-col items-center justify-center w-full h-full space-y-1 ${isActive ? 'text-primary-600' : 'text-gray-500 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<item.icon
|
|
className={`h-6 w-6 ${isActive ? 'text-primary-600' : 'text-gray-400'}`}
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="text-xs font-medium">{item.name}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|