├── .editorconfig
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── bili.config.js
├── examples
    ├── App.vue
    └── index.js
├── package.json
├── src
    ├── BurgerButton.styl
    └── BurgerButton.vue
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Settings for editors and IDEs.
 2 | # References at https://editorconfig.org/.
 3 | 
 4 | root = true
 5 | 
 6 | # Settings for any file.
 7 | [*]
 8 |   charset = utf-8
 9 |   end_of_line = lf
10 |   indent_size = 2
11 |   indent_style = space
12 |   insert_final_newline = true
13 |   trim_trailing_whitespace = true
14 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Treat as text when is possible and ensure Unix line-endings.
2 | * text=auto eol=lf
3 | 
4 | # Ignore differences on Yarn's lockfile.
5 | # Since version 1.0, Yarn automatically handle merge conflicts.
6 | yarn.lock -diff
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Finder settings files (Mac).
 2 | .DS_Store
 3 | 
 4 | # Node.js modules.
 5 | node_modules/
 6 | 
 7 | # NPM's lockfile.
 8 | # We're using Yarn and it provides it's own lockfile.
 9 | npm-lockfile.json
10 | 
11 | # Log files.
12 | *.log
13 | *.log.*
14 | 
15 | # Distribution sources dir.
16 | dist/
17 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright © 2018 Vitor Luiz Cavalcanti
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-burguer-button
  2 | 
  3 | A Vue burger button as functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower than 700b and CSS min+gzip is lower than 400b).
  4 | 
  5 | <img
  6 |   src="https://media.giphy.com/media/9P5hgfEqZzSy2VdHiY/giphy.gif"
  7 |   alt="BurgerButton GIF"
  8 |   title="A GIF shows BurgerButton toggle."
  9 |   style="display: block; margin: 0 auto;"
 10 | />
 11 | 
 12 | ## Installation
 13 | 
 14 | This module is published under NPM registry, so you can install from any package manager.
 15 | 
 16 | ```sh
 17 | npm install vue-burger-button --save
 18 | 
 19 | # Use the command bellow for Yarn.
 20 | yarn add vue-burger-button
 21 | ```
 22 | 
 23 | ## Usage
 24 | 
 25 | Import the BurgerButton component and its CSS.
 26 | 
 27 | ```vue
 28 | <template>
 29 |   <burger-button
 30 |     :active="isActive"
 31 |     @click="isActive = !isActive"
 32 |   />
 33 | </template>
 34 | 
 35 | <script>
 36 |   import BurgerButton from 'vue-burger-button';
 37 | 
 38 |   export default {
 39 |     components: { BurgerButton },
 40 |     data: () => ({ isActive: false })
 41 |   };
 42 | </script>
 43 | 
 44 | <style src="vue-burger-button/dist/vue-burger-button.css" />
 45 | ```
 46 | 
 47 | ### Usage as global component
 48 | 
 49 | If you need `<burger-button />` available everywhere, you can register it as a global component and don't forget to import its CSS.
 50 | 
 51 | ```js
 52 | import 'vue-burger-button/dist/vue-burger-button.css';
 53 | import Vue from 'vue';
 54 | import BurgerButton from 'vue-burger-button';
 55 | 
 56 | Vue.component('burger-button', BurgerButton);
 57 | ```
 58 | 
 59 | ### Usage from CDN
 60 | You can import burger button UMD module and CSS from Unpkg.
 61 | 
 62 | ```html
 63 | <!-- Import vue-burger-button CSS -->
 64 | <link rel="stylesheet" href="https://unpkg.com/vue-burger-button@0.1.0/dist/vue-burger-button.css" />
 65 | 
 66 | <!-- Import vue-burger-button UMD bundle -->
 67 | <script src="https://unpkg.com/vue@2.5.3"></script>
 68 | <script src="https://unpkg.com/vue-burger-button@0.1.0"></script>
 69 | 
 70 | <script>
 71 |   /**
 72 |    * vue-burger-button is available through VueBurgerButton.
 73 |    */
 74 |   console.dir(VueBurgerButton);
 75 | 
 76 |   /**
 77 |    * Vue.use will add burger button as global component.
 78 |    */
 79 |   Vue.component('burger-button', VueBurgerButton);
 80 | </script>
 81 | ```
 82 | 
 83 | ## Props
 84 | 
 85 | You can customize your burger button using props.
 86 | 
 87 | ```vue
 88 | <template>
 89 |   <burger-button
 90 |     :active="isActive"
 91 |     :bar-color="isActive ? 'red' : 'black'"
 92 |     :bar-height="15"
 93 |     :bar-width="120"
 94 |     @click="isActive = !isActive"
 95 |   />
 96 | </template>
 97 | ```
 98 | 
 99 | Name      | Type      | Default     | Description
