MacPro
121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import {
|
|
LayoutDashboard,
|
|
Dumbbell,
|
|
ListChecks,
|
|
Upload,
|
|
Settings,
|
|
LogOut,
|
|
} from 'lucide-react';
|
|
import { logoutAction } from './actions';
|
|
|
|
interface NavigationProps {
|
|
userName: string;
|
|
}
|
|
|
|
const navLinks = [
|
|
{ href: '/main/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ href: '/main/workouts', label: 'Workouts', icon: Dumbbell },
|
|
{ href: '/main/exercises', label: 'Exercises', icon: ListChecks },
|
|
{ href: '/main/import', label: 'Import', icon: Upload },
|
|
{ href: '/main/settings', label: 'Settings', icon: Settings },
|
|
];
|
|
|
|
export default function Navigation({ userName }: NavigationProps) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
const isActive = (href: string) => {
|
|
return pathname === href || pathname.startsWith(href + '/');
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
await logoutAction();
|
|
router.push('/auth/login');
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop Sidebar */}
|
|
<aside className="hidden md:flex fixed left-0 top-0 h-screen w-[var(--sidebar-width)] border-r border-zinc-800 bg-[#0A0A0A] flex-col">
|
|
<div className="p-6 border-b border-zinc-800">
|
|
<h2 className="text-3xl font-display text-white tracking-wider">Workout</h2>
|
|
<p className="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-sans">Planner</p>
|
|
</div>
|
|
|
|
<nav className="flex-1 overflow-y-auto p-4 space-y-2">
|
|
{navLinks.map((link) => {
|
|
const Icon = link.icon;
|
|
const active = isActive(link.href);
|
|
|
|
return (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`flex items-center gap-3 px-4 py-2.5 rounded transition-all duration-200 ${
|
|
active
|
|
? 'bg-white text-black font-semibold'
|
|
: 'text-zinc-500 hover:text-white hover:bg-zinc-900'
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5 flex-shrink-0" />
|
|
<span className="text-sm">{link.label}</span>
|
|
</a>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="border-t border-zinc-800 p-4 space-y-4">
|
|
<div className="px-4 py-2">
|
|
<p className="text-xs text-zinc-600 uppercase tracking-widest">User</p>
|
|
<p className="font-semibold text-white truncate mt-1">{userName}</p>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex items-center gap-3 px-4 py-2.5 rounded transition-all duration-200 w-full justify-start text-red-500 hover:text-red-400 hover:bg-red-950/30"
|
|
>
|
|
<LogOut className="w-5 h-5 flex-shrink-0" />
|
|
<span className="text-sm">Logout</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Mobile Bottom Nav */}
|
|
<header className="flex md:hidden fixed bottom-0 left-0 right-0 border-t border-zinc-800 bg-[#0A0A0A]">
|
|
<nav className="flex items-center justify-around h-[var(--bottom-nav-height)] w-full">
|
|
{navLinks.map((link) => {
|
|
const Icon = link.icon;
|
|
const active = isActive(link.href);
|
|
|
|
return (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`flex flex-col items-center justify-center flex-1 h-full gap-1 transition-colors duration-200 ${
|
|
active
|
|
? 'text-white bg-zinc-900'
|
|
: 'text-zinc-500 hover:text-white'
|
|
}`}
|
|
>
|
|
<Icon className="w-6 h-6" />
|
|
<span className="text-xs">{link.label}</span>
|
|
</a>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex flex-col items-center justify-center flex-1 h-full gap-1 text-red-500 hover:text-red-400 transition-colors duration-200"
|
|
>
|
|
<LogOut className="w-6 h-6" />
|
|
<span className="text-xs">Logout</span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|