vue-burger-menu icon indicating copy to clipboard operation
vue-burger-menu copied to clipboard

Hide burger icon has element errors

Open alvaro-canepa opened this issue 7 years ago • 5 comments

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

alvaro-canepa avatar Nov 20 '18 08:11 alvaro-canepa

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.

mbj36 avatar Nov 20 '18 08:11 mbj36

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.

image

alvaro-canepa avatar Nov 20 '18 08:11 alvaro-canepa

A simple workaround i think of your problem is

.bm-burger-button {
   display: none;
}

mbj36 avatar Nov 20 '18 08:11 mbj36

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

alvaro-canepa avatar Nov 20 '18 08:11 alvaro-canepa

Yes, I agree...will check in detail about the error.

mbj36 avatar Nov 20 '18 08:11 mbj36