100 | ----------|-----------|-------------|-----------------------------------------
101 | active    | `Boolean` | `false`     | If `true` it switches to a close button.
102 | barColor  | `String`  | `'#000000'` | Change the bars colors.
103 | barHeight | `Number`  | `10`        | Change the bars heights.
104 | barWidth  | `Number`  | `80`        | Change the bars widths.
105 | 
106 | ## Events
107 | 
108 | The burger button emits every `<button />` events. So, you can use `@click`, `@mouseover` etc.
109 | 
110 | ## License
111 | 
112 | Released under [MIT License](./LICENSE).
113 | 


--------------------------------------------------------------------------------
/bili.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { name } = require('./package.json');
 4 | const vue = require('rollup-plugin-vue').default;
 5 | const css = require('rollup-plugin-css-only');
 6 | 
 7 | module.exports = {
 8 |   input: 'src/BurgerButton.vue',
 9 |   banner: true,
10 |   format: ['umd', 'umd-min', 'cjs', 'es'],
11 |   filename: `${name}[suffix].js`,
12 |   moduleName: 'VueBurgerButton',
13 |   plugins: [
14 |     vue({ css: false }),
15 |     css({ output: `dist/${name}.css` })
16 |   ]
17 | };
18 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <p>Using default bar width and height.</p>
 4 | 
 5 |     <BurgerButton
 6 |       :active="isActive"
 7 |       @click="() => isActive = !isActive"
 8 |     />
 9 | 
10 |     <BurgerButton
11 |       :active="!isActive"
12 |       @click="() => isActive = !isActive"
13 |     />
14 |   </section>
15 | </template>
16 | 
17 | <script>
18 |   import BurgerButton from '../';
19 | 
20 |   export default {
21 |     components: { BurgerButton },
22 |     data: () => ({ isActive: false })
23 |   };
24 | </script>
25 | 
26 | <style src="../dist/vue-burger-button.css" />
27 | 


--------------------------------------------------------------------------------
/examples/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App';
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: (λ) => λ(App)
7 | });
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-burger-button",
 3 |   "description": "A Vue burger button as functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower than 700b and CSS min+gzip is lower than 400b).",
 4 |   "version": "0.1.2",
 5 |   "files": ["dist/"],
 6 |   "cdn": "dist/vue-burger-button.min.js",
 7 |   "main": "dist/vue-burger-button.cjs.js",
 8 |   "unpkg": "dist/vue-burger-button.min.js",
 9 |   "module": "dist/vue-burger-button.es.js",
