Navigation Menus

The header navigation is defined in src/components/Header/menuData.ts. It exports a menuData array that the header component renders. Both top-level links and dropdown submenus are supported.

Menu Structure

// src/components/Header/menuData.ts
export const menuData: MenuItem[] = [
  {
    title: "Shop",
    path: "/shop",
  },
  {
    title: "Pages",
    submenu: [
      { title: "Cart", path: "/cart" },
      { title: "Wishlist", path: "/wishlist" },
    ],
  },
  {
    title: "Contact",
    path: "/contact",
  },
];

Adding a New Top-Level Link

{
  title: "About",
  path: "/about",
}

Adding a Dropdown

{
  title: "Company",
  submenu: [
    { title: "About", path: "/about" },
    { title: "Careers", path: "/careers" },
    { title: "Contact", path: "/contact" },
  ],
}

MenuItem Type

The type definition for menu items is in src/components/Header/types.ts. The key fields are:

• title — Display label (string, required)
• path — Route path (string, required for top-level links)
• submenu — Array of child MenuItem objects (optional)

Active State

The header automatically highlights the active nav item based on the current route using Next.js usePathname(). No additional configuration is needed.

My Account Sidebar Navigation

The customer-facing My Account area has its own sidebar defined in src/app/(site)/(pages)/my-account/_component/sidebar.tsx. It includes:

• My Profile — account details and password change
• My Orders — order history with All / Regular / Subscription filter tabs
• Subscriptions — dedicated page showing only active and past subscriptions with status, next billing date, and cancel option
• My Wishlist
• Sign Out

The Subscriptions link is always visible in the sidebar. Customers with no subscriptions will see an empty state.