Collapse for Navbar

[pdt590]

Is your feature request related to a problem? Please describe.
Navbar cannot automatically collapse in mobile

Describe the solution you'd like

• Navbar should change to Sidebar form when moving from desktop to mobile
• Should support responsive/collapse mode for Navbar like bootstrap

Reference
https://bootstrap-vue.js.org/docs/components/navbar

[jsinhSolanki]

Maybe this can help to make PR.

https://codepen.io/joshmanders/pen/PQQBoR

there should be animation/transition in collapse

[CheyenneForbes]

any update on this?

[luisDanielRoviraContreras]

I'm going to get to work on this, I'll let you know when you're ready for it to be checked, thanks for the contribution

[luisDanielRoviraContreras]

Ready, the functionality was added, I changed the structure a bit in the implementation with a new slot = "title"

Thank you very much for the contribution

[fergardi]

What if I just want the sidebar component to be opened/closed, instead of the responsive mobile navbar functionality?

This behaviour should be optional.

[luisDanielRoviraContreras]

@fergardi In the last version we added the new collapse property that generates the hidden menu, thank you very much

[fergardi]

@luisDanielRoviraContreras how can I force the collapsible menu to close? If I click on a menu item and navigate to a new route, I want to close the menu automatically.

[piotrm73]

@luisDanielRoviraContreras how can I force the collapsible menu to close? If I click on a menu item and navigate to a new route, I want to close the menu automatically.

I did it like this:

watch: {
    $route() {
      const button = this.$refs.menuTop.$el.querySelector(
        ".vs-navbar--btn-responsive"
      );
      button.click();    
    }
}