109 lines
4.4 KiB
TypeScript
109 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter, usePathname } from "next/navigation"
|
|
import { Home, LayoutDashboard, User } from "lucide-react"
|
|
|
|
interface NavItem {
|
|
title: string
|
|
href: string
|
|
icon: React.ElementType
|
|
gradient: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{
|
|
title: "Home",
|
|
href: "/",
|
|
icon: Home,
|
|
gradient: "from-emerald-400 to-teal-500"
|
|
},
|
|
{
|
|
title: "Dashboard",
|
|
href: "/dashboard",
|
|
icon: LayoutDashboard,
|
|
gradient: "from-blue-400 to-indigo-500"
|
|
},
|
|
{
|
|
title: "Account",
|
|
href: "/account",
|
|
icon: User,
|
|
gradient: "from-purple-400 to-pink-500",
|
|
disabled: true
|
|
}
|
|
]
|
|
|
|
export function SidebarNavigation() {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
const handleNavigation = (item: NavItem) => {
|
|
if (item.disabled) return
|
|
router.push(item.href)
|
|
}
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-0 h-screen w-16 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border-r border-gray-200/50 dark:border-gray-700/50 z-50 flex flex-col items-center py-6 shadow-lg">
|
|
{/* Logo */}
|
|
<div className="mb-8">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/30">
|
|
<span className="text-white font-bold text-lg">V</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation Items */}
|
|
<nav className="flex-1 flex flex-col items-center gap-3">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<div key={item.href} className="relative group">
|
|
<button
|
|
onClick={() => handleNavigation(item)}
|
|
disabled={item.disabled}
|
|
className={`
|
|
relative w-11 h-11 rounded-xl flex items-center justify-center
|
|
transition-all duration-300 ease-out
|
|
${item.disabled
|
|
? "text-gray-300 dark:text-gray-600 cursor-not-allowed opacity-50"
|
|
: isActive
|
|
? `bg-gradient-to-br ${item.gradient} text-white shadow-lg`
|
|
: "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300"
|
|
}
|
|
`}
|
|
style={isActive && !item.disabled ? { boxShadow: `0 8px 20px -4px rgba(99, 102, 241, 0.4)` } : {}}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
</button>
|
|
|
|
{/* Tooltip */}
|
|
<div className="
|
|
absolute left-full ml-3 top-1/2 -translate-y-1/2
|
|
px-3 py-1.5 rounded-lg
|
|
bg-gray-900 dark:bg-gray-700 text-white text-sm font-medium
|
|
opacity-0 invisible group-hover:opacity-100 group-hover:visible
|
|
transition-all duration-200 ease-out
|
|
whitespace-nowrap
|
|
shadow-lg
|
|
pointer-events-none
|
|
">
|
|
{item.title}{item.disabled && " (Coming Soon)"}
|
|
{/* Arrow */}
|
|
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700" />
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{/* Bottom section */}
|
|
<div className="mt-auto">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
|
|
<User className="h-5 w-5 text-gray-500 dark:text-gray-400" />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|