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
-      onClick={onClick}
+    <Link
+      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'
-          : 'hover:bg-gray-50'
+          ? 'bg-fill-secondary-click dark:bg-gray-700'
+          : '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-tertiary font-medium'
+            ? 'text-text-primary dark:text-white font-bold'
+            : 'text-text-tertiary dark:text-gray-400 font-medium'
           }
         `}
       >
         {label}
       </span>
-    </button>
+    </Link>
   );
 }