Make sidebar menus dynamic

In some of the complex projects, menu items user can access depends on their role or some other conditions. In those scenarios, you require to render the menus dynamically.

Here in this article, we are going to achieve the same and make our menus render dynamically in the left sidebar and in order to do that, follow the given steps:

Open and Update Sidebar Component

Open the file /src/app/layouts/shared/sidebars/Sidebar/index.js

This is the file where your all logic will go. Currently, the file will look something like below:

import menus from "./menus";
//--- other import statements

const Sidebar = () => {
    return (
        <React.Fragment>
            <SidebarHeader/>
            <JumboScrollbar
                autoHide
                autoHideDuration={200}
                autoHideTimeout={500}
            >
                <Suspense
                    fallback={
                        <Div
                            sx={{
                                display: 'flex',
                                minWidth: 0,
                                alignItems: 'center',
                                alignContent: 'center',
                                px: 3
                            }}
                        >
                            <SidebarSkeleton/>
                        </Div>
                    }
                >
                    <JumboVerticalNavbar translate items={menus}/>
                </Suspense>
            </JumboScrollbar>
        </React.Fragment>
    );
};

//--- rest of the code

Now, this is the only file we will need to update and all of our logic will go inside this Sidebar component.

As you can see in the above code block, a constant array of menu items menus is being passed to <JumboVerticalNavbar /> component as a prop items.

All we need to do is to make the value being passed to this items prop is dynamic.

Make items prop Value Dynamic

To make the value of this items prop value pass dynamically. You can maintain that using React state.

Let's consider the case that your authUser has a role associated with it and you want to change the menu items based on the role of the user.

You can achieve this like in the blow updated code block:

import {menus, adminMenus, superAdminMenus} from "./menus";
//--- other import statements

const Sidebar = () => {
    const [menuItems, setMenuItems] = useState(menus);
    const {authUser} = useJumboAuth();
    
    useEffect(() => {
        switch(authUser.role) {
            case "admin":
                setMenuItems(adminMenus);
                break;
            case "superAdmin":
                setMenuItems(superAdminMenus);
                break;
            //...
        }
    }, [authUser.role])
    return (
        <React.Fragment>
            <SidebarHeader/>
            <JumboScrollbar
                autoHide
                autoHideDuration={200}
                autoHideTimeout={500}
            >
                <Suspense
                    fallback={
                        <Div
                            sx={{
                                display: 'flex',
                                minWidth: 0,
                                alignItems: 'center',
                                alignContent: 'center',
                                px: 3
                            }}
                        >
                            <SidebarSkeleton/>
                        </Div>
                    }
                >
                    <JumboVerticalNavbar translate items={menuItems}/>
                </Suspense>
            </JumboScrollbar>
        </React.Fragment>
    );
};

//--- rest of the code

We hope that the above code block will help you in understanding the implementation of dynamic menu items. However, the logic of assigning different menu items may change as per your project's requirement.