Home.jsx

//Styles import here
import "../Styles/Pages/Home.css";
//Styles import here

//Components import here

// import Navbar from '../Components/Navbar';
import CatalogAccordion from "../Components/Sidebar.jsx";

//Components import here

function App() {
  const catalogData = [
    {
      name: "Product Catalog",
      categories: [
        {
          category_name: "Category 1",
          sub_categories: [
            {
              sub_category_name: "Sub Category 1",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 1",
                  sub_sub_sub_categories: [
                    { name: "item 1" },
                    { name: "item 2" },
                    { name: "item 3" },
                    { name: "item 4" },
                  ],
                },
              ],
            },
            {
              sub_category_name: "Sub Category 2",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 1",
                  sub_sub_sub_categories: [
                    { name: "item 1" },
                    { name: "item 2" },
                    { name: "item 3" },
                    { name: "item 4" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 2",
          sub_categories: [
            {
              sub_category_name: "Sub Category 2",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 2",
                  sub_sub_sub_categories: [
                    { name: "item 5" },
                    { name: "item 6" },
                    { name: "item 7" },
                    { name: "item 8" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 3",
          sub_categories: [
            {
              sub_category_name: "Sub Category 3",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 3",
                  sub_sub_sub_categories: [
                    { name: "item 9" },
                    { name: "item 10" },
                    { name: "item 11" },
                    { name: "item 12" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 4",
          sub_categories: [
            {
              sub_category_name: "Sub Category 4",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 4",
                  sub_sub_sub_categories: [
                    { name: "item 13" },
                    { name: "item 14" },
                    { name: "item 15" },
                    { name: "item 16" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 5",
          sub_categories: [
            {
              sub_category_name: "Sub Category 5",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 5",
                  sub_sub_sub_categories: [
                    { name: "item 17" },
                    { name: "item 18" },
                    { name: "item 19" },
                    { name: "item 20" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 6",
          sub_categories: [
            {
              sub_category_name: "Sub Category 6",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 6",
                  sub_sub_sub_categories: [
                    { name: "item 21" },
                    { name: "item 22" },
                    { name: "item 23" },
                    { name: "item 24" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 7",
          sub_categories: [
            {
              sub_category_name: "Sub Category 7",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 7",
                  sub_sub_sub_categories: [
                    { name: "item 25" },
                    { name: "item 26" },
                    { name: "item 27" },
                    { name: "item 28" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 8",
          sub_categories: [
            {
              sub_category_name: "Sub Category 8",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 8",
                  sub_sub_sub_categories: [
                    { name: "item 29" },
                    { name: "item 30" },
                    { name: "item 31" },
                    { name: "item 32" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 9",
          sub_categories: [
            {
              sub_category_name: "Sub Category 9",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 9",
                  sub_sub_sub_categories: [
                    { name: "item 33" },
                    { name: "item 34" },
                    { name: "item 35" },
                    { name: "item 36" },
                  ],
                },
              ],
            },
          ],
        },
        {
          category_name: "Category 10",
          sub_categories: [
            {
              sub_category_name: "Sub Category 10",
              sub_sub_categories: [
                {
                  sub_sub_category_name: "Sub Sub Category 10",
                  sub_sub_sub_categories: [
                    { name: "item 37" },
                    { name: "item 38" },
                    { name: "item 39" },
                    { name: "item 40" },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ];
  
  
  return (
    <>
      <div className="baseWrapper">
        {/* <Navbar/> */}
        <CatalogAccordion data={catalogData}/>
      </div>
    </>
  );
}

export default App;

Sidebar.jsx

import { useState } from 'react';

// Recursive Accordion component
const CatalogAccordion = ({ data }) => {

  // Recursive function to render catalog data
  const RenderCatalog = (catalog) => {
    const [isOpen, setIsOpen] = useState(false);

    return (
      <div style={{ marginLeft: '20px' }}>
        <div 
          style={{ cursor: 'pointer', fontWeight: 'bold' }} 
          onClick={() => setIsOpen(!isOpen)}
        >
          {catalog.name} {isOpen ? '[-]' : '[+]'}
        </div>
        {isOpen && catalog.categories && (
          <div>
            {catalog.categories.map((category, index) => (
              <CategoryAccordion key={index} category={category} />
            ))}
          </div>
        )}
      </div>
    );
  };

  return (
    <div>
      {data.map((catalog, index) => (
        <div key={index}>{RenderCatalog(catalog)}</div>
      ))}
    </div>
  );
};

// Recursive component for each category
const CategoryAccordion = ({ category }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div style={{ marginLeft: '20px' }}>
      <div 
        style={{ cursor: 'pointer', fontWeight: 'bold' }} 
        onClick={() => setIsOpen(!isOpen)}
      >
        {category.category_name} {isOpen ? '[-]' : '[+]'}
      </div>
      {isOpen && category.sub_categories && (
        <div>
          {category.sub_categories.map((subCategory, index) => (
            <SubCategoryAccordion key={index} subCategory={subCategory} />
          ))}
        </div>
      )}
    </div>
  );
};

// Recursive component for each sub-category
const SubCategoryAccordion = ({ subCategory }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div style={{ marginLeft: '20px' }}>
      <div 
        style={{ cursor: 'pointer', fontWeight: 'bold' }} 
        onClick={() => setIsOpen(!isOpen)}
      >
        {subCategory.sub_category_name} {isOpen ? '[-]' : '[+]'}
      </div>
      {isOpen && subCategory.sub_sub_categories && (
        <div>
          {subCategory.sub_sub_categories.map((subSubCategory, index) => (
            <SubSubCategoryAccordion key={index} subSubCategory={subSubCategory} />
          ))}
        </div>
      )}
    </div>
  );
};

// Recursive component for each sub-sub-category
const SubSubCategoryAccordion = ({ subSubCategory }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div style={{ marginLeft: '20px' }}>
      <div 
        style={{ cursor: 'pointer', fontWeight: 'bold' }} 
        onClick={() => setIsOpen(!isOpen)}
      >
        {subSubCategory.sub_sub_category_name} {isOpen ? '[-]' : '[+]'}
      </div>
      {isOpen && subSubCategory.sub_sub_sub_categories && (
        <ul>
          {subSubCategory.sub_sub_sub_categories.map((item, index) => (
            <li key={index}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default CatalogAccordion;