├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Menu.vue
    │   ├── Menu
    │   │   ├── bubble.vue
    │   │   ├── elastic.vue
    │   │   ├── fallDown.vue
    │   │   ├── push.vue
    │   │   ├── pushRotate.vue
    │   │   ├── reveal.vue
    │   │   ├── scaleDown.vue
    │   │   ├── scaleRotate.vue
    │   │   ├── slide.vue
    │   │   └── stack.vue
    │   └── index.js
    └── main.js
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018-present, Mohit Bajoria
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-burger-menu [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
  2 | 
  3 | [![npm](https://img.shields.io/npm/v/vue-burger-menu.svg?maxAge=3600)](https://www.npmjs.com/package/vue-burger-menu)
  4 | 
  5 | [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fvue-burger-menu.netlify.com%2F&via=mbj36&text=Checkout%20vue-burger-menu&hashtags=%23vuejs)
  6 | 
  7 | An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations.
  8 | 
  9 | ## Demo & examples
 10 | 
 11 | Live demo - https://vue-burger-menu.netlify.com/
 12 | 
 13 | To build the examples locally, run:
 14 | 
 15 | ```
 16 | npm i
 17 | npm run serve
 18 | ```
 19 | 
 20 | ```
 21 | yarn
 22 | yarn serve
 23 | ```
 24 | 
 25 | Then open [`localhost:8080`](http://localhost:8080) in a browser
 26 | 
 27 | ## Installation
 28 | 
 29 | ```
 30 | npm install vue-burger-menu --save
 31 | ```
 32 | 
 33 | ```
 34 | yarn add vue-burger-menu
 35 | ```
 36 | 
 37 | ## Usage
 38 | 
 39 | Items should be passed as child elements of the components
 40 | 
 41 | ```javascript
 42 | import { Slide } from 'vue-burger-menu'  // import the CSS transitions you wish to use, in this case we are using `Slide`
 43 | 
 44 | export default {
 45 |     components: {
 46 |         Slide // Register your component
 47 |     }
 48 | }
 49 | ```
 50 | 
 51 | In your template
 52 | 
 53 | ```
 54 | <template>
 55 |     <Slide>
 56 |       <a id="home" href="#">
 57 |         <span>Home</span>
 58 |       </a>
 59 |     </Slide>
 60 | </template>
 61 | ```
 62 | 
 63 | ### Animations
 64 | 
 65 | The example above imported `slide` which renders a menu that slides in on the page when the burger icon is clicked. To use a different animation you can subsitute slide with any of the following
 66 | 
 67 | * Slide
 68 | * ScaleDown
 69 | * ScaleRotate
 70 | * Reveal
 71 | * Push
 72 | * PushRotate
 73 | 
 74 | ATTENTION - the below animations are in WIP
 75 | 
 76 | * FallDown
 77 | * Stack
 78 | * Elastic
 79 | * Bubble
 80 | 
 81 | ### Properties
 82 | 
 83 | Some animation require certain other elements on your page
 84 | 
 85 | * Page wrapper - an element wrapping the rest of the content on yur page, placed after the menu component
 86 | 
 87 | ```javascript
 88 | <Menu/>
 89 | 
 90 | <main id="page-wrap">
 91 | .
 92 | .
 93 | </main>
 94 | 
 95 | ```
 96 | 
 97 | * Outer container called `app` - an element containing everything including the menu component
 98 | 
 99 | ```javascript
100 | <div id="app">
101 |     <Menu/>
102 |     <main id="page-wrap">
103 |     .
104 |     .
105 |     .
106 |     </main>
107 | </div>
108 | ```
109 | 
110 | Check this table to see which animations require these elements:
111 | 
112 | Animation | `pageWrapId` | `appId`
113 | --- | :---: | :---:
114 | `Slide` | |
115 | `Push` | &#x2713; | &#x2713;
116 | `PushRotate` |  &#x2713;  |  &#x2713;
117 | `ScaleDown` |  &#x2713;  |  &#x2713;
118 | `ScaleRotate` |  &#x2713;  |  &#x2713;
119 | `Reveal` |  &#x2713;  |  &#x2713;
120 | 
121 | ### Position
122 | 
123 | The menu opens from left by default. To have it open from the right, use the `right` prop. It's just a boolean so you don't need to specify a value.
124 | 
125 | ```javascript
126 | <Slide right/>
127 | ```
128 | 
129 | ### Width
130 | 
131 | You can specify the width of the menu with the `width` prop. The default is `300px`
132 | 
133 | ```javascript
134 | <Slide width="400">
135 | ```
136 | 
137 | ### Open state
138 | 
139 | You can control whether the sidebar is open or closed with the `isOpen` prop. This is useful if you need to close the menu after a user clicks on an item in it, for example, or if you want to open the menu from some other button in addition to the standard burger icon. The default value is `false`
140 | 
141 | ```javascript
142 | // To render the menu open
143 | 
144 | <Slide isOpen>
145 | ```
146 | ### Menu events
147 | 
148 | If you want to get a notification when the menu open or close you can use the `openMenu` and `closeMenu` notifications. This way you can update your application state when the menu open or close
149 | 
150 | ```javascript
151 | // To bind the open and close events
152 | 
153 | <Slide
154 |   @openMenu="handleOpenMenu"
155 |   @closeMenu="handleCloseMenu"
156 | >
157 | ```
158 | ### Close on Outside Click
159 | 
160 | You can turn off the menu closing when an an outside click is triggered with `disableOutsideClick`.
161 | 
162 | ``` javascript
163 | <Slide disableOutsideClick>
164 | ```
165 | 
166 | ### Close on Escape
167 | 
168 | By default, the menu will close when the Escape key is pressed. To disable this behavior, you can pass the `disableCloseOnEsc` prop. This is useful in cases where you want the menu to be open all the time, for example if you're implementing a responsive menu that behaves differently depending on the browser width.
169 | 
170 | ``` javascript
171 | <Slide disableEsc />
172 | ```
173 | 
174 | ### Close on Navigation
175 | 
176 | By default, the menu will not close when a link inside the menu is clicked. To disable this behavior, you can pass the `closeOnNavigation` prop. This is useful in cases where you want the menu to close when a navigation link is clicked as this then stops the user having to make an extra click to close the menu.
177 | 
178 | ``` javascript
179 | <Slide :closeOnNavigation="true" />
180 | ```
181 | 
182 | ### Overlay
183 | 
184 | You can turn off the default overlay with `noOverlay`.
185 | 
186 | ``` javascript
187 | <Slide noOverlay />
188 | ```
189 | 
190 | ### Burger Icon and Cross Icon
191 | 
192 | You can disable both icons by passing burgerIcon and crossIcon to `false`. This can be useful if you want to keep the menu open and don't want the user to close the menu
193 | 
194 | ```javascript
195 | <Slide :burgerIcon="false" :crossIcon="false"/>
196 | ```
197 | 
198 | ### Styling
199 | 
200 | Visual styles (color, font etc) need to be supplied with the help of CSS
201 | 
202 | #### CSS
203 | The component has following helper class
204 | 
205 | ```CSS
206 |  .bm-burger-button {
207 |       position: fixed;
208 |       width: 36px;
209 |       height: 30px;
210 |       left: 36px;
211 |       top: 36px;
212 |       cursor: pointer;
213 |     }
214 |     .bm-burger-bars {
215 |       background-color: #373a47;
216 |     }
217 |     .line-style {
218 |       position: absolute;
219 |       height: 20%;
220 |       left: 0;
221 |       right: 0;
222 |     }
223 |     .cross-style {
224 |       position: absolute;
225 |       top: 12px;
226 |       right: 2px;
227 |       cursor: pointer;
228 |     }
229 |     .bm-cross {
230 |       background: #bdc3c7;
231 |     }
232 |     .bm-cross-button {
233 |       height: 24px;
234 |       width: 24px;
235 |     }
236 |     .bm-menu {
237 |       height: 100%; /* 100% Full-height */
238 |       width: 0; /* 0 width - change this with JavaScript */
239 |       position: fixed; /* Stay in place */
240 |       z-index: 1000; /* Stay on top */
241 |       top: 0;
242 |       left: 0;
243 |       background-color: rgb(63, 63, 65); /* Black*/
244 |       overflow-x: hidden; /* Disable horizontal scroll */
245 |       padding-top: 60px; /* Place content 60px from the top */
246 |       transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
247 |     }
248 | 
249 |     .bm-overlay {
250 |       background: rgba(0, 0, 0, 0.3);
251 |     }
252 |     .bm-item-list {
253 |       color: #b8b7ad;
254 |       margin-left: 10%;
255 |       font-size: 20px;
256 |     }
257 |     .bm-item-list > * {
258 |       display: flex;
259 |       text-decoration: none;
260 |       padding: 0.7em;
261 |     }
262 |     .bm-item-list > * > span {
263 |       margin-left: 10px;
264 |       font-weight: 700;
265 |       color: white;
266 |     }
267 | ```
268 | 
269 | ## Browser Support
270 | 
271 | Chrome and Firefox have full support, but Safari and IE have strange behavior for some of the menus.
272 | 
273 | ## Author
274 | 
275 | &#169; [Mohit Bajoria](https://mbj36.xyz)
276 | 
277 | ## License
278 | 
279 | [MIT](https://github.com/mbj36/vue-burger-menu/blob/master/LICENSE)
280 | 
281 | Like it ? <img src="https://assets-cdn.github.com/images/icons/emoji/unicode/2b50.png?v8" height="20px" /> it
282 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-burger-menu",
 3 |   "version": "2.0.5",
 4 |   "private": false,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "build-bundle": "vue-cli-service build --target lib --name vue-burger-menu ./src/components/index.js"
10 |   },
11 |   "dependencies": {
12 |     "vue": "^2.5.17"
13 |   },
14 |   "author": {
15 |     "name": "Mohit Bajoria",
16 |     "email": "mohitbajo36@gmail.com",
17 |     "url": "https://mbj36.xyz"
18 |   },
19 |   "keywords": [
20 |     "vuejs",
21 |     "menu",
22 |     "hamburger",
23 |     "sidebar"
24 |   ],
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "git+https://github.com/mbj36/vue-burger-menu.git"
28 |   },
29 |   "devDependencies": {
30 |     "@vue/cli-plugin-babel": "^3.0.0",
31 |     "@vue/cli-plugin-eslint": "^3.0.0",
32 |     "@vue/cli-service": "^3.0.0",
33 |     "less": "^3.8.1",
34 |     "less-loader": "^4.1.0",
35 |     "vue-template-compiler": "^2.5.17"
36 |   },
37 |   "main": "./dist/vue-burger-menu.common.js",
38 |   "license": "MIT",
39 |   "eslintConfig": {
40 |     "root": true,
41 |     "env": {
42 |       "node": true
43 |     },
44 |     "extends": [
45 |       "plugin:vue/essential",
46 |       "eslint:recommended"
47 |     ],
48 |     "rules": {},
49 |     "parserOptions": {
50 |       "parser": "babel-eslint"
51 |     }
52 |   },
53 |   "postcss": {
54 |     "plugins": {
55 |       "autoprefixer": {}
56 |     }
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not ie <= 8"
62 |   ],
63 |   "files": [
64 |     "dist/vue-burger-menu.common.js",
65 |     "dist/vue-burger-menu.umd.js"
66 |   ]
67 | }
68 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mbj36/vue-burger-menu/257c8056e57be6c85d5dd3d97005c37cbddc0a29/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
10 |     <title>vue-burger-menu</title>
11 |     <style>
12 |         @import url('https://fonts.googleapis.com/css?family=Raleway:100,300,500,700');
13 |     </style>
14 |     <!-- Global site tag (gtag.js) - Google Analytics -->
15 |     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-115186774-2"></script>
16 |     <script>
17 |         window.dataLayer = window.dataLayer || [];
18 |         function gtag() { dataLayer.push(arguments); }
19 |         gtag('js', new Date());
20 | 
21 |         gtag('config', 'UA-115186774-2');
22 |     </script>
23 | 
24 | </head>
25 | 
26 | <body>
27 |     <noscript>
28 |         <strong>We're sorry but vue-burger-menu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
29 |     </noscript>
30 |     <div id="app"></div>
31 |     <!-- built files will be auto injected -->
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="app">
  3 |         <component :is="currentMenu" :right="side === 'right' ? true: false">
  4 |             <a href="#">
  5 |                 <i class="fa fa-fw fa-star-o"></i>
  6 |                 <span>Favourites</span>
  7 |             </a>
  8 |             <a href="#">
  9 |                 <i class="fa fa-fw fa-bell-o"></i>
 10 |                 <span>Alerts</span>
 11 |             </a>
 12 |             <a href="#">
 13 |                 <i class="fa fa-fw fa-envelope-o"></i>
 14 |                 <span>Messages</span>
 15 |             </a>
 16 |             <a href="#">
 17 |                 <i class="fa fa-fw fa-comment-o"></i>
 18 |                 <span>Comments</span>
 19 |             </a>
 20 |             <a href="#">
 21 |                 <i class="fa fa-fw fa-bar-chart-o"></i>
 22 |                 <span>Analytics</span>
 23 |             </a>
 24 |             <a href="#">
 25 |                 <i class="fa fa-fw fa-newspaper-o"></i>
 26 |                 <span>Reading</span>
 27 |             </a>
 28 |         </component>
 29 |         <main id="page-wrap">
 30 |             <img src="https://img.shields.io/npm/dt/vue-burger-menu.svg" /> &emsp;
 31 |             <img src="https://img.shields.io/github/stars/mbj36/vue-burger-menu.svg" />
 32 |             <h1>
 33 |                 <a href="https://github.com/mbj36/vue-burger-menu">vue-burger-menu</a> <br/>
 34 |             </h1>
 35 |             <a :class="{ sideButton: true, left: true, active: this.side === 'left' }" @click="changeSide('left')">Left</a>
 36 |             <a :class="{sideButton: true, right: true, active: this.side === 'right' }" @click="changeSide('right')">Right</a>
 37 | 
 38 |             <h2 class="description">An off-canvas sidebar vue component with a collection of effects and styles using CSS transitions and SVG path animations.</h2>
 39 | 
 40 |             <nav class="demo-buttons">
 41 |                 <span v-for="(menu, index) in menus" :key="index">
 42 |                     <span>
 43 |                         <a :class="currentMenu === menu.buttonText.replace(/ +/g, '').toLowerCase() ? {currentDemo:true}: {currentDemo:false}" @click="changeMenu(menu.buttonText)">
 44 |                             {{menu.buttonText}}
 45 |                         </a>
 46 |                     </span>
 47 |                 </span>
 48 |             </nav>
 49 |             Inspired by
 50 |             <a href="https://github.com/codrops/OffCanvasMenuEffects">Off-Canvas Menu Effects</a> and
 51 |             <a href="https://github.com/codrops/SidebarTransitions">Sidebar Transitions</a> by Codrops
 52 |         </main>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     import slide from './components/Menu/slide';
 58 |     import bubble from './components/Menu/bubble';
 59 |     import elastic from './components/Menu/elastic';
 60 |     import falldown from './components/Menu/fallDown';
 61 |     import push from './components/Menu/push';
 62 |     import pushrotate from './components/Menu/pushRotate';
 63 |     import reveal from './components/Menu/reveal';
 64 |     import scaledown from './components/Menu/scaleDown';
 65 |     import scalerotate from './components/Menu/scaleRotate';
 66 |     import stack from './components/Menu/stack';
 67 |     import Menu from './components/Menu';
 68 | 
 69 |     export default {
 70 |       data() {
 71 |         return {
 72 |           menus: {
 73 |             slide: { buttonText: 'Slide' },
 74 |             push: { buttonText: 'Push' },
 75 |             pushRotate: { buttonText: 'Push Rotate' },
 76 |             reveal: { buttonText: 'Reveal' },
 77 |             scaleDown: { buttonText: 'Scale Down' },
 78 |             scaleRotate: { buttonText: 'Scale Rotate' },
 79 |             // elastic: { buttonText: 'Elastic - (WIP)' },
 80 |             // stack: { buttonText: 'Stack - (WIP)' },
 81 |             bubble: { buttonText: 'Bubble' },
 82 |             fallDown: { buttonText: 'Fall Down' }
 83 |           },
 84 |           side: 'left',
 85 |           currentMenu: 'slide'
 86 |         };
 87 |       },
 88 |       components: {
 89 |         slide,
 90 |         bubble,
 91 |         elastic,
 92 |         push,
 93 |         pushrotate,
 94 |         scaledown,
 95 |         scalerotate,
 96 |         reveal,
 97 |         stack,
 98 |         falldown,
 99 |         Menu
100 |       },
101 |       methods: {
102 |         changeMenu(menu) {
103 |           this.currentMenu = menu.replace(/ +/g, '').toLowerCase();
104 |           return this.currentMenu;
105 |         },
106 |         changeSide(side) {
107 |           this.side = side;
108 |         }
109 |       }
110 |     };
111 | </script>
112 | 
113 |  <style lang="less">
114 |     *,
115 |     *:after,
116 |     *:before {
117 |       -webkit-box-sizing: border-box;
118 |       box-sizing: border-box;
119 |     }
120 | 
121 |     html {
122 |       height: 100%;
123 |     }
124 | 
125 |     body {
126 |       height: 100%;
127 |       color: #fffce1;
128 |       font-family: 'Raleway', Arial, sans-serif;
129 |       margin: 0px;
130 |     }
131 | 
132 |     #app {
133 |       height: 100%;
134 |     }
135 | 
136 |     a {
137 |       color: #4e4a46;
138 |       text-decoration: none;
139 | 
140 |       &:hover,
141 |       &:focus {
142 |         color: #c94e50;
143 |       }
144 |     }
145 | 
146 |     main {
147 |       height: 100%;
148 |       padding: 3em 2em;
149 |       text-align: center;
150 |       background: #b4bad2;
151 |       overflow: auto;
152 |     }
153 | 
154 |     h1 {
155 |       font-weight: 800;
156 |       font-size: 3.75em;
157 |     }
158 | 
159 |     .description {
160 |       max-width: 20em;
161 |       margin: 1.2em auto 1em;
162 |       line-height: 1.3em;
163 |       font-weight: 400;
164 |     }
165 | 
166 |     .demo-buttons {
167 |       font-size: 1em;
168 |       max-width: 1200px;
169 |       margin: 2em auto 3em;
170 |       padding: 0 10em;
171 | 
172 |       a {
173 |         display: inline-block;
174 |         margin: 0.75em;
175 |         padding: 1.35em 1.1em;
176 |         width: 15em;
177 |         background: #fffce1;
178 |         text-transform: uppercase;
179 |         letter-spacing: 1px;
180 |         font-weight: 800;
181 |         border-top-left-radius: 20px 50px;
182 |         border-top-right-radius: 20px 50px;
183 |         border-bottom-right-radius: 20px 50px;
184 |         border-bottom-left-radius: 20px 50px;
185 |         cursor: pointer;
186 | 
187 |         &.currentDemo {
188 |           background: #c94e50;
189 |           color: #fffce1;
190 |         }
191 |       }
192 |     }
193 | 
194 |     .sideButton {
195 |       display: inline-block;
196 |       width: 5em;
197 |       height: 2.5em;
198 |       line-height: 2.5em;
199 |       cursor: pointer;
200 |       background: #fffce1;
201 |       text-transform: uppercase;
202 |       letter-spacing: 1px;
203 |       font-size: 0.8em;
204 |       font-weight: 800;
205 | 
206 |       &.left {
207 |         border-top-left-radius: 10px;
208 |         border-bottom-left-radius: 10px;
209 |       }
210 | 
211 |       &.right {
212 |         border-top-right-radius: 10px;
213 |         border-bottom-right-radius: 10px;
214 |       }
215 | 
216 |       &.active {
217 |         background: #c94e50;
218 |         color: #fffce1;
219 |       }
220 |     }
221 | 
222 |     @media screen and (max-width: 40em) {
223 |       main {
224 |         font-size: 80%;
225 |       }
226 | 
227 |       h1 {
228 |         padding-top: 1em;
229 |         font-size: 2.5em;
230 |       }
231 | 
232 |       .demo-buttons {
233 |         max-width: 900px;
234 |         padding: 0 2em;
235 |       }
236 |     }
237 | 
238 |     //
239 |     // Burger menu custom styles
240 |     //
241 |     .bm-burger-button {
242 |       position: absolute;
243 |       width: 36px;
244 |       height: 30px;
245 |       left: 36px;
246 |       top: 36px;
247 |     }
248 | 
249 |     .right .bm-burger-button {
250 |       left: initial;
251 |       right: 36px;
252 |     }
253 | 
254 |     .bm-burger-bars {
255 |       background: #373a47;
256 |     }
257 | 
258 |     .bm-morph-shape {
259 |       fill: #373a47;
260 |     }
261 | 
262 |     .bm-menu {
263 |       background: #373a47;
264 | 
265 |       a {
266 |         color: #b8b7ad;
267 | 
268 |         &:hover,
269 |         &:focus {
270 |           color: #c94e50;
271 |         }
272 |       }
273 |     }
274 | 
275 |     //
276 |     // Mixins
277 |     //
278 |     .menu-1 {
279 |       .bm-cross {
280 |         background: #bdc3c7;
281 |       }
282 | 
283 |       .bm-menu {
284 |         padding: 2.5em 1.5em 0;
285 |         font-size: 1.15em;
286 |       }
287 |     }
288 | 
289 |     .menu-2 {
290 |       .bm-cross {
291 |         background: #999;
292 |       }
293 | 
294 |       .bm-menu {
295 |         padding: 3.4em 1em 0;
296 |       }
297 | 
298 |       a {
299 |         padding: 1em;
300 |       }
301 | 
302 |       i {
303 |         font-size: 1.7em;
304 |         vertical-align: middle;
305 |         color: #282a35;
306 |       }
307 |     }
308 | 
309 |     .menu-3 {
310 |       .bm-cross {
311 |         background: #888;
312 |       }
313 | 
314 |       .bm-menu {
315 |         padding: 2em 1em;
316 |         font-size: 1.15em;
317 |       }
318 | 
319 |       i {
320 |         opacity: 0.5;
321 |       }
322 | 
323 |       span {
324 |         text-transform: uppercase;
325 |         letter-spacing: 1px;
326 |         font-size: 0.75em;
327 |       }
328 |     }
329 | 
330 |     .menu-4 {
331 |       .bm-cross {
332 |         background: #888;
333 |       }
334 | 
335 |       h2 {
336 |         margin: 0 auto;
337 |         padding: 2em 1em;
338 |         color: rgba(0, 0, 0, 0.4);
339 |         box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
340 | 
341 |         i {
342 |           margin-left: 0.2em;
343 |         }
344 | 
345 |         span {
346 |           font-size: 1.6em;
347 |           font-weight: 700;
348 |         }
349 |       }
350 | 
351 |       a {
352 |         padding: 1em;
353 |         text-transform: uppercase;
354 |         transition: background 0.3s, box-shadow 0.3s;
355 |         box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
356 | 
357 |         span {
358 |           letter-spacing: 1px;
359 |           font-weight: 400;
360 |         }
361 | 
362 |         &:hover,
363 |         &:focus {
364 |           background: rgba(0, 0, 0, 0.2);
365 |           box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
366 |           color: #b8b7ad;
367 |         }
368 |       }
369 |     }
370 | </style>
371 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mbj36/vue-burger-menu/257c8056e57be6c85d5dd3d97005c37cbddc0a29/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Menu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div ref="sideNav" class="bm-menu">
  4 |             <nav class="bm-item-list">
  5 |                 <slot></slot>
  6 |             </nav>
  7 |             <span class="bm-cross-button cross-style" @click="closeMenu" :class="{ hidden: !crossIcon }">
  8 |                 <span v-for="(x, index) in 2" :key="x" class="bm-cross" :style="{ position: 'absolute', width: '3px', height: '14px',transform: index === 1 ? 'rotate(45deg)' : 'rotate(-45deg)'}">
  9 |                 </span>
 10 |             </span>
 11 |         </div>
 12 | 
 13 |         <div ref="bmBurgerButton" class="bm-burger-button" @click="openMenu" :class="{ hidden: !burgerIcon }">
 14 |             <span class="bm-burger-bars line-style" :style="{top:20 * (index * 2) + '%'}" v-for="(x, index) in 3" :key="index"></span>
 15 |         </div>
 16 | 
 17 |     </div>
 18 | </template>
 19 | 
 20 | <script>
 21 |     export default {
 22 |       name: 'menubar',
 23 |       data() {
 24 |         return {
 25 |           isSideBarOpen: false
 26 |         };
 27 |       },
 28 |       props: {
 29 |         isOpen: {
 30 |           type: Boolean,
 31 |           required: false
 32 |         },
 33 |         right: {
 34 |           type: Boolean,
 35 |           required: false
 36 |         },
 37 |         width: {
 38 |           type: [String],
 39 |           required: false,
 40 |           default: '300'
 41 |         },
 42 |         disableEsc: {
 43 |           type: Boolean,
 44 |           required: false
 45 |         },
 46 |         noOverlay: {
 47 |           type: Boolean,
 48 |           required: false
 49 |         },
 50 |         onStateChange: {
 51 |           type: Function,
 52 |           required: false
 53 |         },
 54 |         burgerIcon: {
 55 |           type: Boolean,
 56 |           required: false,
 57 |           default: true
 58 |         },
 59 |         crossIcon: {
 60 |           type: Boolean,
 61 |           required: false,
 62 |           default: true
 63 |         },
 64 |         disableOutsideClick: {
 65 |           type: Boolean,
 66 |           required: false,
 67 |           default: false
 68 |         },
 69 |         closeOnNavigation: {
 70 |           type: Boolean,
 71 |           required: false,
 72 |           default: false
 73 |         }
 74 |       },
 75 |       methods: {
 76 |         openMenu() {
 77 |           this.$emit('openMenu');
 78 |           this.isSideBarOpen = true;
 79 | 
 80 |           if (!this.noOverlay) {
 81 |             document.body.classList.add('bm-overlay');
 82 |           }
 83 |           if (this.right) {
 84 |             this.$refs.sideNav.style.left = 'auto';
 85 |             this.$refs.sideNav.style.right = '0px';
 86 |           }
 87 |           this.$nextTick(function() {
 88 |             this.$refs.sideNav.style.width = this.width
 89 |               ? this.width + 'px'
 90 |               : '300px';
 91 |           });
 92 |         },
 93 | 
 94 |         closeMenu() {
 95 |           this.$emit('closeMenu');
 96 |           this.isSideBarOpen = false;
 97 |           document.body.classList.remove('bm-overlay');
 98 |           this.$refs.sideNav.style.width = '0px';
 99 |         },
100 | 
101 |         closeMenuOnEsc(e) {
102 |           e = e || window.event;
103 |           if (e.key === 'Escape' || e.keyCode === 27) {
104 |             this.closeMenu();
105 |           }
106 |         },
107 |         documentClick(e) {
108 |           let element = this.$refs.bmBurgerButton;
109 |           let target = null;
110 |           if (e && e.target) {
111 |             target = e.target;
112 |           }
113 | 
114 |           if (
115 |             element &&
116 |             element !== target &&
117 |             !element.contains(target) &&
118 |             !this.hasClass(target,'bm-menu') &&
119 |             this.isSideBarOpen &&
120 |             !this.disableOutsideClick
121 |           ) {
122 |             this.closeMenu();
123 |           } else if (
124 |             element &&
125 |             this.hasClass(target,'bm-menu') &&
126 |             this.isSideBarOpen &&
127 |             this.closeOnNavigation
128 |           ) {
129 |             this.closeMenu();
130 |           }
131 |         },
132 |         hasClass(element, className) {
133 |           do {
134 |             if (element.classList && element.classList.contains(className)) {
135 |               return true;
136 |             }
137 |             element = element.parentNode;
138 |           } while (element);
139 |           return false;
140 |         },
141 |       },
142 | 
143 |       mounted() {
144 |         if (!this.disableEsc) {
145 |           document.addEventListener('keyup', this.closeMenuOnEsc);
146 |         }
147 |       },
148 |       created: function() {
149 |         document.addEventListener('click', this.documentClick);
150 |       },
151 |       destroyed: function() {
152 |         document.removeEventListener('keyup', this.closeMenuOnEsc);
153 |         document.removeEventListener('click', this.documentClick);
154 |       },
155 |       watch: {
156 |         isOpen: {
157 |           deep: true,
158 |           immediate: true,
159 |           handler(newValue, oldValue) {
160 |             this.$nextTick(() => {
161 |               if (!oldValue && newValue) {
162 |                 this.openMenu();
163 |               }
164 |               if (oldValue && !newValue) {
165 |                 this.closeMenu();
166 |               }
167 |             });
168 |           }
169 |         },
170 |         right: {
171 |           deep: true,
172 |           immediate: true,
173 |           handler(oldValue, newValue) {
174 |             if (oldValue) {
175 |               this.$nextTick(() => {
176 |                 this.$refs.bmBurgerButton.style.left = 'auto';
177 |                 this.$refs.bmBurgerButton.style.right = '36px';
178 |                 this.$refs.sideNav.style.left = 'auto';
179 |                 this.$refs.sideNav.style.right = '0px';
180 |                 document.querySelector('.bm-burger-button').style.left = 'auto';
181 |                 document.querySelector('.bm-burger-button').style.right = '36px';
182 |                 document.querySelector('.bm-menu').style.left = 'auto';
183 |                 document.querySelector('.bm-menu').style.right = '0px';
184 |                 document.querySelector('.cross-style').style.right='250px';
185 |               });
186 |             }
187 |             if (newValue) {
188 |               if (
189 |                 this.$refs.bmBurgerButton.hasAttribute('style')
190 |               ) {
191 |                 this.$refs.bmBurgerButton.removeAttribute('style');
192 |                 this.$refs.sideNav.style.right = 'auto';
193 |                 document
194 |                   .querySelector('.bm-burger-button')
195 |                   .removeAttribute('style');
196 |                 document.getElementById('sideNav').style.right = 'auto';
197 |                 document.querySelector('.cross-style').style.right='0px';
198 |               }
199 |             }
200 |           }
201 |         }
202 |       }
203 |     };
204 | </script>
205 | 
206 | <style>
207 |     html {
208 |       height: 100%;
209 |     }
210 |     .bm-burger-button {
211 |       position: absolute;
212 |       width: 36px;
213 |       height: 30px;
214 |       left: 36px;
215 |       top: 36px;
216 |       cursor: pointer;
217 |     }
218 |     .bm-burger-button.hidden {
219 |       display: none;
220 |     }
221 |     .bm-burger-bars {
222 |       background-color: #373a47;
223 |     }
224 |     .line-style {
225 |       position: absolute;
226 |       height: 20%;
227 |       left: 0;
228 |       right: 0;
229 |     }
230 |     .cross-style {
231 |       position: absolute;
232 |       top: 12px;
233 |       right: 2px;
234 |       cursor: pointer;
235 |     }
236 |     .bm-cross {
237 |       background: #bdc3c7;
238 |     }
239 |     .bm-cross-button {
240 |       height: 24px;
241 |       width: 24px;
242 |     }
243 |     .bm-cross-button.hidden {
244 |       display: none;
245 |     }
246 |     .bm-menu {
247 |       height: 100%; /* 100% Full-height */
248 |       width: 0; /* 0 width - change this with JavaScript */
249 |       position: fixed; /* Stay in place */
250 |       z-index: 1000; /* Stay on top */
251 |       top: 0;
252 |       left: 0;
253 |       background-color: rgb(63, 63, 65); /* Black*/
254 |       overflow-x: hidden; /* Disable horizontal scroll */
255 |       padding-top: 60px; /* Place content 60px from the top */
256 |       transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
257 |     }
258 | 
259 |     .bm-overlay {
260 |       background: rgba(0, 0, 0, 0.3);
261 |     }
262 |     .bm-item-list {
263 |       color: #b8b7ad;
264 |       margin-left: 10%;
265 |       font-size: 20px;
266 |     }
267 |     .bm-item-list > * {
268 |       display: flex;
269 |       text-decoration: none;
270 |       padding: 0.7em;
271 |     }
272 |     .bm-item-list > * > span {
273 |       margin-left: 10px;
274 |       font-weight: 700;
275 |       color: white;
276 |     }
277 | </style>
278 | 
279 | 


--------------------------------------------------------------------------------
/src/components/Menu/bubble.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu ref="sideNav" v-bind="this.$attrs" @openMenu="openMenu" @closeMenu="closeMenu">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'bubble',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       data() {
17 |         return {
18 |           propsToPass: {
19 |             isOpen: this.$attrs.isOpen,
20 |             right: this.$attrs.right,
21 |             width: this.$attrs.width,
22 |             disableEsc: this.$attrs.disableEsc,
23 |             noOverlay: this.$attrs.noOverlay,
24 |             onStateChange: this.$attrs.onStateChange
25 |           }
26 |         };
27 |       },
28 |       methods : {
29 |           openMenu () {
30 |               //this.$emit("openMenu")
31 |               let set= this.$refs.sideNav.$el.querySelector('.bm-menu');
32 |               //console.log(set,"lallan")
33 |               set.style.borderRadius='150% / 70%';
34 |               if(this.$attrs.right){
35 |               set.style.borderTopRightRadius = '0px 900px';
36 |               set.style.borderBottomRightRadius='0px';
37 |               }
38 |               else{
39 |                 set.style.borderTopLeftRadius = '0px 900px';
40 |               set.style.borderBottomLeftRadius='0px';
41 |               }
42 |               set.style.transitionTimingFunction='easy-in';
43 |               this.$emit("openMenu");
44 | 
45 |               setTimeout(function(){
46 |                   set.style.transitionTimingFunction='cubic-bezier(.29, 1.01, 1, -0.68)';
47 |                   set.style.borderRadius='0px'
48 | 
49 |                   }, 300);
50 |           },
51 |           closeMenu () {
52 |               //this.$emit("closeMenu")
53 |             let set= this.$refs.sideNav.$el.querySelector('.bm-menu');
54 |             set.style.transitionTimingFunction=null;
55 |             this.$emit("closeMenu")
56 |           }
57 |       }
58 |     };
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/components/Menu/elastic.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="propsToPass" openMenu="openMenu" @closeMenu="closeMenu">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'elastic',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       data() {
17 |         return {
18 |           propsToPass: {
19 |             isOpen: this.$attrs.isOpen,
20 |             right: this.$attrs.right,
21 |             width: this.$attrs.width,
22 |             disableEsc: this.$attrs.disableEsc,
23 |             noOverlay: this.$attrs.noOverlay,
24 |             onStateChange: this.$attrs.onStateChange
25 |           }
26 |         };
27 |       },
28 |       methods : {
29 |           openMenu () {
30 |               this.$emit("openMenu")
31 |           },
32 |           closeMenu () {
33 |               this.$emit("closeMenu")
34 |           }
35 |       }
36 |     };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/components/Menu/fallDown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu ref="sideNav" v-bind="this.$attrs" @openMenu="openMenu" @closeMenu="closeMenu">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'elastic',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       data() {
17 |         return {
18 |           bodyOldStyle: '',
19 |           propsToPass: {
20 |             isOpen: this.$attrs.isOpen,
21 |             right: this.$attrs.right,
22 |             width: this.$attrs.width,
23 |             disableEsc: this.$attrs.disableEsc,
24 |             noOverlay: this.$attrs.noOverlay,
25 |             onStateChange: this.$attrs.onStateChange
26 |           }
27 |         };
28 |       },
29 |       methods : {
30 |           openMenu () {
31 |             this.$emit("openMenu")
32 |             let width = this.$attrs.width ? this.$attrs.width + 'px' : '300px';
33 |             this.$refs.sideNav.$el.querySelector('.bm-menu').style.overflowY = 'hidden';
34 |             this.bodyOldStyle = document.body.getAttribute('style') || '';
35 |             document.body.style.overflowX = 'hidden';
36 |             this.$refs.sideNav.$el.querySelector('.bm-menu').style.transition='0.5s';
37 | 
38 |           if (this.$attrs.right) {
39 |              document.querySelector(
40 |               '#page-wrap'
41 |             ).style.transform = `translate3d(-${width}, 0px, 0px )`;
42 |           } else {
43 |              document.querySelector(
44 |               '#page-wrap'
45 |             ).style.transform = `translate3d(${width}, 0px, 0px )`;
46 |           }
47 | 
48 |              document.querySelector('#page-wrap').style.transition =
49 |             'all 0.5s ease 0s';
50 | 
51 |             this.$nextTick(() => {
52 |               this.$refs.sideNav.$el.querySelector('.bm-menu').style.height='100%';
53 |               });
54 | 
55 |           },
56 |           closeMenu () {
57 |             this.$emit("closeMenu")
58 |             document.querySelector('#page-wrap').style.transition =
59 |             'all 0.5s ease 0s';
60 |             document.querySelector('#page-wrap').style.transform = '';
61 |             document.body.setAttribute('style', this.bodyOldStyle);
62 |             this.$refs.sideNav.$el.querySelector('.bm-menu').style.height='0px';
63 | 
64 |           }
65 |       },
66 |       mounted () {
67 |         this.$refs.sideNav.$el.querySelector('.bm-menu').style.height='0px';
68 |       }
69 |     };
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/components/Menu/push.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="this.$attrs" @openMenu="push" @closeMenu="pull">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'push',
13 |       data() {
14 |         return {
15 |           bodyOldStyle: ''
16 |         };
17 |       },
18 |       components: {
19 |         Menu: Menu
20 |       },
21 |       methods: {
22 |         openMenu () {
23 |             this.$emit("openMenu")
24 |         },
25 |         closeMenu () {
26 |             this.$emit("closeMenu")
27 |         },
28 |         push() {
29 |           this.openMenu()
30 |           let width = this.$attrs.width ? this.$attrs.width + 'px' : '300px';
31 | 
32 |           this.bodyOldStyle = document.body.getAttribute('style') || '';
33 |           document.body.style.overflowX = 'hidden';
34 | 
35 |           if (this.$attrs.right) {
36 |             document.querySelector(
37 |               '#page-wrap'
38 |             ).style.transform = `translate3d(-${width}, 0px, 0px )`;
39 |           } else {
40 |             document.querySelector(
41 |               '#page-wrap'
42 |             ).style.transform = `translate3d(${width}, 0px, 0px )`;
43 |           }
44 | 
45 |           document.querySelector('#page-wrap').style.transition =
46 |             'all 0.5s ease 0s';
47 |         },
48 |         pull() {
49 |           this.closeMenu()
50 |           document.querySelector('#page-wrap').style.transition =
51 |             'all 0.5s ease 0s';
52 |           document.querySelector('#page-wrap').style.transform = '';
53 |           document.body.setAttribute('style', this.bodyOldStyle);
54 |         }
55 |       }
56 |     };
57 | </script>
58 | 
59 | 
60 | 


