yaminncco / vue-sidebar-menu

A Vue.js Sidebar Menu Component
MIT License
646 stars 194 forks source link

how auto closed child #241

Closed hiennm0406 closed 2 years ago

hiennm0406 commented 2 years ago

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

Wadhah-Sky commented 2 years ago

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" />
Lundark commented 2 years ago

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?

Wadhah-Sky commented 2 years ago

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.

yaminncco commented 2 years ago

Closing as answered