10 |   "jsdelivr": "dist/vue-burger-button.min.js",
11 |   "umd:main": "dist/vue-burger-button.js",
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1",
14 |     "start": "poi examples/index.js",
15 |     "build": "bili"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/VitorLuizC/vue-burger-button.git"
20 |   },
21 |   "keywords": [
22 |     "vue-burger-button",
23 |     "burger-button",
24 |     "burger",
25 |     "vue-hamburger-button",
26 |     "hamburger-button",
27 |     "hamburger",
28 |     "vue-burger-menu",
29 |     "burger-menu",
30 |     "vue-hamburger-menu",
31 |     "hamburger-menu",
32 |     "vue-menu",
33 |     "menu",
34 |     "vue-button",
35 |     "vue-component",
36 |     "vue",
37 |     "button",
38 |     "stylus",
39 |     "javascript",
40 |     "bili",
41 |     "poi",
42 |     "front-end",
43 |     "frontend",
44 |     "web"
45 |   ],
46 |   "author": {
47 |     "name": "Vitor Luiz Cavalcanti",
48 |     "url": "https://vitorluizc.github.io/",
49 |     "email": "vitorluizc@outlook.com"
50 |   },
51 |   "license": "MIT",
52 |   "bugs": {
53 |     "url": "https://github.com/VitorLuizC/vue-burger-button/issues"
54 |   },
55 |   "homepage": "https://github.com/VitorLuizC/vue-burger-button#readme",
56 |   "devDependencies": {
57 |     "bili": "^3.1.2",
58 |     "poi": "^10.2.10",
59 |     "rollup-plugin-css-only": "^0.4.0",
60 |     "rollup-plugin-vue": "^4.3.2",
61 |     "stylus": "^0.54.5",
62 |     "stylus-loader": "^3.0.2"
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/BurgerButton.styl:
--------------------------------------------------------------------------------
 1 | .burguer-button
 2 |   &
 3 |     appearance: none
 4 |     display: flex
 5 |     flex-direction: column
 6 |     align-items: center
 7 |     justify-content: center
 8 |     padding-top: 0
 9 |     padding-left: 0
10 |     padding-right: 0
11 |     padding-bottom: 0
12 |     border-width: 0
13 |     border-style: none
14 |     border-color: transparent
15 |     background-image: none
16 |     background-color: transparent
17 |     outline: none
18 |     cursor: pointer
19 | 
20 |   > .bar
21 |     display: block
22 |     border-radius: 25px
23 |     background-color: #000000
24 |     transition: opacity .2s ease-in,
25 |                 transform .2s ease-out
26 | 
27 |   > .bar:nth-child(1)
28 |       transform: translateY(-75%)
29 | 
30 |   > .bar:nth-child(3)
31 |       transform: translateY(75%)
32 | 
33 |   &.-active
34 |     > .bar:nth-child(2)
35 |       opacity: 0
36 | 
37 |     > .bar:nth-child(1)
38 |       transform: translateY(100%) rotate(45deg)
39 | 
40 |     > .bar:nth-child(3)
41 |       transform: translateY(-100%) rotate(-45deg)
42 | 


--------------------------------------------------------------------------------
/src/BurgerButton.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <button
 3 |     v-bind="data.attrs"
 4 |     v-on="data.on"
 5 |     :aria-expanded="props.active ? 'true' : 'false'"
 6 |     :class="[
 7 |       'burguer-button',
 8 |       { '-active': props.active },
 9 |       data.staticClass,
10 |       data.class
11 |     ]"
12 |     :style="{
13 |       width: props.barWidth + 'px',
14 |       height: props.barHeight * 6 + 'px'
15 |     }"
16 |     aria-label="Menu"
17 |     aria-controls="navigation"
18 |   >
19 |     <span
20 |       class="bar"
21 |       v-for="index in 3"
22 |       :key="index"
23 |       :style="{
24 |         width: props.barWidth + 'px',
25 |         height: props.barHeight + 'px',
26 |         backgroundColor: props.barColor
27 |       }"
28 |     />
29 |   </button>
30 | </template>
31 | 
32 | <script>
33 |   export default {
34 |     name: 'BurgerButton',
35 |     props: {
36 |       active: Boolean,
37 |       barWidth: {
38 |         type: Number,
39 |         default: 80
40 |       },
41 |       barHeight: {
42 |         type: Number,
43 |         default: 10
44 |       },
45 |       barColor: {
46 |         type: String,
47 |         default: '#000000'
48 |       }
49 |     }
50 |   };
51 | </script>
52 | 
53 | <style src="./BurgerButton.styl" lang="stylus" />
54 | 


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