--------------------------------------------------------------------------------
/src/components/Menu/pushRotate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="this.$attrs" @openMenu="push" @closeMenu="pull">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'pushrotate',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       data() {
17 |         return {
18 |           bodyOldStyle: '',
19 |           appOldStyle: ''
20 |         };
21 |       },
22 |       methods: {
23 |         openMenu () {
24 |             this.$emit("openMenu")
25 |         },
26 |         closeMenu () {
27 |             this.$emit("closeMenu")
28 |         },
29 |         push() {
30 |           this.openMenu()
31 |           let width = this.$attrs.width ? this.$attrs.width + 'px' : '300px';
32 | 
33 |           this.bodyOldStyle = document.body.getAttribute('style') || '';
34 |           document.body.style.overflowX = 'hidden';
35 | 
36 |           if (this.$attrs.right) {
37 |             document.querySelector(
38 |               '#page-wrap'
39 |             ).style.transform = `translate3d(-${width}, 0px, 0px ) rotateY(15deg)`;
40 |             document.querySelector('#page-wrap').style.transformOrigin =
41 |               '100% 50% 0px';
42 |           } else {
43 |             document.querySelector(
44 |               '#page-wrap'
45 |             ).style.transform = `translate3d(${width}, 0px, 0px ) rotateY(-15deg)`;
46 |             document.querySelector('#page-wrap').style.transformOrigin =
47 |               '0% 50% 0px';
48 |           }
49 | 
50 |           document.querySelector('#page-wrap').style.transformStyle = 'preserve-3d';
51 | 
52 |           document.querySelector('#page-wrap').style.transition =
53 |             'all 0.5s ease 0s';
54 |           this.appOldStyle = document.querySelector('#app').getAttribute('style') || '';
55 | 
56 |           document.querySelector('#app').style.perspective = '1500px';
57 |           document.querySelector('#app').style.overflow = 'hidden';
58 |         },
59 |         pull() {
60 |           this.closeMenu()
61 |           document.querySelector('#page-wrap').style.transition =
62 |             'all 0.5s ease 0s';
63 |           document.querySelector('#page-wrap').style.transform = '';
64 |           document.querySelector('#page-wrap').style.transformStyle = '';
65 |           document.querySelector('#page-wrap').style.transformOrigin = '';
66 | 
67 |           document.querySelector('#app').setAttribute('style', this.appOldStyle);
68 |           document.body.setAttribute('style', this.bodyOldStyle);
69 |         }
70 |       }
71 |     };
72 | </script>
73 | 
74 | 
75 | 


