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/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}
-            onClick={() => setActiveItem(item.key)}
+            isActive={pathname === item.path}
+            href={item.path}
           />
         ))}
       </nav>