init

negot8/dashboard/components/Sidebar.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+function Icon({ name, className = "" }: { name: string; className?: string }) {
+  return (
+    <span className={`material-symbols-outlined ${className}`}>{name}</span>
+  );
+}
+
+const NAV_ITEMS = [
+  { icon: "dashboard", label: "Dashboard", href: "/dashboard" },
+  { icon: "history", label: "History", href: "/history" },
+  { icon: "analytics", label: "Analytics", href: "/analytics" },
+  { icon: "settings", label: "Preferences", href: "/preferences" },
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="hidden md:flex w-60 flex-col bg-black/40 backdrop-blur-xl border-r border-white/5 relative z-20 shrink-0">
+      {/* Logo */}
+      <div className="flex h-16 items-center gap-3 px-5 border-b border-white/5">
+        <div className="flex items-center justify-center size-8 rounded-lg bg-[#B7A6FB]/10 border border-[#B7A6FB]/20 text-[#B7A6FB]">
+          <Icon name="hub" className="text-xl" />
+        </div>
+        <div>
+          <h1 className="text-white text-sm font-bold tracking-tight">
+            Agent<span className="text-[#B7A6FB] font-light">Mesh</span>
+          </h1>
+          <p className="text-[10px] text-slate-600 font-mono">v2.4.0</p>
+        </div>
+      </div>
+
+      {/* Nav */}
+      <nav className="flex flex-col gap-1 p-3 flex-1">
+        {NAV_ITEMS.map(({ icon, label, href }) => {
+          const isActive =
+            href === "/dashboard" ? pathname === "/dashboard" : pathname.startsWith(href);
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={`group flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-sm ${
+                isActive
+                  ? "bg-white/5 border border-white/10 text-white"
+                  : "text-slate-500 hover:text-white hover:bg-white/5"
+              }`}
+            >
+              <Icon
+                name={icon}
+                className={`text-[18px] ${
+                  isActive
+                    ? "text-[#B7A6FB]"
+                    : "group-hover:text-[#B7A6FB] transition-colors"
+                }`}
+              />
+              <span className="font-medium">{label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* System status footer */}
+      <div className="p-3 border-t border-white/5">
+        <div className="rounded-lg bg-gradient-to-b from-white/5 to-transparent border border-white/5 p-3 relative overflow-hidden">
+          <div className="absolute -right-4 -top-4 w-16 h-16 bg-[#B7A6FB]/10 blur-2xl rounded-full" />
+          <div className="flex items-center gap-2 mb-2 relative z-10">
+            <Icon name="bolt" className="text-[#B7A6FB] text-base" />
+            <span className="text-[10px] font-bold text-white tracking-wide">
+              System Status
+            </span>
+          </div>
+          <div className="w-full bg-white/10 h-0.5 rounded-full mb-2 overflow-hidden">
+            <div className="bg-[#B7A6FB] h-full w-3/4 shadow-[0_0_8px_#B7A6FB]" />
+          </div>
+          <p className="text-[9px] text-slate-500 font-mono">
+            LATENCY: <span className="text-[#B7A6FB]">12ms</span> ·{" "}
+            <span className="text-emerald-400">OPERATIONAL</span>
+          </p>
+        </div>
+      </div>
+    </aside>
+  );
+}