How to hide the Sidebar Nav Menu when a User clicks outside of it using Vue js?

Question

My SPA has an Admin Dashboard with a Sidebar Navigation Menu that is visible by default when the viewport is larger than 991px. When the viewport is less than 991px, the Navbar disappears and you have a hamburger icon that you can click to Toggle(show/hide) the Sidebar Menu. Right now the menu will only hide if you click on the little hamburger menu icon a second time. What I want is to close/hide the menu if a User clicks anywhere outside of it. I'm using Bootstrap-Vue for my UI.

So I have a <b-navbar toggleable="md" type="dark" variant="info"></b-navbar>.

What I'd like to do is something like this, but I know I'm mixing Javascript and Vue js and not sure exactly how to set this up.

data() {
    return {
        sidebarMenu: true
    }
}

<section class="app-sidebar" v-if="sidebarMenu">

<div class="main-panel" @click="hideSidebarNavMenu">

methods: {
    hideSidebarNavMenu() {
        this.sidebarMenu = false;
    },

    const navbarTogglerButton = document.querySelector(".navbar-toggler");

    navbarTogglerButton.addEventListener('click', function(event) {
        this.sidebarMenu = true;
    })
}

This main-panel div will contain all of the data for every page, so no matter where they click this hideSidebarNavMenu function should get fired.

I need this code to work only when the viewport is less than 991px. Again, I'm getting some syntax errors in my methods, I believe because I'm trying to write Javascript in my methods attribute.

This is the idea. Thank you.

Ryan Sacks · Accepted Answer · 2020-10-11 15:37:23Z

2

I just realized now that in the Free Admin theme that I'm using, when a user clicks on the Hamburger button to toggle the Sidebar, all it does is just add and remove a class called active on the nav element. Element:

<nav id="sidebar" class="sidebar sidebar-offcanvas active">

And so this is how I solved it:

mounted() {
    var mainPanelDiv = document.querySelector(".main-panel");
    var navbar = document.querySelector("#sidebar");
    mainPanelDiv.addEventListener('click', function(event) {
        navbar.classList.remove('active');
    });
}

answered Oct 11, 2020 at 15:37

Ryan Sacks

5241 gold badge15 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cedric Cholley · Accepted Answer · 2020-10-05 07:14:08Z

1

The problem is that methods must contains… methods and not code like const navbarTogglerButton … This is probably the error you have

attach your event to .navbar-toggler

<div class="navbar-toggler" @click="showSidebarNavMenu">

methods: {
    hideSidebarNavMenu() {
        this.sidebarMenu = false;
    },

    showSidebarNavMenu() {
        this.sidebarMenu = true;
    },

}

answered Oct 5, 2020 at 7:14

Cedric Cholley

2,0632 gold badges11 silver badges18 bronze badges

4 Comments

Ryan Sacks Over a year ago

The problem is that div doesn't exist in my HTML, because as mentioned above it's just Bootstrap-Vue's <b-navbar> component that automatically generates the code inside of it. So I'm not sure how to access the div inside dynamically.

Cedric Cholley Over a year ago

I see, then you need to add your code

const navbarTogglerButton = document.querySelector(".navbar-toggler");      navbarTogglerButton.addEventListener('click', function(event) {         this.sidebarMenu = true;     })

once your component or view is mounted. Have a look to the lifecyle diagram for more details

Ryan Sacks Over a year ago

Okay and is there a way to only call this function when the viewport or window is less than 991px?

Ryan Sacks Over a year ago

Also, the sidebar disappears when I click outside of it, but when I click on the navbar-toggler icon I get this error: TypeError: Cannot read property 'classList' of null and I think it might be because my code/function is in Admin.vue but the <b-navbar> is inside my AppHeader.vue component. How can I fix this?

Collectives™ on Stack Overflow

How to hide the Sidebar Nav Menu when a User clicks outside of it using Vue js?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related