Problem with menu closing after clicking on parent.

[AndreyKachanov]

Problem with menu closing after clicking on parent.

[amirkian007]

@AndreyKachanov
Hi, thanks for reporting the issue , I can't understand what you are trying to do, can you give me an clear example of the behavior you are looking for?
Is this the behavior you are looking for?:
1-click on a menu item
2-then push to a route
3-then open children container menu
2-then close the menu

[AndreyKachanov]

Hi. Yes, but,

1. in addition, I need that when clicking on the parent element, the menu also closes.
2. by clicking on the parent, the route could also open.

Like in this video for example.
The parent has 2 functions: 1) it shows the child elements 2) it acts as a route to the page.
By clicking on both the parent and the children, the menu should close.
Can this be done with your plugin?

Kazam_screencast_00005.mp4

[amirkian007]

@AndreyKachanov
i see...
now the behavior is that when you click on a menu item it toggles the children items container, if you need an option to force close an children items container when clicking on parent or child element when router push happens let me no so i can add it to the package.

plus if i understood your explanation correctly two things can be done:
1- changing route re-renders the components inside <router-view> so in order for the menu to stay active you need to place the menu component out side of <router-view>(this is a common method) check the this code for demo
2- you can do it with the following menu list(by adding collapseOnClick = true to the parent) :

  {
       name: "Styling",
       icon: { class: "material-icons", text: "color_lens" },
        href: { path: "/styles/sass"}, // can also be vue-router object,
        collapseOnClick?: boolean //collapses menu when clicked - this behavior can also be achieved with Events
       children: [
         {
           name: "Sass Vars",
           href: { path: "/styles/sass"},
           icon: { class: "material-icons", text: "colorize" },
         },
         {
           name: "Css",
           href: { path: "/styles/css"},
           icon: { class: "material-icons", text: "css" },
         },
       ],
     },