--------------------------------------------------------------------------------
/src/components/Menu/reveal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="this.$attrs" @openMenu="push" @closeMenu="pull">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'reveal',
13 |       data() {
14 |         return {
15 |           bodyOldStyle: ''
16 |         };
17 |       },
18 |       components: {
19 |         Menu: Menu
20 |       },
21 |       methods: {
22 |         openMenu () {
23 |             this.$emit("openMenu")
24 |         },
25 |         closeMenu () {
26 |             this.$emit("closeMenu")
27 |         },
28 |         push() {
29 |           this.openMenu()
30 |           let width = this.$attrs.width ? this.$attrs.width + 'px' : '300px';
31 | 
32 |           this.bodyOldStyle = document.body.getAttribute('style') || '';
33 |           document.body.style.overflowX = 'hidden';
34 | 
35 |           if (this.$attrs.right) {
36 |             document.querySelector(
37 |               '#page-wrap'
38 |             ).style.transform = `translate3d(-${width}, 0px, 0px )`;
39 |           } else {
40 |             document.querySelector(
41 |               '#page-wrap'
42 |             ).style.transform = `translate3d(${width}, 0px, 0px )`;
43 |           }
44 | 
45 |           document.querySelector('#page-wrap').style.position = 'relative';
46 |           document.querySelector('#page-wrap').style.transition =
47 |             'all 0.5s ease 0s';
48 |         },
49 |         pull() {
50 |           this.closeMenu()
51 |           document.querySelector('#page-wrap').style.transition =
52 |             'all 0.5s ease 0s';
53 |           document.querySelector('#page-wrap').style.transform = '';
54 |           document.querySelector('#page-wrap').style.position = '';
55 |           document.body.setAttribute('style', this.bodyOldStyle);
56 |         }
57 |       }
58 |     };
59 | </script>
60 | 
61 | 
62 | 


