mbj36 / vue-burger-menu Goto Github PK

View Code? Open in Web Editor NEW

767.0 12.0 111.0 1.88 MB

🍔 An off-canvas sidebar Vue component - https://vue-burger-menu.netlify.app/

License: MIT License

JavaScript 2.70% HTML 3.32% Vue 93.98%

vue-components vuejs2 sidebar-menu vue-burger-menu vue-sidebar hamburger-menu css-transitions vuejs

vue-burger-menu's People

Contributors

Stargazers

Watchers

Forkers

trendingtechnology shivamluthra vuelibs habibtalib liimin ribesalexandre paulwaulyall zmilan epillepsy amenhotep19 sshruti10 kimmyfek drafterleo pranav-sharma-23 jakefdev fimion yaroslavw mashtiani fluffynuts kawai9i9 fengchao8627 ourgit codeo-za thinkitfirst michael-tang0823 red-hunter adamdominik89 ansidev retrogrademt rooleary psalmers dev-hjs asmadouce mc-mosa caslat2 shakir-abdo darlandieterich ncatanchin paperscz crimson-ginger himanshuhd tentaclelamp syedpeer mieszko-dev deloarbp wodemax ereabraham zcuric currychou777 bensladden eliamartani weiqilee maryasov quantavi brice187 anastasiiaonishchuk tomekand1 julczka hjjunior pko104 drcord exe-squared 001101 toyopilgrim jbroni willmarple-ba kriskenyon uqu8 xdxycx micaz massimiliano76 carloscastro77 oscaballer acelords ekanant gilchrist32 streetprogrammer leafiy willer-613 archo0ps zilveer wanbiguizhao mkdillard liaoyingkai piroozjenabi piyapong-nake luissempre stonec0der rickyhong xiaoruiguo xwlgx stone0117 hasanparasteh davemaxwell612 yannbertrand selemonjr dfoley84 onmahadev gvoider cgammarr

vue-burger-menu's Issues

Scroll Behaviour stops working in Scale Down & Scale Rotate effect

The content stops scrolling when Scale Down or Scale Rotate effect is selected and burger menu is opened and closed. A usual workaround can be fixing overflow properties and make the content scroll as soon as the menu is closed back.

Styling is not preserved

Closing the menu doesn't preserve the styling of the body element (i.e. <body style="anything">), also opening the menu adds to the style attribute of the #app element but doesn't remove it upon closing the menu.

Override or Change CSS

What would you recommend the best way is to override or change the css? It appears your css load on page after my app styles.

isOpen doesn't work

It's just doesn't work at all.

Passing boolean value to :isOpen="menuState", not working.

<Slide right isOpen> has error

has error

Roadmap for the project

Hello,

If you wish you contribute to this project or use the library, I am creating a road map below that would give a fair idea how i would like proceed with this project

As i will release the new version with new features, APIs may change on version upgrade, there won't be any seperate docs for previous versions, all the changes would be done in readme update.

Things that i would like to do for next release -

Work on CSS animations for next release

Animations

After i am done with all the CSS animations, i would like to work on these

Compatibility with Browser (Chrome and Mozilla)
Writing tests
Supporting Custom Icons
Improving the Code quality
Integration with Vuex and Vue Router

I am also creating github release for every version that is published on npm

npm link - https://www.npmjs.com/package/vue-burger-menu

All Ideas and suggestions are warmly welcome, you can create a new issue or reply to this comment thread.

On clicking inside the sidebar, sidebar should not get closed

Animation stops halfway through when closing the menu and modifying vuex store in the on-click method

In my app I have a PushRotate menu on the right-hand side. One of the links has an additional click.native callback attached:

  <router-link to="/login" @click.native="logout()">
    <span>Logout</span>
  </router-link>

In the callback handler I call a vuex mutation:

  methods: {
    logout() {
      this.$store.commit("logout");
    },
  },

which in turn looks like this:

    logout(state) {
      state.sessionId = "";
    },

