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

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.

src/app/(companies)/companies/create/page.tsx

@@ -0,0 +1,19 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CreateAdminForm from "@/components/forms/admins/CreateAdmin";
+import CreateCompany from "@/components/forms/companies/CreateCompany";
+
+const CreateCompanyPage = () => {
+  const breadcrumbItems = [
+    { name: "Dashboard", href: "/" },
+    { name: "Company", href: "/companies" },
+    { name: "Create company", href: "/companies/create" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CreateCompany />
+    </>
+  );
+};
+
+export default CreateCompanyPage;

src/app/(companies)/companies/edit/[id]/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+import Loading from "@/app/loading";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+
+import CreateCompany from "@/components/forms/companies/CreateCompany";
+import { useCompanyDetails } from "@/hooks/queries";
+import { use } from "react";
+
+const EditCompanyPage = ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = use(params);
+  const { isLoading, data } = useCompanyDetails(id);
+  const breadcrumbItems = [
+    { name: "Dashboard", href: "/" },
+    { name: "Company", href: "/companies" },
+    { name: "Edit company", href: `/companies/edit/${id}` },
+  ];
+  if (isLoading) return <Loading />;
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CreateCompany editMode defaultValues={data.data} id={id} />
+    </>
+  );
+};
+
+export default EditCompanyPage;

src/app/(companies)/companies/page.tsx

@@ -0,0 +1,17 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CompaniesTable from "@/components/Tables/companies";
+
+const Companies = () => {
+  const breadcrumbItems = [
+    { name: "Dashboard", href: "/" },
+    { name: "Companies", href: "/companies" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CompaniesTable />
+    </>
+  );
+};
+
+export default Companies;

src/app/(companies)/company-categories/create/page.tsx

@@ -0,0 +1,21 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CreateCompanyCategoryForm from "@/components/forms/companies/company-categories/CreateCompanyCategory";
+import { BreadcrumbItem } from "@/types/shared";
+
+interface IProps {}
+
+const CreateCompanyCategoryPage = ({}: IProps) => {
+  const breadcrumbItems: BreadcrumbItem[] = [
+    { href: "/", name: "Dashboard" },
+    { href: "/company-categories", name: "Company Categories" },
+    { href: "/company-categories/create", name: "Create Company Category" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CreateCompanyCategoryForm />
+    </>
+  );
+};
+
+export default CreateCompanyCategoryPage;

src/app/(companies)/company-categories/edit/[id]/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import Loading from "@/app/loading";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CreateCompanyCategoryForm from "@/components/forms/companies/company-categories/CreateCompanyCategory";
+import { useCompanyCategoriesDetails } from "@/hooks/queries";
+import { BreadcrumbItem } from "@/types/shared";
+import { use } from "react";
+
+const EditCompanyCategory = ({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) => {
+  const { id } = use(params);
+  const { isLoading, data } = useCompanyCategoriesDetails(id);
+  const breadcrumbItems: BreadcrumbItem[] = [
+    { name: "Dashboard", href: "/" },
+    { name: "Company Categories", href: "/company-categories" },
+    { name: "Edit Company Category", href: `/company-categories/edit/${id}` },
+  ];
+  if (isLoading) return <Loading />;
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CreateCompanyCategoryForm defaultValues={data?.data} editMode id={id} />
+    </>
+  );
+};
+
+export default EditCompanyCategory;

src/app/(companies)/company-categories/page.tsx

@@ -0,0 +1,17 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CompanyCategoriesTable from "@/components/Tables/companies/company-categories";
+
+const CompanyCategoryList = () => {
+  const breadcrumbItems = [
+    { name: "Dashboard", href: "/" },
+    { name: "Company Categories", href: "/company-categories" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CompanyCategoriesTable />
+    </>
+  );
+};
+
+export default CompanyCategoryList;