--------------------------------------------------------------------------------
/src/components/Menu/scaleDown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="this.$attrs" @openMenu="push" @closeMenu="pull">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'scaledown',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       data() {
17 |         return {
18 |           bodyOldStyle: '',
19 |           appOldStyle: ''
20 |         };
21 |       },
22 |       methods: {
23 |         openMenu () {
24 |             this.$emit("openMenu")
25 |         },
26 |         closeMenu () {
27 |             this.$emit("closeMenu")
28 |         },
29 |         push() {
30 |           this.openMenu()
31 |           let width = this.$attrs.width ? this.$attrs.width + 'px' : '100px';
32 | 
33 |           this.bodyOldStyle = document.body.getAttribute('style') || '';
34 |           document.body.style.overflowX = 'hidden';
35 | 
36 |           if (this.$attrs.right) {
37 |             document.querySelector(
38 |               '#page-wrap'
39 |             ).style.transform = `translate3d(-${width}, 0px, -600px ) `;
40 |           } else {
41 |             document.querySelector(
42 |               '#page-wrap'
43 |             ).style.transform = `translate3d(${width}, 0px, -600px ) `;
44 |           }
45 | 
46 |           document.querySelector('#page-wrap').style.transformStyle = 'preserve-3d';
47 | 
48 |           document.querySelector('#page-wrap').style.transition =
49 |             'all 0.5s ease 0s';
50 | 
51 |           document.querySelector('#page-wrap').style.overflow = 'hidden';
52 |           this.appOldStyle = document.querySelector('#app').getAttribute('style') || '';
53 | 
54 |           document.querySelector('#app').style.perspective = '1500px';
55 |           document.querySelector('#app').style.overflow = 'hidden';
56 |           document.querySelector('#app').style.height = '100%';
57 |         },
58 |         pull() {
59 |           this.closeMenu()
60 |           document.querySelector('#page-wrap').style.transition =
61 |             'all 0.5s ease 0s';
62 |           document.querySelector('#page-wrap').style.transform = '';
63 |           document.querySelector('#page-wrap').style.transformStyle = '';
64 |           document.querySelector('#page-wrap').style.transformOrigin = '';
65 |           document.querySelector('#page-wrap').style.overflow = 'auto';
66 | 
67 |           document.querySelector('#app').setAttribute('style', this.appOldStyle);
68 |           document.body.setAttribute('style', this.bodyOldStyle);
69 |         }
70 |       }
71 |     };
72 | </script>
73 | 
74 | 
75 | 