Now when I hit the Logout link in the menu, the menu closes but the animation to revert the page to its normal state (not pushed and rotated) seems to stop halfway through, leaving the page looking a little awkward.

When I comment out the line

// state.sessionId = "";

everything works fine.

Burger icon sticks around when the user scrolls down, not sure how to turn this off.

Currently the burger icon behaves in a way that if a user scrolls down a page, the icon stays in the left or right corner always. How can I turn off this behavior, and have it disappear when the user scrolls down?

Programatically open/close nav?

Hi,
Is there anyway to open and close the drawer programatically?
For example, in case we need to use another button or link instead of the built-in hamburger menu?
Thank you.

Failed to execute 'appendChild' on Nuxt

It runs in development, but fails in production. I'm using Nuxt. Please assist
Plugin:

import { Slide } from 'vue-burger-menu'

Vue.component('Slide', Slide)```

nuxt.config.js
```{ src: '~/plugins/vue-burger-menu.js', ssr: false}```

Component:
```<template>
  <Slide>
    <router-link
      :to="'/'"
      title="Home"
      id="Home"
    >
      <span>Home</span>
    </router-link>
    <router-link
      :to="'/profile'"
      title="Profile"
      id="Profile"
    >
      <span>Profile</span>
    </router-link>
    <router-link
      :to="'/blog'"
      title="Blog"
      id="Blog"
    >
      <span>Blog</span>
    </router-link>
    <router-link
      :to="'/photography'"
      title="Photography"
      id="Photography"
    >
      <span>Photography</span>
    </router-link>
    <router-link
      :to="'/social'"
      title="Social"
      id="Social"
    >
      <span>Social</span>
    </router-link>
    <router-link
      :to="'/connect'"
      title="Contact"
      id="Contact"
    >
      <span>Contact</span>
    </router-link>
  </Slide>
