Kevin Powell - Community•3mo ago

Need hel tp create below sidenav

Hi guys i am working on a angular project and i am stuck on creating the sidenav for small sizes...can anyone help how can i achieve this #front-end #archived-html-and-css #angular #archived-javascript

4 Replies

lko•3mo ago

What are you struggling with?

IVY•3mo ago

How to write code for multilevel and for back button functionality

lko•3mo ago

I'd do something like this

const menuItems = [
    {
        name: "First item",
        children: [
            {
                name: "First item child 1",
            },
            {
                name: "First item child 2",
            },
            {
                name: "First item child 3",
            },
            {
                name: "First item child 4",
            },
        ]
    },
    {
        name: "Second item",
        children: [
            {
                name: "Second item child 1",
            },
            {
                name: "Second item child 2",
            },
            {
                name: "Second item child 3",
            },
            {
                name: "Second item child 4",
            },
        ]
    },
]

<button class="menu-opener">Open menu</button>

<div class="sidebar-menu">
    {menuItems.map((item) => {
        item.name
    })}
</div>

const menuItems = [
    {
        name: "First item",
        children: [
            {
                name: "First item child 1",
            },
            {
                name: "First item child 2",
            },
            {
                name: "First item child 3",
            },
            {
                name: "First item child 4",
            },
        ]
    },
    {
        name: "Second item",
        children: [
            {
                name: "Second item child 1",
            },
            {
                name: "Second item child 2",
            },
            {
                name: "Second item child 3",
            },
            {
                name: "Second item child 4",
            },
        ]
    },
]

<button class="menu-opener">Open menu</button>

<div class="sidebar-menu">
    {menuItems.map((item) => {
        item.name
    })}
</div>

And then if you click it it will show item.children, if you click back it will loop again through all items as the default

IVY•3mo ago

I will try this, thanks

Gaming

Programming

Need hel tp create below sidenav