192 lines
9.0 KiB
TypeScript
192 lines
9.0 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter, usePathname } from "next/navigation"
|
|
import { LayoutDashboard, Plus, User, FolderPlus, Package, MapPin } from "lucide-react"
|
|
|
|
interface NavItem {
|
|
title: string
|
|
href: string
|
|
icon: React.ElementType
|
|
gradient: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{
|
|
title: "Dashboard",
|
|
href: "/dashboard",
|
|
icon: LayoutDashboard,
|
|
gradient: "from-blue-400 to-indigo-500"
|
|
},
|
|
{
|
|
title: "Create Project",
|
|
href: "/create-project",
|
|
icon: FolderPlus,
|
|
gradient: "from-blue-400 to-blue-600"
|
|
},
|
|
{
|
|
title: "Create Package",
|
|
href: "/create-package",
|
|
icon: Package,
|
|
gradient: "from-violet-400 to-purple-500"
|
|
},
|
|
{
|
|
title: "Create Location",
|
|
href: "/create-location",
|
|
icon: MapPin,
|
|
gradient: "from-amber-400 to-orange-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)
|
|
}
|
|
|
|
const isNewAnalysisActive = pathname === "/new-analysis"
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-0 h-screen w-20 bg-white border-r border-slate-200 z-50 flex flex-col items-center py-8 shadow-sm">
|
|
{/* Navigation Items */}
|
|
<nav className="flex-1 flex flex-col items-center gap-4">
|
|
{/* Dashboard - first item */}
|
|
{navItems.slice(0, 1).map((item) => {
|
|
const isActive = pathname === item.href
|
|
const Icon = item.icon
|
|
return (
|
|
<div key={item.href} className="relative group">
|
|
<button
|
|
onClick={() => handleNavigation(item)}
|
|
className={`
|
|
relative w-12 h-12 rounded-xl flex items-center justify-center
|
|
${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
|
|
transition-all duration-300 ease-out
|
|
hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
|
|
active:scale-95 border
|
|
`}
|
|
>
|
|
<Icon
|
|
className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
|
|
/>
|
|
</button>
|
|
<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}
|
|
<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>
|
|
)
|
|
})}
|
|
|
|
{/* New Analysis - Special eye-catchy button */}
|
|
<div className="relative group">
|
|
<button
|
|
onClick={() => router.push("/new-analysis")}
|
|
className={`
|
|
relative w-12 h-12 rounded-xl flex items-center justify-center
|
|
${isNewAnalysisActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
|
|
transition-all duration-300 ease-out
|
|
hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
|
|
active:scale-95 border
|
|
`}
|
|
>
|
|
<Plus
|
|
className={`h-6 w-6 transition-all duration-300 ${isNewAnalysisActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
|
|
/>
|
|
</button>
|
|
<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
|
|
">
|
|
Start New Analysis
|
|
<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>
|
|
|
|
{/* Divider */}
|
|
<div className="w-8 h-px bg-slate-200 my-1" />
|
|
|
|
{/* Create items */}
|
|
{navItems.slice(1, 4).map((item) => {
|
|
const isActive = pathname === item.href
|
|
const Icon = item.icon
|
|
return (
|
|
<div key={item.href} className="relative group">
|
|
<button
|
|
onClick={() => handleNavigation(item)}
|
|
className={`
|
|
relative w-12 h-12 rounded-xl flex items-center justify-center
|
|
${isActive ? 'bg-[#2563eb] border-[#2563eb] shadow-md' : 'bg-[#f0fafd] border-slate-100'}
|
|
transition-all duration-300 ease-out
|
|
hover:scale-110 hover:shadow-lg hover:bg-[#2563eb] hover:border-[#2563eb]
|
|
active:scale-95 border
|
|
`}
|
|
>
|
|
<Icon
|
|
className={`h-6 w-6 transition-all duration-300 ${isActive ? 'text-white' : 'text-slate-900 group-hover:text-white'} stroke-[2.5]`}
|
|
/>
|
|
</button>
|
|
<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}
|
|
<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="relative group">
|
|
<button
|
|
onClick={() => { }}
|
|
className="w-12 h-12 rounded-full bg-[#f0fafd] flex items-center justify-center cursor-not-allowed opacity-80 border border-slate-100 transition-all duration-300 hover:scale-110 hover:bg-[#2563eb] hover:border-[#2563eb]"
|
|
disabled
|
|
>
|
|
<User className="h-6 w-6 text-slate-900 transition-colors duration-300 group-hover:text-white" />
|
|
</button>
|
|
<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
|
|
">
|
|
Account (Coming Soon)
|
|
<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>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|