</template>```

Understanding the outcomes of Google Summer of Code

Dear Mohit,

I am a Ph.D. student at the University of São Paulo (Brazil). We would like to understand how and how much Open Source Communities benefit from participating in Google Summer of Code (GSoC). We believe that your experience in GSoC is valuable and could help us achieve that. In a 1-minute questionnaire, we would like to know:

Concerning the project entitled "Educational mobile application for BuildmLearn" developed in GSoC 2015.

Do you have a GitHub repository for the GSoC project? If so, could you provide us with the link to the project?
Have you continued committing code or opening issues to the GSoC project after GSoC? (Yes / No) If so, code, issues or both?
Have you continued committing code or opening issues to other OSS projects after GSoC? (Yes / No) If so, code, issues or both?
Could we use aggregate data from your participation in GSoC and other OSS projects in our research?

The following link contains a sample of our work and how we would use your data:
https://ieeexplore.ieee.org/document/8094410/

Regards,

Jefferson

Mention the events on the README

@Epillepsy Would you like to open a PR mentioning the openMenu and closeMenu events on README ?

Not working with latest Nuxt version 2.4.5

I updated Nuxt to the latest version 2.3.6 => 2.4.5
And my Slide drawer menu was not working anymore.

I actually logged the behaviour in both Nuxt versions to understand was happening.
What has changed after the update is that the openMenu() function is now called before the documentClick() function when I click on my custom burger icon. As a result the menu opens and closes immediately. I was unable to solve the issue.

I finally implemented my own simple burger menu.

two instaces

I try to have two instances in the same component. one Slide component on the left and one on the right. but when I try to open the menu on the left. the one on the right opens.

Overlay usability suggestion

Hi, I'm having some issues with this component's overlay and overlay close functionality that I'll try to explain and leave a suggestion.

Assumptions about the overlay:

when the menu is open, the overlay should, well... overlay the rest of the page.
when clicking the overlay, the menu should close and nothing else. (i.e: should not follow links under the overlay)
adjusting the opacity of the overlay element should allow us to control the level of darkness of the entire website outside the menu.

What's actually happening:

when the menu is open, the overlay is simply a "bm-overlay" class on the body element.
with the menu open, we're allowed to click on links outside the sidebar. (we can still close only the menu by clicking some "blank" part of the webpage, but accidentally clicking a link to close the menu will follow that link)
adjusting the opacity of the overlay with css, doesn't have the pretended effect, since all it does is change the opacity of the body element's background, which is usually the bottom element on the Z axis.

So my suggestion is that the overlay should be an actual div element that gets added and removed from the body.
This would allow:

the opacity to work on the entire site (outside the menu).
call preventDefault and/or stopPropagation (or the equivalent .prevent and .stop vue event modifiers) to avoid having clicks on the overlay be registered by stuff under the overlayed page.
use z-index to control overlay order.

You can get some good examples of overlays by seeing the overlay from vuetify's navigation drawers or bootstrap's modals

Just a suggestion. Thanks again for releasing this component.

Typescript support

Great job on this component, but do you plan to add Typescript support? Just a type declaration on npm should do just fine.

A11y: Replace span/div element with button element for keyboard accessibility

Replace the span(close)/div(burger menu) element with a button element so users navigating with a keyboard can tab to the close button.

Sidebar closing when clicking inside it

It's happening when you click something inside the sidebar, for example trying to clikc on text input ant type something. Text input is inside slot.

<Slide right>
  <div><input type="text"></div>
</Slide>

Is it possible to move the cross in the menu to the right side?

It's on the left side by defualt and i havent found anything in the documents on how to move it. So i'm wondering if it's possible and if so, how?

Feature request - open/Close event

Hi,
I would like to have access to the "onClose" and "onOpen" events from my components or the ability to use .sync on the isOpen variable to track when the menu is open or close all the time

How to use width: 100% after click open menu?

isOpen doesn't work

I have the same problem stated in issue #63 and the codesandbox you've replied (https://codesandbox.io/s/xo0976yq5z) doesn't work either for me. When I press "open menu" nothing happens.

I have noticed that changing "isOpen" to true will trigger the event twice. Once to open, once to close.

Am I doing something wrong?

Dennis

Add UMD support

It would be great if the dist file (vue-burger-menu.common.js) had UMD support to e.g. load this component via RequireJS.

dispaly hamburger button when the side bar is open

Hi,

Display hamburger button when the side bar is open. when we click on the button, sidebar is hiding the button. component should be displayed like menu items are derived from the menu

Menu breaks on heroku deploy

I'm using it for my nav-bar in a node/express/vue/mongo app and it looked and works great locally, but when deployed on heroku the menu is completely broken. It will slide out but there is no content on it and its gone back to its default color. Any ideas?

Documentation Typos

The documentation needs to be edited to reflect the fact that transition names in component imports need to be capitalized (i.e. ScaleRotate instead of scaleRotate.)

Close button doesn;t adjust with width size

Seems like close button has fixed position. Need to be relative and should always appear at the appropriate position.

If you increase/decrease the width of the Menu, it gets out of the correct position

Can't style CSS

Hello all,
I am not able to override any of the css for the slide css. I've tried adding classes to , tried wrapping it and using deep selectors, tried just using the single css class selectors on their own, nothing. Below is a copy of the code where this lives. Any help is appreciated.

            <!--******************************************-->
            <!-- ======= HAMBURGER MENU =======-->
            <!--******************************************-->

            <Slide right class="foo"></Slide>

            <!--<Slide right noOverlay class="d-md-none hamburger-wrapper" width="280">
                <div v-if="userRole" style="position: relative;" class="mt&#45;&#45;5">
                    <div class="font-sm" style="position: absolute; top:0; right:20px; font-weight: 200;">
                        <div v-if="userAccount" @click="logout" style="position: relative; cursor: pointer;">logout
                        </div>
                        <div v-if="userRole === 'admin'">{{userAccount.email}}</div>
                    </div>
                </div>
                <div v-if="userRole === 'admin' || userRole === 'driver' || userRole === 'industry'"
                     @click="redirect('/about')"
                     class="hamburger-menu-option">Story
                </div>
                <div v-if="userRole === 'admin' || userRole === 'driver' || userRole === 'industry'"
                     @click="redirect('/points-system')"
                     class="hamburger-menu-option">Points
                </div>
                <div v-if="userRole === 'admin' || userRole === 'driver' || userRole === 'industry'"
                     @click="redirect('/schedule')" class="hamburger-menu-option">Schedule
                </div>
                <div v-if="userRole === 'admin' || userRole === 'driver' || userRole === 'industry'"
                     @click="redirect('/eligibility')" class="hamburger-menu-option">Eligibility
                </div>
                <div v-if="userRole === 'admin' || userRole === 'driver'"
                     @click="redirect('/driver-portal')"
                     class="hamburger-menu-option">Portal
                </div>
                <div v-if="userRole === 'admin'"
                     @click="redirect('/admin-portal')"
                     class="hamburger-menu-option">
                    <span class="text-danger border border-danger rounded px-2 ml&#45;&#45;1">admin</span>
                </div>
            </Slide>-->

        </div>
    </div>

`<script>
import Logo from '@/components/RufusLogo'
import { Slide } from 'vue-burger-menu'

