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


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkdillard/vue3-burger-menu/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mkdillard/vue3-burger-menu/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { h, createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp({
5 |   render: () => { return h(App) }
6 | }).mount('#app')
7 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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/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/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/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 | 


--------------------------------------------------------------------------------
/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.


--------------------------------------------------------------------------------
/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>vue3-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 vue3-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/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 | 


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


--------------------------------------------------------------------------------
/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/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.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.sideNav.$el.querySelector('.bm-menu');
54 |             set.style.transitionTimingFunction=null;
55 |             this.$emit("closeMenu")
56 |           }
57 |       }
58 |     };
59 | </script>
60 | 


--------------------------------------------------------------------------------
/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.sideNav.$el.querySelector('.bm-menu').style.overflowY = 'hidden';
34 |             this.bodyOldStyle = document.body.getAttribute('style') || '';
35 |             document.body.style.overflowX = 'hidden';
36 |             this.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.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.sideNav.$el.querySelector('.bm-menu').style.height='0px';
63 | 
64 |           }
65 |       },
66 |       mounted () {
67 |         this.sideNav.$el.querySelector('.bm-menu').style.height='0px';
68 |       }
69 |     };
70 | </script>
71 | 


--------------------------------------------------------------------------------
/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/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/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue3-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/vue3-burger-menu.svg?cacheSeconds=3600)](https://www.npmjs.com/package/vue3-burger-menu)
  4 | 
  5 | Updated to vue3 from the vue-burger-menu by Mohit Bajoria [`https://github.com/mbj36/vue-burger-menu`](https://github.com/mbj36/vue-burger-menu)
  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://vue3-burger-menu.netlify.app/
 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:8083`](http://localhost:8083) in a browser
 26 | 
 27 | ## Installation
 28 | 
 29 | ```
 30 | npm install vue3-burger-menu --save
 31 | ```
 32 | 
 33 | ```
 34 | yarn add vue3-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 'vue3-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 | ex:
147 | <template>
148 |   <button v-if="!isOpen" @click="isOpen=true">Open Menu</button>
149 |   <Slide :isOpen="isOpen" @closeMenu="isOpen = false">
150 | </template>
151 | 
152 | // Component
153 | data() {
154 |   return {
155 |     isOpen: false
156 |   }
157 | }
158 | 
159 | ```
160 | ### Menu events
161 | 
162 | 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
163 | 
164 | ```javascript
165 | // To bind the open and close events
166 | 
167 | <Slide
168 |   @openMenu="handleOpenMenu"
169 |   @closeMenu="handleCloseMenu"
170 | >
171 | ```
172 | ### Close on Outside Click
173 | 
174 | You can turn off the menu closing when an an outside click is triggered with `disableOutsideClick`.
175 | 
176 | ``` javascript
177 | <Slide disableOutsideClick>
178 | ```
179 | 
180 | ### Close on Escape
181 | 
182 | 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.
183 | 
184 | ``` javascript
185 | <Slide disableEsc />
186 | ```
187 | 
188 | ### Close on Navigation
189 | 
190 | 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.
191 | 
192 | ``` javascript
193 | <Slide :closeOnNavigation="true" />
194 | ```
195 | 
196 | ### Overlay
197 | 
198 | You can turn off the default overlay with `noOverlay`.
199 | 
200 | ``` javascript
201 | <Slide noOverlay />
202 | ```
203 | 
204 | ### Burger Icon and Cross Icon
205 | 
206 | 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
207 | 
208 | ```javascript
209 | <Slide :burgerIcon="false" :crossIcon="false"/>
210 | ```
211 | 
212 | ### Styling
213 | 
214 | Visual styles (color, font etc) need to be supplied with the help of CSS
215 | 
216 | #### CSS
217 | The component has following helper class
218 | 
219 | ```CSS
220 |  .bm-burger-button {
221 |       position: fixed;
222 |       width: 36px;
223 |       height: 30px;
224 |       left: 36px;
225 |       top: 36px;
226 |       cursor: pointer;
227 |     }
228 |     .bm-burger-bars {
229 |       background-color: #373a47;
230 |     }
231 |     .line-style {
232 |       position: absolute;
233 |       height: 20%;
234 |       left: 0;
235 |       right: 0;
236 |     }
237 |     .cross-style {
238 |       position: absolute;
239 |       top: 12px;
240 |       right: 2px;
241 |       cursor: pointer;
242 |     }
243 |     .bm-cross {
244 |       background: #bdc3c7;
245 |     }
246 |     .bm-cross-button {
247 |       height: 24px;
248 |       width: 24px;
249 |     }
250 |     .bm-menu {
251 |       height: 100%; /* 100% Full-height */
252 |       width: 0; /* 0 width - change this with JavaScript */
253 |       position: fixed; /* Stay in place */
254 |       z-index: 1000; /* Stay on top */
255 |       top: 0;
256 |       left: 0;
257 |       background-color: rgb(63, 63, 65); /* Black*/
258 |       overflow-x: hidden; /* Disable horizontal scroll */
259 |       padding-top: 60px; /* Place content 60px from the top */
260 |       transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
261 |     }
262 | 
263 |     .bm-overlay {
264 |       background: rgba(0, 0, 0, 0.3);
265 |     }
266 |     .bm-item-list {
267 |       color: #b8b7ad;
268 |       margin-left: 10%;
269 |       font-size: 20px;
270 |     }
271 |     .bm-item-list > * {
272 |       display: flex;
273 |       text-decoration: none;
274 |       padding: 0.7em;
275 |     }
276 |     .bm-item-list > * > span {
277 |       margin-left: 10px;
278 |       font-weight: 700;
279 |       color: white;
280 |     }
281 | ```
282 | 
283 | ## Browser Support
284 | 
285 | Chrome and Firefox have full support, but Safari and IE have strange behavior for some of the menus.
286 | 
287 | ## Author
288 | 
289 | &#169; [Mohit Bajoria](https://mbj36.xyz)
290 | 
291 | Updated to vue3 by Michael Dillard
292 | 
293 | ## License
294 | 
295 | [MIT](https://github.com/mbj36/vue3-burger-menu/blob/master/LICENSE)


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


--------------------------------------------------------------------------------
/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/vue3-burger-menu.svg" /> &emsp;
 31 |             <img src="https://img.shields.io/github/stars/mbj36/vue3-burger-menu.svg" />
 32 |             <h1>
 33 |                 <a href="https://github.com/mbj36/vue3-burger-menu">vue3-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 | 


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