Array in Array or how how to embed code in a visual element.

I want to use collapse sub menu , for my dashboard. I try with one element from Sidebar, but, i don't know how shapes this code. Here is my code , i shortened it a bit. I want to add in collapse visual element children .

I know how to map again children . Somting like this:

       {children && children.map((item) => {
                                   const { icon, label, ref } = item;
                                   return (
                                     <Link to={ref} key={label} className={`flex gap-3 items-center py-3 px-4 font-medium`}>
                                       <span>{icon}</span>
                                       <span>{label}</span>
                                     </Link>
                                   )
                                 })}

import { Link, useNavigate } from 'react-router-dom';
import EqualizerIcon from '@mui/icons-material/Equalizer';
import ShoppingBagIcon from '@mui/icons-material/ShoppingBag';
import InventoryIcon from '@mui/icons-material/Inventory';
import AddBoxIcon from '@mui/icons-material/AddBox';
import Avatar from '@mui/material/Avatar';
import { useDispatch, useSelector } from 'react-redux';
import './Sidebar.css';
import { useSnackbar } from 'notistack';
import { logoutUser } from '../../../actions/userAction';

import { BsChevronDown } from 'react-icons/bs';

const navMenu = [
  {
    icon: <EqualizerIcon />,
    label: "Dashboard",
    ref: "/admin/dashboard",
  },
  {
    icon: <ShoppingBagIcon />,
    label: "Orders",
    ref: "/admin/orders",
  },
  {
    icon: <InventoryIcon />,
    label: "Products",
    ref: "/admin/products",
    collapse: <BsChevronDown />,
    children: [
      {

        icon: <AddBoxIcon />,
        label: "Add Product",
        ref: "/admin/new_product",
      },
    ]
  },
];

const Sidebar = ({ activeTab, setToggleSidebar }) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();

  const { user } = useSelector((state) => state.user);

  const handleLogout = () => {
    dispatch(logoutUser());
    enqueueSnackbar("Logout Successfully", { variant: "success" });
    navigate("/login");
  }
  return (
    <aside className="sidebar z-10 sm:z-0 block min-h-screen left-0 pb-14 max-h-screen w-3/4 sm:w-1/5 bg-gray-800 text-white overflow-x-hidden border-r">
      <div className="flex items-center gap-3 bg-gray-700 p-2 rounded-lg shadow-lg my-4 mx-3.5">
        <Avatar
          alt="Avatar"
          src={user.avatar.url}
        />
        <div className="flex flex-col gap-0">
          <span className="font-medium text-lg">{user.name}</span>
          <span className="text-gray-300 text-sm">{user.email}</span>
        </div>
      </div>

      <div className="flex flex-col w-full gap-0 my-8">
        {navMenu.map((item, index) => {
          const { icon, label, ref, children, collapse } = item;
          return (
            <>
              <Link to={ref} className={`${activeTab === index ? "bg-gray-700" : "hover:bg-gray-700"} flex gap-3 items-center py-3 px-4 font-medium`}>
                <span>{icon}</span>
                <span>{label}</span>
                <span >{collapse}</span>
              </Link>

            </>
          )
        }
        )}
      </div>


    </aside>
  )
};

export default Sidebar;

CodePudding user response：

You can have an object with the isCollapsed property added to it. You can set the initial state to false, and when a user clicks on it, you can toggle the state, so it'll go from false to true. This is a sample code, but I hope this will help conceptualize it.

import React, { useState } from 'react';

const navMenu = {
  "Dashboard": {
    icon: <EqualizerIcon />,
    ref: "/admin/dashboard",
    isCollapsed: false
  },
  "Orders": {
    icon: <ShoppingBagIcon />,
    ref: "/admin/orders",
    isCollapsed: false
  },
  "Products": {
    icon: <InventoryIcon />,
    ref: "/admin/products",
    isCollapsed: false,
    collapse: <BsChevronDown />,
    children: [
      {

        icon: <AddBoxIcon />,
        label: "Add Product",
        ref: "/admin/new_product",
      },
    ]
  },
}

const [navMenuBar, setNavMenuBar] = useState(navMenu)

function Collapse() {
  Object.keys(navMenuBar).map(key => {
    const { icon, label, ref } = navMenuBar[key];
    return (
      <Link to={ref} key={label} className={`flex gap-3 items-center py-3 px-4 font-medium`}>
        <button onClick={() => {
          navMenuBar[key]['isCollapsed'] = !navMenuBar[key]['isCollapsed']
          setNavMenuBar(navMenuBar)
        }}>{isCollapsed ? expand : minimize}</button>
        <span>{icon}</span>
        <span>{label}</span>
      </Link>
    )
  })
}

CodePudding user response：

exactly how to do this, because i use bootstrap model in span

                 <span onClick={() => setOpen(!open)}
    aria-controls="example-collapse-text"
    aria-expanded={open}>{collapse}</span>
    <Collapse in={open}>
    <div id="example-collapse-text">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
      terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
      labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </Collapse>

that's how they all unfold