--------------------------------------------------------------------------------
/src/components/Menu/scaleRotate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="this.$attrs" @openMenu="push" @closeMenu="pull">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'scalerotate',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       data() {
17 |         return {
18 |           bodyOldStyle: '',
19 |           appOldStyle: ''
20 |         };
21 |       },
22 |       methods: {
23 |         openMenu () {
24 |             this.$emit("openMenu")
25 |         },
26 |         closeMenu () {
27 |             this.$emit("closeMenu")
28 |         },
29 |         push() {
30 |           this.openMenu()
31 |           let width = this.$attrs.width ? this.$attrs.width + 'px' : '100px';
32 | 
33 |           this.bodyOldStyle = document.body.getAttribute('style') || '';
34 |           document.body.style.overflowX = 'hidden';
35 | 
36 |           if (this.$attrs.right) {
37 |             document.querySelector(
38 |               '#page-wrap'
39 |             ).style.transform = `translate3d(-${width}, 0px, -600px ) rotateY(20deg)`;
40 |           } else {
41 |             document.querySelector(
42 |               '#page-wrap'
43 |             ).style.transform = `translate3d(${width}, 0px, -600px ) rotateY(-20deg)`;
44 |           }
45 | 
46 |           document.querySelector('#page-wrap').style.transformStyle = 'preserve-3d';
47 | 
48 |           document.querySelector('#page-wrap').style.transition =
49 |             'all 0.5s ease 0s';
50 | 
51 |           document.querySelector('#page-wrap').style.overflow = 'hidden';
52 |           this.appOldStyle = document.querySelector('#app').getAttribute('style') || '';
53 | 
54 |           document.querySelector('#app').style.perspective = '1500px';
55 |           document.querySelector('#app').style.overflow = 'hidden';
56 |           document.querySelector('#app').style.height = '100%';
57 |         },
58 |         pull() {
59 |           this.closeMenu()
60 |           document.querySelector('#page-wrap').style.transition =
61 |             'all 0.5s ease 0s';
62 |           document.querySelector('#page-wrap').style.transform = '';
63 |           document.querySelector('#page-wrap').style.transformStyle = '';
64 |           document.querySelector('#page-wrap').style.transformOrigin = '';
65 |           document.querySelector('#page-wrap').style.overflow = 'auto';
66 | 
67 |           document.querySelector('#app').setAttribute('style', this.appOldStyle);
68 |           document.body.setAttribute('style', this.bodyOldStyle);
69 |         }
70 |       }
71 |     };
72 | </script>
73 | 
74 | 
75 | 


