Modifying the Sidebar

The structure of the AsideMenu React component is as follows:

1. AsideMenu
   1. AsideMenuLayer
   2. AsideMenuList
      1. AsideMenuItem
         1. AsideMenuList

The AsideMenu component is used in the following way:

<AsideMenu
  isAsideMobileExpanded={isAsideMobileExpanded}
  isAsideLgActive={isAsideLgActive}
  menu={menuAside}
  onAsideLgClose={() => onAsideLgClose(false)}
/>

The menuAside variable is an object for configuring menu items and sub-items.

isAsideMobileExpanded, isAsideLgActive, onAsideLgClose are variables and functions to control AsideMenu visibility.

Adding Items to the Sidebar Menu

To add a new item to the sidebar, you need an array of objects, as shown below. The href attribute is mandatory for the menu item to function as a link.

const menuAside = [
  {
    href: '/dashboard',
    icon: mdiDashboard,
    label: 'Dashboard',
  },
  {
    href: '/users/users-list',
    label: 'Users',
    icon: mdiAccount,
  },
];

This will result in:

Creating Submenus

To add a submenu, create an object without the href attribute. The AsideMenu component will understand that this is a menu with a nested list.

For example, to add a nested list to the "Dashboard" item, add a menu property with the desired items to the "Dashboard" object.

const menuAside = [
  {
    icon: mdiDashboard,
    label: 'Dashboard',
    menu: [
      {
        icon: mdiAccount,
        label: 'My Profile',
        href: '/profile',
      },
      {
        icon: mdiLogout,
        label: 'Log Out',
        isLogout: false,
      },
    ],
  },
  {
    href: '/users/users-list',
    label: 'Users',
    icon: mdiAccount,
  },
];

This will result in:

Summary

To add a new menu item to the sidebar:

1. Add a new object to the menuAside array.
2. Ensure the object has a href attribute to function as a link.

To add a submenu:

1. Add an object without a href attribute to the menuAside array.
2. Add a menu property to this object, which contains an array of submenu items.

By following these steps, you can effectively manage and expand the sidebar navigation in your React application.