put adminleftnavigation in a component, toi unclutter the page

2025-12-12 23:19:33 -05:00
parent e200667611
commit 3ddb48fe58
5 changed files with 611 additions and 85 deletions
@@ -0,0 +1,136 @@
+"use client";
+
+import type React from "react";
+import {
+  LayoutDashboard,
+  Download,
+  Layers,
+  Boxes,
+  Store,
+  Users,
+  Settings,
+  LucideMail,
+} from "lucide-react";
+
+type AdminLeftNavigationProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+const navItems = [
+  {
+    label: "Dashboard",
+    href: "/admin",
+    icon: <LayoutDashboard className="h-4 w-4" />,
+  },
+  {
+    label: "Imports",
+    href: "/admin/import-status",
+    icon: <Download className="h-4 w-4" />,
+  },
+  {
+    label: "Mappings",
+    href: "/admin/mapping",
+    icon: <Layers className="h-4 w-4" />,
+  },
+  {
+    label: "Products",
+    href: "/admin/products",
+    icon: <Boxes className="h-4 w-4" />,
+  },
+  {
+    label: "Merchants",
+    href: "/admin/merchants",
+    icon: <Store className="h-4 w-4" />,
+  },
+  {
+    label: "Platforms",
+    href: "/admin/platforms",
+    icon: <Layers className="h-4 w-4" />,
+  },
+  {
+    label: "Users",
+    href: "/admin/users",
+    icon: <Users className="h-4 w-4" />,
+  },
+  {
+    label: "Settings",
+    href: "/admin/settings",
+    icon: <Settings className="h-4 w-4" />,
+  },
+  {
+    label: "List Emails",
+    href: "/admin/email",
+    icon: <LucideMail className="h-4 w-4" />,
+  },
+  {
+    label: "Send a Email",
+    href: "/admin/email/send",
+    icon: <LucideMail className="h-4 w-4" />,
+  },
+];
+
+export default function AdminLeftNavigation({
+  collapsed,
+  onToggleCollapsed,
+}: AdminLeftNavigationProps) {
+  return (
+    <aside
+      className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
+        collapsed ? "w-16" : "w-60"
+      }`}
+    >
+      <div className="mb-6 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onToggleCollapsed}
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
+        >
+          <span className="sr-only">Toggle sidebar</span>
+          <div className="space-y-0.5">
+            <span className="block h-[1px] w-3 bg-current" />
+            <span className="block h-[1px] w-3 bg-current" />
+            <span className="block h-[1px] w-3 bg-current" />
+          </div>
+        </button>
+
+        {!collapsed && (
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
+              Battl Builders
+            </p>
+            <p className="text-[10px] text-zinc-600">Admin Command</p>
+          </div>
+        )}
+      </div>
+
+      <nav className="flex-1 space-y-1 text-sm">
+        {navItems.map((item) => (
+          <a
+            key={item.href}
+            href={item.href}
+            className="flex items-center justify-between rounded-md px-2 py-1.5 text-zinc-300 transition hover:bg-zinc-900 hover:text-amber-300"
+          >
+            <div className="flex items-center gap-2">
+              {item.icon}
+              {!collapsed && <span>{item.label}</span>}
+            </div>
+            {!collapsed && <span className="text-[10px] text-zinc-600">›</span>}
+          </a>
+        ))}
+      </nav>
+
+      {!collapsed && (
+        <div className="mt-6 border-t border-zinc-900 pt-4 text-[11px] text-zinc-600">
+          <p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
+            Status
+          </p>
+          <p className="mt-1">
+            Import engine: <span className="text-emerald-400">online</span>
+          </p>
+          <p className="text-zinc-500">Builder UI: in progress</p>
+        </div>
+      )}
+    </aside>
+  );
+}