Initial commit

app/components/layout/Sidebar.tsx

@@ -0,0 +1,36 @@
+import { Link, useLocation } from "react-router";
+
+const navItems = [{ route: "/", label: "Explorer", icon: "home" }];
+
+export function Sidebar() {
+  const location = useLocation();
+
+  return (
+    <aside className="lg:col-span-3">
+      <nav className="space-y-1">
+        {navItems.map((item) => (
+          <Link
+            key={item.route}
+            to={item.route}
+            className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
+              location.pathname === item.route
+                ? "bg-blue-50 text-blue-700 border border-blue-100"
+                : "text-slate-600 hover:bg-slate-100"
+            }`}
+          >
+            <img
+              src={
+                location.pathname === item.route
+                  ? `https://img.icons8.com/ios-filled/50/2563eb/${item.icon}.png`
+                  : `https://img.icons8.com/ios/50/64748b/${item.icon}.png`
+              }
+              className="w-5 h-5 shrink-0 object-contain"
+              alt={item.label}
+            />
+            <span>{item.label}</span>
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}