feat: add navigation links to sidebar

- Updated NavItem to use Next.js Link component
- Changed from onClick to href for proper routing
- Added usePathname to detect current route
- Assets navigation now links to /product page
- Active state automatically highlights based on current path
- Added dark mode hover states

Navigation:
- Click "Assets" in sidebar to view Product page
- Automatic active highlighting on current page
- Smooth client-side navigation

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

components/NavItem.tsx

@@ -1,16 +1,17 @@
 import Image from "next/image";
+import Link from "next/link";
 
 interface NavItemProps {
   icon: string;
   label: string;
   isActive: boolean;
-  onClick: () => void;
+  href: string;
 }
 
-export default function NavItem({ icon, label, isActive, onClick }: NavItemProps) {
+export default function NavItem({ icon, label, isActive, href }: NavItemProps) {
   return (
-    <button
+    <Link
-      onClick={onClick}
+      href={href}
       className={`
         rounded-xl
         pl-4
@@ -22,8 +23,8 @@ export default function NavItem({ icon, label, isActive, onClick }: NavItemProps
         overflow-hidden
         transition-colors
         ${isActive
-          ? 'bg-fill-secondary-click'
+          ? 'bg-fill-secondary-click dark:bg-gray-700'
-          : 'hover:bg-gray-50'
+          : 'hover:bg-gray-50 dark:hover:bg-gray-700'
         }
       `}
     >
@@ -41,13 +42,13 @@ export default function NavItem({ icon, label, isActive, onClick }: NavItemProps
           text-sm
           leading-[150%]
           ${isActive
-            ? 'text-text-primary font-bold'
+            ? 'text-text-primary dark:text-white font-bold'
-            : 'text-text-tertiary font-medium'
+            : 'text-text-tertiary dark:text-gray-400 font-medium'
           }
         `}
       >
         {label}
       </span>
-    </button>
+    </Link>
   );
 }

components/Sidebar.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import Image from "next/image";
-import { useState } from "react";
+import { usePathname } from "next/navigation";
 import NavItem from "./NavItem";
 import { useApp } from "@/contexts/AppContext";
 
 export default function Sidebar() {
   const { t } = useApp();
-  const [activeItem, setActiveItem] = useState("Assets");
+  const pathname = usePathname();
 
   const navigationItems = [
-    { icon: "/icon-assets.svg", label: t("nav.assets"), key: "Assets", path: "/" },
+    { icon: "/icon-assets.svg", label: t("nav.assets"), key: "Assets", path: "/product" },
     { icon: "/icon-alp.svg", label: t("nav.alp"), key: "ALP", path: "/alp" },
     { icon: "/icon-swap.svg", label: t("nav.swap"), key: "Swap", path: "/swap" },
     { icon: "/icon-lending.svg", label: t("nav.lending"), key: "Lending", path: "/lending" },
@@ -39,8 +39,8 @@ export default function Sidebar() {
             key={item.key}
             icon={item.icon}
             label={item.label}
-            isActive={activeItem === item.key}
+            isActive={pathname === item.path}
-            onClick={() => setActiveItem(item.key)}
+            href={item.path}
           />
         ))}
       </nav>