|
|
@@ -0,0 +1,89 @@
|
|
|
+"use client";
|
|
|
+
|
|
|
+import Link from "next/link";
|
|
|
+import { usePathname } from "next/navigation";
|
|
|
+
|
|
|
+const menus = [
|
|
|
+ {
|
|
|
+ name: "My Account",
|
|
|
+ path: "/customer/account",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "My Address",
|
|
|
+ path: "/customer/address",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "My Orders",
|
|
|
+ path: "/customer/order",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "My Profile",
|
|
|
+ path: "/customer/profile",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "VIP Exclusive",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "My Product Reviews",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Service",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Wishlist",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Sign Out",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+export default function CustomerSidebar() {
|
|
|
+ const pathname = usePathname();
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className="
|
|
|
+ bg-white
|
|
|
+ shadow-[0_2px_12px_rgba(0,0,0,.08)]
|
|
|
+ py-3
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {menus.map((item) => {
|
|
|
+ const active = pathname === item.path;
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Link
|
|
|
+ key={item.name}
|
|
|
+ href={item.path || "#"}
|
|
|
+ className={`
|
|
|
+ relative
|
|
|
+ flex
|
|
|
+ h-[55px]
|
|
|
+ items-center
|
|
|
+ px-8
|
|
|
+ text-[16px]
|
|
|
+
|
|
|
+ ${active ? "bg-[#EEFAF6] text-[#036141] font-semibold" : "text-[#111]"}
|
|
|
+
|
|
|
+ `}
|
|
|
+ >
|
|
|
+ {item.name}
|
|
|
+
|
|
|
+ {active && (
|
|
|
+ <span
|
|
|
+ className="
|
|
|
+ absolute
|
|
|
+ right-0
|
|
|
+ top-0
|
|
|
+ h-full
|
|
|
+ w-[3px]
|
|
|
+ bg-[#036141]
|
|
|
+ "
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Link>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|