UI changed, added dashboard

2026-02-06 17:07:43 +05:30
parent 86c23e01ad
commit ae16cec5ff
20 changed files with 2478 additions and 460 deletions
--- a/components/sidebar-navigation.tsx
+++ b/components/sidebar-navigation.tsx
@@ -0,0 +1,108 @@
+"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>
+    )
+}