feat: add app sidebar nav layout

app/(app)/layout.tsx

@@ -1,42 +1,68 @@
-'use client';
+import Link from "next/link";
 
-import { useEffect } from 'react';
+const NAV = [
-import { useRouter } from 'next/navigation';
+  { href: "/agents", label: "Agents", icon: "◈" },
-import { useAuthStore } from '@/stores/auth-store';
+  { href: "/tasks", label: "Tasks", icon: "◉" },
-import { useWorkspaceStore } from '@/stores/workspace-store';
+  { href: "/memory", label: "Memory", icon: "◫" },
-import Sidebar from '@/components/Sidebar';
+  { href: "/chat", label: "Chat", icon: "◎" },
-import AppHeader from '@/components/AppHeader';
+];
 
 export default function AppLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const router = useRouter();
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const fetchWorkspaces = useWorkspaceStore((state) => state.fetchWorkspaces);
-
-  useEffect(() => {
-    if (!isAuthenticated) {
-      router.push('/login');
-    } else {
-      fetchWorkspaces();
-    }
-  }, [isAuthenticated, router, fetchWorkspaces]);
-
-  if (!isAuthenticated) {
-    return null;
-  }
-
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex min-h-screen bg-black">
-      <Sidebar />
+      {/* Sidebar */}
-      <div className="flex flex-1 flex-col overflow-hidden">
+      <aside className="w-56 shrink-0 border-r border-slate-800 flex flex-col">
-        <AppHeader />
+        {/* Logo */}
-        <main className="flex-1 overflow-y-auto bg-black">
+        <div className="p-5 border-b border-slate-800">
-          {children}
+          <div className="font-bold text-white text-lg tracking-tight">
-        </main>
+            BlackRoad
-      </div>
+            <span
+              className="ml-1"
+              style={{
+                background:
+                  "linear-gradient(135deg, #F5A623 0%, #FF1D6C 38.2%, #9C27B0 61.8%, #2979FF 100%)",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+              }}
+            >
+              OS
+            </span>
+          </div>
+          <div className="text-xs text-slate-500 mt-0.5">30K Agents Online</div>
+        </div>
+
+        {/* Nav */}
+        <nav className="flex-1 p-3 space-y-1">
+          {NAV.map(({ href, label, icon }) => (
+            <Link
+              key={href}
+              href={href}
+              className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-colors text-sm font-medium"
+            >
+              <span className="text-base">{icon}</span>
+              {label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-slate-800">
+          <div className="text-xs text-slate-600">
+            Gateway{" "}
+            <span className="text-green-500">●</span>
+          </div>
+          <div className="text-xs text-slate-600 mt-0.5">
+            v1.0.0 · blackroad.ai
+          </div>
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main className="flex-1 overflow-auto">{children}</main>
     </div>
   );
 }