Cleanup

components/layout/sidebar.tsx

@@ -1,114 +1,43 @@
-"use client";
-
-import { fetchData } from "@/lib/data-service";
-import { useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import {
-  Package,
-  ShoppingCart,
-  Home,
-  Truck,
-  Box,
-  Settings,
-  LogOut,
-  Menu,
-} from "lucide-react";
-
-import { NavItem } from "./nav-item";
-
-interface SidebarItem {
-  name: string;
-  href: string;
-  icon: React.ElementType;
-}
-
-interface SidebarSection {
-  title: string;
-  items: SidebarItem[];
-}
-
-const sidebarConfig: SidebarSection[] = [
-  {
-    title: "Overview",
-    items: [
-      { name: "Dashboard", href: "/dashboard", icon: Home },
-      { name: "Orders", href: "/dashboard/orders", icon: Package },
-    ],
-  },
-  {
-    title: "Management",
-    items: [
-      { name: "Products", href: "/dashboard/products", icon: Box },
-      { name: "Shipping", href: "/dashboard/shipping", icon: Truck },
-      { name: "Storefront", href: "/dashboard/storefront", icon: Settings },
-    ],
-  },
-];
+"use client"
 
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { ShoppingCart, LogOut } from "lucide-react"
+import { NavItem } from "./nav-item"
+import { Button } from "@/components/ui/button"
+import { sidebarConfig } from "@/config/sidebar"
 
 const Sidebar: React.FC = () => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const router = useRouter();
-
-  const handleLogout = async () => {
-    try {
-      const authToken = document.cookie.split("authToken=")[1];
-      const res = await fetchData(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
-        method: "POST",
-        headers: { Authorization: `Bearer ${authToken}` },
-        credentials: "include",
-      });
-
-      if (!res.ok) throw new Error("Logout failed");
-
-      document.cookie =
-        "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
-      router.push("/login");
-    } catch (error) {
-      console.error("Logout error:", error);
-    }
-  };
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const router = useRouter()
 
   return (
     <>
-      {/* Sidebar Navigation */}
       <nav
         className={`
-          fixed inset-y-0 left-0 z-[70] w-64 bg-white dark:bg-[#0F0F12] transform transition-transform duration-200 ease-in-out
-          lg:translate-x-0 lg:static lg:w-64 border-r border-gray-200 dark:border-[#1F1F23]
+          fixed inset-y-0 left-0 z-[70] w-64 bg-background transform transition-transform duration-200 ease-in-out
+          lg:translate-x-0 lg:static lg:w-64 border-r border-border
           ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}
         `}
       >
         <div className="h-full flex flex-col">
-          {/* Brand Logo */}
-          <Link
-            href="/dashboard"
-            className="h-16 px-6 flex items-center border-b border-gray-200 dark:border-[#1F1F23]"
-          >
+          <Link href="/dashboard" className="h-16 px-6 flex items-center border-b border-border">
             <div className="flex items-center gap-3">
-              <ShoppingCart className="h-6 w-6 text-gray-900 dark:text-white" />
-              <span className="text-lg font-semibold text-gray-900 dark:text-white">
-                Ember
-              </span>
+              <ShoppingCart className="h-6 w-6 text-foreground" />
+              <span className="text-lg font-semibold text-foreground">Ember</span>
             </div>
           </Link>
 
-          {/* Sidebar Navigation Items */}
           <div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
             {sidebarConfig.map((section, index) => (
               <div key={index}>
-                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                <div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                   {section.title}
                 </div>
                 <div className="space-y-1">
                   {section.items.map((item, idx) => (
-                    <NavItem
-                      key={idx}
-                      href={item.href}
-                      icon={item.icon}
-                      onClick={() => setIsMobileMenuOpen(false)}
-                    >
+                    <NavItem key={idx} href={item.href} icon={item.icon} onClick={() => setIsMobileMenuOpen(false)}>
                       {item.name}
                     </NavItem>
                   ))}
@@ -117,20 +46,19 @@ const Sidebar: React.FC = () => {
             ))}
           </div>
 
-          {/* Logout Button */}
-          <div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
-            <button
-              onClick={handleLogout}
-              className="w-full flex items-center px-3 py-2 text-sm rounded-md transition-colors text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
+          <div className="p-4 border-t border-border">
+            <Button
+              onClick={() => {}}
+              variant="ghost"
+              className="w-full justify-start text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-background"
             >
               <LogOut className="h-5 w-5 mr-3 flex-shrink-0" />
               Logout
-            </button>
+            </Button>
           </div>
         </div>
       </nav>
 
-      {/* Mobile Menu Overlay */}
       {isMobileMenuOpen && (
         <div
           className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
@@ -138,7 +66,8 @@ const Sidebar: React.FC = () => {
         />
       )}
     </>
-  );
-};
+  )
+}
+
+export default Sidebar
 
-export default Sidebar;