mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sidebar): Add support for multi-level nested navigation

Browse Source 
This commit refactors the sidebar component to support arbitrarily deep nested navigation items.

The previous implementation was limited to one level of nesting and contained complex rendering logic directly within the main component, making it difficult to extend and maintain.

Changes include:
- Extracted the rendering logic into a new recursive `MenuItem` component.
- Rewrote the effect that keeps the active path expanded to correctly handle multiple levels of nesting.
- Updated the navigation data structure to reflect the new capabilities and corrected the URL for "Company Categories".
- Removed a large block of commented-out, unused navigation data.
This commit is contained in:
AmirReza Jamali
2025-09-23 13:14:02 +03:30
parent c626baff21
commit 3276bc80e4
8 changed files with 54 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layouts/sidebar/data/index.ts
+11 -104
View File
@@ -1,5 +1,6 @@
import { z } from "zod";
import * as Icons from "../icons";
const navSubItemSchema: z.ZodType<any> = z.lazy(() =>
z.object({
title: z.string(),
@@ -36,13 +37,20 @@ export const NAV_DATA: NavData = [
},
{
title: "Manage Companies",
url: "",
icon: Icons.Building,
items: [
{ Icons: Icons.Building, url: "/companies", title: "Companies" },
{
Icons: Icons.Building,
url: "/companies/categories",
icon: Icons.Building,
url: "/companies",
title: "Companies",
items: [],
},
{
icon: Icons.Building,
url: "/company-categories",
title: "Company Categories",
items: [],
},
],
},
@@ -60,105 +68,4 @@ export const NAV_DATA: NavData = [
},
],
},
// {
// label: "MAIN MENU",
// items: [
// {
// title: "Dashboard",
// icon: Icons.HomeIcon,
// items: [
// {
// title: "eCommerce",
// url: "/",
// },
// ],
// },
// {
// title: "Calendar",
// url: "/calendar",
// icon: Icons.Calendar,
// items: [],
// },
// {
// title: "Profile",
// url: "/profile",
// icon: Icons.User,
// items: [],
// },
// {
// title: "Forms",
// icon: Icons.Alphabet,
// items: [
// {
// title: "Form Elements",
// url: "/forms/form-elements",
// },
// {
// title: "Form Layout",
// url: "/forms/form-layout",
// },
// ],
// },
// {
// title: "Tables",
// url: "/tables",
// icon: Icons.Table,
// items: [
// {
// title: "Tables",
// url: "/tables",
// },
// ],
// },
// {
// title: "Pages",
// icon: Icons.Alphabet,
// items: [
// {
// title: "Settings",
// url: "/pages/settings",
// },
// ],
// },
// ],
// },
// {
// label: "OTHERS",
// items: [
// {
// title: "Charts",
// icon: Icons.PieChart,
// items: [
// {
// title: "Basic Chart",
// url: "/charts/basic-chart",
// },
// ],
// },
// {
// title: "UI Elements",
// icon: Icons.FourCircle,
// items: [
// {
// title: "Alerts",
// url: "/ui-elements/alerts",
// },
// {
// title: "Buttons",
// url: "/ui-elements/buttons",
// },
// ],
// },
// {
// title: "Authentication",
// icon: Icons.Authentication,
// items: [
// {
// title: "Sign In",
// url: "/auth/sign-in",
// },
// ],
// },
// ],
// },
];