g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slight cleanup

Browse Source
This commit is contained in:
g
2025-02-07 19:30:49 +00:00
parent 40635ae667
commit 8900bbcc76
11 changed files with 438 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
components/kokonutui/sidebar.tsx
View File

@@ -1,72 +1,58 @@
"use client"
"use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
BarChart2,
Package,
ShoppingCart,
Users,
Settings,
HelpCircle,
Menu,
Home,
Truck,
Box,
DollarSign,
Settings,
LogOut,
SunMoon,
} from "lucide-react"
import Link from "next/link"
import { useState } from "react"
import { useRouter } from "next/navigation"
import type React from "react"
Menu,
} from "lucide-react";
interface NavItemProps {
href: string;
icon: React.ElementType;
children: React.ReactNode;
onClick?: () => void;
}
const NavItem = ({ href, icon: Icon, children, onClick }: NavItemProps) => (
<Link
href={href}
onClick={onClick}
className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
>
<Icon className="h-4 w-4 mr-3 flex-shrink-0" />
{children}
</Link>
);
export default function Sidebar() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const router = useRouter()
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const router = useRouter();
function handleNavigation() {
setIsMobileMenuOpen(false)
}
async function handleLogout() {
const handleLogout = async () => {
try {
const authToken = document.cookie.split("authToken=")[1]
const authToken = document.cookie.split("authToken=")[1];
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
method: "POST",
headers: { "Authorization": `Bearer ${authToken}` },
headers: { Authorization: `Bearer ${authToken}` },
credentials: "include",
})
});
if (!res.ok) throw new Error("Logout failed")
if (!res.ok) throw new Error("Logout failed");
document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;" // Clear cookie
router.push("/login")
document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
router.push("/login");
} catch (error) {
console.error("Error logging out:", error)
console.error("Logout error:", error);
}
}
function NavItem({
href,
icon: Icon,
children,
}: {
href: string
icon: any
children: React.ReactNode
}) {
return (
<Link
href={href}
onClick={handleNavigation}
className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
>
<Icon className="h-4 w-4 mr-3 flex-shrink-0" />
{children}
</Link>
)
}
};
return (
<>
@@ -77,6 +63,7 @@ export default function Sidebar() {
>
<Menu className="h-5 w-5 text-gray-600 dark:text-gray-300" />
</button>
<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
@@ -91,50 +78,46 @@ export default function Sidebar() {
>
<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 hover:cursor-pointer text-gray-900 dark:text-white">
<span className="text-lg font-semibold text-gray-900 dark:text-white">
Ember
</span>
</div>
</Link>
<div className="flex-1 overflow-y-auto py-4 px-4">
<div className="space-y-6">
<div>
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
Overview
</div>
<div className="space-y-1">
<NavItem href="/dashboard" icon={Home}>
Dashboard
</NavItem>
<NavItem href="/dashboard/orders" icon={Package}>
Orders
</NavItem>
</div>
<div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
<div>
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
Overview
</div>
<div className="space-y-1">
<NavItem href="/dashboard" icon={Home} onClick={() => setIsMobileMenuOpen(false)}>
Dashboard
</NavItem>
<NavItem href="/dashboard/orders" icon={Package} onClick={() => setIsMobileMenuOpen(false)}>
Orders
</NavItem>
</div>
</div>
{/* Management Section */}
<div>
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
Management
</div>
<div className="space-y-1">
<NavItem href="/dashboard/products" icon={Box}>
Products
</NavItem>
<NavItem href="/dashboard/shipping" icon={Truck}>
Shipping Options
</NavItem>
<NavItem href="/dashboard/storefront" icon={Settings}>
Manage Storefront
</NavItem>
</div>
<div>
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
Management
</div>
<div className="space-y-1">
<NavItem href="/dashboard/products" icon={Box} onClick={() => setIsMobileMenuOpen(false)}>
Products
</NavItem>
<NavItem href="/dashboard/shipping" icon={Truck} onClick={() => setIsMobileMenuOpen(false)}>
Shipping
</NavItem>
<NavItem href="/dashboard/storefront" icon={Settings} onClick={() => setIsMobileMenuOpen(false)}>
Storefront
</NavItem>
</div>
</div>
</div>
{/* Theme Toggle & Logout at Bottom */}
<div className="p-4 border-t border-gray-200 dark:border-[#1F1F23] flex flex-col space-y-2">
<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]"
@@ -153,5 +136,5 @@ export default function Sidebar() {
/>
)}
</>
)
);
}