React - Menu - Sidebar - Suboptions are not shown in browser

[mathmari]

Hey!

I want to create a side menu.

I have written the following in a file menu.js :

const menu_items = {
    id: 'menu',
    title: 'Menu',
    type: 'group',
    children: [
        {
            id: 'Option1',
            title: 'Option 1',
            type: 'group',
            children: [
                {
                    id: 'SubOption1',
                    title: 'Suboption 1',
                    type: 'item',
                    url: '/Option-1/SubOption-1'
                }
            ]
        },
        {
            id: 'Option2',
            title: 'Option 2',
            type: 'item',
            url: '/Option-2'
        },
        {
            id: 'Option3',
            title: 'Option 3',
            type: 'item',
            url: '/Option-3'
        },
        {
            id: 'Option4',
            title: 'Option 4',
            type: 'item',
            url: '/Option-4'
        },
        {
            id: 'Option5',
            title: 'Option 5',
            type: 'item',
            url: '/Option-5'
        },
        {
            id: 'Profile',
            title: 'Profile',
            type: 'item',
            url: '/Profile'
        }
    ]
};
export default menu_items;

The code without the SubOption1 works properly.

When I run it with the Suboption 1 I get in the browser all Options and above the options I get in red letters "Menu Items Error" and the suboption is not shown. What am I doing wrong?

 

[pbuk]

Please edit your post using the opening tag [code=javascript] instead of just [code].

But the answer depends on what menu component you are using, I suggest you check in the documentation for it.

 

[mathmari]

But the answer depends on what menu component you are using, I suggest you check in the documentation for it.

Ah the type item must be collapse, right?

 

[mathmari]

I added also "target: true" and now it works!

const menu_items = {
    id: 'menu',
    title: 'Menu',
    type: 'group',
    children: [
        {
            id: 'Option1',
            title: 'Option 1',
            type: 'collapse',
            children: [
                {
                    id: 'SubOption1',
                    title: 'Suboption 1',
                    type: 'item',
                    url: '/Option-1/SubOption-1'
                    target: true
                }
            ]
        },
        {
            id: 'Option2',
            title: 'Option 2',
            type: 'collapse',
            url: '/Option-2'
        },
        {
            id: 'Option3',
            title: 'Option 3',
            type: 'collapse',
            url: '/Option-3'
        },
        {
            id: 'Option4',
            title: 'Option 4',
            type: 'collapse',
            url: '/Option-4'
        },
        {
            id: 'Option5',
            title: 'Option 5',
            type: 'collapse',
            url: '/Option-5'
        },
        {
            id: 'Profile',
            title: 'Profile',
            type: 'item',
            url: '/Profile'
        }
    ]
};
export default menu_items;

What does " target: true " mean?

 

[mathmari]

I deleted now the target: true and it works also without that.

 

[mathmari]

I have seen in a json file the icons before the above options, we have there fore example

"icon": "bi-person-fill"

In the JavaScript file do we use them writting:

import { Icon } from '@tabler/icons';

Or how do we use for example the above icon?

 

[I like Serena]

I deleted now the target: true and it works also without that.

Hey mathmari!

So it works now and whatever issue there was, is gone?

 

[mathmari]

Hey mathmari!

So it works now and whatever issue there was, is gone?

Yes! It works! There is no problem now!

Do you have an idea about the icons?

 

[mathmari]

Do we have to search for the icons here ?

 

[pbuk]

"icon": "bi-person-fill"

bi-person-fill looks like the name of an icon from Bootstrap Icons. Have you installed this, or are you using a UI framework that includes it?

import { Icon } from '@tabler/icons';

@tabler/icons is a completely different icon package. Have you installed this, or are you using a UI framework that includes it?

You need to understand that a modern web application is built from many different components; it is YOUR responsibility to assemble the correct dependencies together and read their documentation to achieve what you want for the particular, possibly unique, combination you have chosen. Sites like PhysicsForums do not exist to replace this responsibility.

 

[mathmari]

I found it how to use the icons. I imported them from tabler/icons!

Thank you for your help!

 

[mathmari]

const menu_items = {
    id: 'menu',
    title: 'Menu',
    type: 'group',
    children: [
        {
            id: 'Option1',
            title: 'Option 1',
            type: 'group',
            children: [
                {
                    id: 'SubOption1',
                    title: 'Suboption 1',
                    type: 'item',
                    url: '/Option-1/SubOption-1'
                }
            ]
        },
        {
            id: 'Option2',
            title: 'Option 2',
            type: 'item',
            url: '/Option-2'
        },
        {
            id: 'Option3',
            title: 'Option 3',
            type: 'item',
            url: '/Option-3'
        },
        {
            id: 'Option4',
            title: 'Option 4',
            type: 'item',
            url: '/Option-4'
        },
        {
            id: 'Option5',
            title: 'Option 5',
            type: 'item',
            url: '/Option-5'
        },
        {
            id: 'Profile',
            title: 'Profile',
            type: 'item',
            url: '/Profile'
        }
    ]
};
export default menu_items;

When we want to create the page for example with url '/Option-1/SubOption-1' how do we do that? Do we create a new js file and this must have the name the same as the id above? And then we call that function to App.js ?

 

[mathmari]

Do we create a new js file with something like the following?

import { lazy } from 'react';
import Loadable from 'ui-component/Loadable';
import MainLayout from 'layout/MainLayout';
const New = Loadable(lazy(() => import('pages/Suboption1')))

const SuboptionRoutes = {
    path: '/',
    element: <MainLayout />,
    children: [
        {
            path: '/Option-1/SubOption-1',
            element: <SubOption1 />
        }
    ]
};
export SuboptionRoutes;

 

[pbuk]

Have you already got routing working for /Profile, Option-2 etc?

React doesn't have a builtin router; are you using React Router? The tutorial there is pretty good.