export default {
    name      : 'TheHeader',
    components: {
        Logo,
        Slide
    }...`

`<style scoped lang="scss">
@import '../assets/css/_vars.scss';

.bm-burger-button {
    position: fixed;
    width: 30px;
    height: 80px;
    left: 36px;
    top: 16px;
    cursor: pointer;
}

</style>`

CSS not preserved when building the application

The changes done to CSS classes (like, .bm-burger-button, .bm-item-list) doesn't work when I build and deploy the application on the server. When checking locally, it works.

Please suggest.

How to disable menu closing when item is clicked

Hi,

I want to use dropdown menus inside Slider menu, but when item is clicked, the Slider get closed.
How to prevent closing event from being triggered in this case ?

On Slide animation - Pressing Escape does not init the @closeMenu

On Slide animation - Pressing Escape key does not init the @closeMenu prop function, while clicking anywhere outside the menu does init this function.

The Menu closes when I press the Escape key.

Thanks.

Unable to edit size of burger button on mobile

Hi,
So I'm primarily using this burger menu on a mobile device. I saw the css for the element you posted, and I decided to edit it for myself. Here is how I did it:

.bm-burger-button {
      position: relative;
      width: 30px;
      height: 24px;
      left: 36px;
      top: 36px;
      cursor: pointer;
    }

I edited the width and the height, since the button was extending out of my navbar. However, the size did not change. On desktop though, the changes are noticeable.
something is preventing the style from being changed on mobile.
Thanks,
RTK99

Ignore navbar when using Push

I was wondering whether it is possible to ignore the navbar when pushing the content in the main content aside?
I would like to build something similar to this: https://vuetifyjs.com/en/examples/layouts/googleKeep.

Elements disappear when menu is open

Hi,

I'm getting the following behavior when menu is open:

For some reason the text in

elements disappear when the menu is open.

Remove WIP animation from README

Currently in readme, there are 4 WIP animations from which two are done (Bubble and Fall Down) so update the readme with correct details.

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

Option Close on Outside click

Add a Prop to the Menu so it could be persistent or no persistent when someone click on the outside of the Menu

CloseOnEsc is not working properly

Pressing escape doesn't bring the page back to its original state

Overlay should be on top of body elements except the sidebar.

I'm trying to override .bm-overlay by add extra z-index to it. I'm not able to add my extra styling. I guess this is probably because .bm-overlay will be added when the menu is open. Is there anyway to add my style to it?

Access to openMenu() function from parent component

Hello,

I'm trying to open the menu from a link external to the slide but it looks like i don't access to the method.
Here's an example (maybe it's not the correct way, i'm beginner with VueJS)

<template>
  <Slide :burgerIcon="false" ref="slideMenu">
    <!-- links -->   
  </Slide>
  <OtherComponentExample></OtherComponentExample>
  <span v-on:click="openSlideMenu">
    Text on click...
  </span>
</template>

<script>
  import { Slide } from 'vue-burger-menu'
  import OtherComponentExample from 'my-component'

  export default {
    name: "Example",
    components: {
      OtherComponentExample,
      Slide
    },
    data() {
      return {
        // some data...
      }
    },
    methods: {
      openSlideMenu: function () {
        console.log('Test open menu');
        this.$refs.slideMenu.openMenu();
      }
    }
  }
</script>

I want to open the menu with my method openSlideMenu().
Thank you

bm-overlay class does not get applied to body properly

I ran into an issue where my font changed when I would open and close the menu.
When the bm-overlay class is added to the body it is a string concatenation, but there is no space in front of bm-overlay so it would concat with the last class I had on body.
Using classList instead of className is a beter way to add and remove classes.

Does not work with NUXT

Hi,
I tried getting it to work with Nuxt however, facing similar issue to this.
nuxt/nuxt#2241

Is vue-burger-menu SSR friendly?

Thanks

original source.. :)

Hi, I appreciate this project and want to fully support it. But I find it odd that there was no mention of tympanus/codrops where the original frontend ui came from. In this open-source world, it is somewhat a common courtesy to at least mention the source or inspiration of a project, just like any other "vue wrapper" projects. This is just a friendly reminder from a fan of both Vue and Codrops site. Thank you and more power to your projects :)
Edit: I mean on your README only, as I am using an api which shows only readmes in my feed :)

Setup vue-test-utils

I welcome every contributor to discuss the test setup for this project and how we can test every available component

Extra checking in documentClick function (menu.vue file)

I had a problem with the menu in some complex pages.
Situation: the menu is present on the page, but hidden (not visible) and the Document onClick event bubbles to the menu component and caused the error because it was not related to the menu itself.
The simple fix eliminated the problem: just make the extra checking in documentClick function (menu.vue file) like this:

documentClick: function documentClick(e) {
  var element = document.querySelector('.bm-burger-button');
  var target;
  if(e && e.target) {
	  target = e.target;
	}
	else
	{
		target = null;
	}
  //var target = e.target;

  if ( element && element !== target && !element.contains(target) && e.target.className !== 'bm-menu') {
    this.closeMenu();
  }
}

Please, include this fix if possible.

Push right not working

Hello,

Thank you for the great package!
With the last NPM version (2.0.1) the push right doesn't work.

Code:

<main id="page-wrap">
...
</main>

<Push right>
   <a id="home" href="#">
      <span>Home</span>
   </a>
</Push>

Hamburger is now on the right (good!)
page-wrap transform is translate3d(300px, 0px, 0px); must be translate3d(-300px, 0px, 0px); (wrong)

The default push (@ left side) is correct.

Could not load existing sourcemap

ParcelJS: 1.12.3
VueJS: 2.6.10

node_modules\vue-burger-menu\dist\vue-burger-menu.common.js:579:85: Unterminated regular expression (579:85)
 577 |     css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
  578 |     // http://stackoverflow.com/a/26603875
> 579 |     css += '\n + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
      |                                                                                     ^
  580 |   }
  581 |
  582 |   if (styleElement.styleSheet) {
‼  Could not load existing sourcemap of "node_modules/vue-burger-menu/dist/vue-burger-menu.common.js".

What should I do?

What about Menu levels and each level open in a new replacement sidebar

Why is it animating width when using slide animation

Any idea why it is animating width when using slide animation?

This is not particularly very good, because all the content inside menu bar is transforming when width animation is applied on the slide out (left or right).

It would be much better if translate on position is used so that menu bar is not resized when animating out.

mbj36 / vue-burger-menu Goto Github PK

vue-burger-menu's People

Contributors

Stargazers

Watchers

Forkers

vue-burger-menu's Issues

Animations

Recommend Projects

Recommend Topics

Recommend Org