vue-burger-menu
vue-burger-menu copied to clipboard
Hide burger icon has element errors
Using <Slide :burgerIcon="false"> ... </Slide> returns some errors in production mode.
Uncaught TypeError: Cannot read property 'contains' of null
at a.documentClick (vue-burger-menu.common.js:958)
On this part of plugin
documentClick: function documentClick(e) {
var element = document.querySelector('.bm-burger-button');
var target = e.target;
if (element !== target && !element.contains(target) && e.target.className !== 'bm-menu' && this.isSideBarOpen) {
this.closeMenu();
}
}
element doesn't exists. The same thing happen in line #995
right: {
deep: true,
immediate: true,
handler: function handler(oldValue, newValue) {
if (oldValue) {
this.$nextTick(function () {
document.querySelector('.bm-burger-button').style.left = 'auto';
document.querySelector('.bm-burger-button').style.right = '36px';
document.querySelector('.bm-menu').style.left = 'auto';
document.querySelector('.bm-menu').style.right = '0px';
});
}
if (newValue) {
if (document.querySelector('.bm-burger-button').hasAttribute('style')) {
document.querySelector('.bm-burger-button').removeAttribute('style');
document.getElementById('sideNav').style.right = 'auto';
}
}
}
}
What is your use case for using :burgerIcon=false ?
Using :burgerIcon=false will disable the burgerIcon and user won't be able to open the menu again.
I don't want to open the sidebar with burger icon. I use it for a search form, when the user click on the input form, sidebar is opened with the list of options to select.

A simple workaround i think of your problem is
.bm-burger-button {
display: none;
}
Yes, it is. But this is more like a local patch. And isn't a real solution for a prop. I mean, if the plugin support a prop to hide icon button, this must be fully supported.
Thanks
Yes, I agree...will check in detail about the error.