--------------------------------------------------------------------------------
/src/components/Menu/slide.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="this.$attrs" @openMenu="openMenu" @closeMenu="closeMenu">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'slide',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       methods: {
17 |         openMenu() {
18 |           this.$emit('openMenu');
19 |         },
20 |         closeMenu() {
21 |           this.$emit('closeMenu');
22 |         }
23 |       }
24 |     };
25 | </script>
26 | 
27 | 
28 | 


--------------------------------------------------------------------------------
/src/components/Menu/stack.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Menu v-bind="propsToPass" openMenu="openMenu" @closeMenu="closeMenu">
 4 |             <slot></slot>
 5 |         </Menu>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import Menu from '../Menu';
11 |     export default {
12 |       name: 'stack',
13 |       components: {
14 |         Menu: Menu
15 |       },
16 |       data() {
17 |         return {
18 |           propsToPass: {
19 |             isOpen: this.$attrs.isOpen,
20 |             right: this.$attrs.right,
21 |             width: this.$attrs.width,
22 |             disableEsc: this.$attrs.disableEsc,
23 |             noOverlay: this.$attrs.noOverlay,
24 |             onStateChange: this.$attrs.onStateChange
25 |           }
26 |         };
27 |       },
28 |       methods : {
29 |           openMenu () {
30 |               this.$emit("openMenu")
31 |           },
32 |           closeMenu () {
33 |               this.$emit("closeMenu")
34 |           }
35 |       }
36 |     };
37 | </script>
38 | 
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | // Different CSS animations
 2 | 
 3 | import Slide from './Menu/slide'
 4 | import Bubble from './Menu/bubble'
 5 | import Reveal from './Menu/reveal'
 6 | import Push from './Menu/push'
 7 | import Elastic from './Menu/elastic'
 8 | import FallDown from './Menu/fallDown'
 9 | import PushRotate from './Menu/pushRotate'
10 | import Stack from './Menu/stack'
11 | import ScaleRotate from './Menu/scaleRotate'
12 | import ScaleDown from './Menu/scaleDown'
13 | import Menu from './Menu'
14 | 
15 | export default {
16 |     Menu,
17 |     Slide,
18 |     Bubble,
19 |     Reveal,
20 |     Push,
21 |     PushRotate,
22 |     ScaleDown,
23 |     ScaleRotate,
24 |     Stack,
25 |     FallDown,
26 |     Elastic
27 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     css: {
 3 |         extract: false
 4 |     },
 5 |     configureWebpack: {
 6 |         output: {
 7 |             libraryExport: 'default'
 8 |         }
 9 |     }
10 | }
11 | 
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------