Changing sidebar dynamically

Hello, need some help.

I need to have two versions of sidebar, depending on app state
I simply need to inject submenus to 'prodcuts'

What I tried to do:

const menuVersionWithProductClosed = [
    {
        id:'search',
        value:'Search',
        data:[]
    },
    {
       id:'products',
       value:'products',
       data:[]
    },
    {
        id:'settings',
        value:'My settings',
        data:[]
    },
]

const menuVersionWithProductOpened = [
    {
        id:'search',
        value:'Search',
        data:[]
    },
    {
       id:'products',
       value:'products',
       data:[
           {
               id:'product-details',
               value:'Product Details'
           },
           {
                id:'product-prices',
                value:'Product Prices'
           }
        ]
    },
    {
        id:'settings',
        value:'My settings',
        data:[]
    },
]

openProduct() {
    const sidebar = webix.$$("mainSidebar");
    if(!this.isProductOpened) {
        sidebar.define("data", menuVersionWithProductOpened);
    } else {
        sidebar.define("data", menuVersionWithProductClosed);
    }
    this.isProductOpened = !this.isProductOpened;
}

This works partially.
sidebar.define works only if we run openProduct() for the first time.
When I run it second time, there is no effect at all, submenus for Products should disappear.
So why sidebar.define works only once ?
I was actually able to fix that by always calling "sidebar.clearAll()", but then we have that ugly "blinking" effect in left navigation...

Edit: That issue is not a problem with this.isProductOpen, that part is working fine (if statetment behavior is correct)

Hopefuly you can understand what I mean here...

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!