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.

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.

• javascript
• vue.js

Share Improve this question Follow asked Oct 5, 2020 at 1:11 Ryan SacksRyan Sacks 52411 gold badge1515 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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');
    });
}

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;
    },

}