yaminncco / vue-sidebar-menu

A Vue.js Sidebar Menu Component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how auto closed child

hiennm0406 opened this issue · comments

like https://yaminncco.github.io/vue-sidebar-menu/#/events
child of Dropdown Page is auto close when select another menu

Hi, you need to set 'showOneChild' to be 'true' if you want only one child is open for level one of sub-menu:

<sidebar-menu :menu="<your_menu_array_of_objects>" :collapsed="true" :showOneChild="true" />

Hi, you need to set 'showOneChild' to be 'true' if you want only one child is open for level one of sub-menu:

<sidebar-menu :menu="<your_menu_array_of_objects>" :collapsed="true" :showOneChild="true" />

@Wadhah-Sky

Hi all, but what if i want to not showing any child? In my case i have 2 submenu with child and by default it seems to be both selected. But i don't want to see any dropdown opened. Where's my mistake?

Hi, you need to set 'showOneChild' to be 'true' if you want only one child is open for level one of sub-menu:

<sidebar-menu :menu="<your_menu_array_of_objects>" :collapsed="true" :showOneChild="true" />

@Wadhah-Sky

Hi all, but what if i want to not showing any child? In my case i have 2 submenu with child and by default it seems to be both selected. But i don't want to see any dropdown opened. Where's my mistake?

I didn't understand your issue, but the meaning of child is the sub-menu itself which can have another sub-menu (child), so you can have level-one sub-menus and level-two sub-menus, take a look on the example below to understand how to set 'menu' array of objects:

const menu = [
          {
          href: <the url for this item>,
          title: <the text for this item>,
          icon: { 
                   // using an image rather than awesome font class.
                   element: 'img',
                   attributes: {
                   src: <image url>,
                   }
          },
          child: [
                   {
                   // first item of your level-one sub-menu
                   href: <the url for this item>,
                   title: <the text for this item>,
                   },
                   {
                   // second item of your sub-menu that have level-two sub-menu
                   href: <the url for this item>,
                   title: <the text for this item>,
                   child: [
                             {
                             // first item of level-two sub menu for the related item
                             href: <the url for this item>,
                             title: <the text for this item>,
                             }
                   ]
                   } 
          ],
          exact: true
          }
]

You can configure your items in the way you like using the props that defined which you can see in the demo vue-sidebar-menu/#/props and you can see there is a prop can set to be true which will make sure there is only single level-one of sub-menu is opened.
NOTE: If you don't want an item to have a child, just don't set the 'child' property for the object in the 'menu' array.

Closing as answered