Vue ionic-multilevel-sidebar

Ionic Framework Ionic Vue
1

Hi Guys,

I am trying to implement a sidebar menu, with sub-levels. However, I found quite tricky to implement sub-menus with the following pattern:

1- When it clicks on Toogle, and select some higher level menu, it will collapse (showing all children) and keeps side bar open.
2- When it clicks on Sub-menu, it will change the route and close the side bar.

I bought @aaronksaunders udemy course using vuejs and sqlite. It shows a good examples how to create a side-bar menu that can accomplish number 2.

However I found very trick to combine pattern number 1 and number 2 using ionic and vue.

Here’s a example of pattern 1:

Vue does not allowed to reproduce this example using icon names, I had to use camelcase instead (does not work properly).

Do you guys could help me how to reproduce this example using import { xxx} from 'ionicons/icons'; ?

2

I solved this using:

“stopPropagation()” function.

Is it a good practice to use it in order to prevent sidebar menu to auto-close while a higher lever menu is collapsing ?

   const toggleMenu = (menu: any, e: Event) => {

      e.stopPropagation();
      
      const from = menu.isOpen ? '50px' : '0px';
      const to = menu.isOpen ? '0px' : '50px' ;
      
      const animation = createAnimation()
                                        .addElement(document.querySelectorAll('.' + menu.tag))
                                        .duration(300)
                                        .fromTo('height', from, to);
      animation.play();
      
      menu.isOpen = !menu.isOpen;
      
    };