├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    └── SidebarOffCanvas.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Norbert
 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-offcanvas-simple
 2 | A basic vuejs off canvas sidebar component
 3 | 
 4 | ## Installation
 5 | 
 6 | ```
 7 | $ npm install vue-offcanvas-simple --save
 8 | ```
 9 | 
10 | 
11 | ## Examples
12 | 
13 | ```vue
14 | <template>
15 |   <div>
16 |     <off-canvas v-model="show" :width="300" :duration=".5" effect="ease-in-out" @sidebarWasClosed="show = $event">
17 |         Sidebar Content goes here
18 |     </off-canvas>
19 |     <div>
20 |           <button @click="show = !show">Toggle</button><button @click="show = false">Close</button>
21 |           <p>{{ show }}</p>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import offCanvas from 'vue-offcanvas-simple/src/SidebarOffCanvas.vue'
28 | 
29 | export default {
30 |   data() {
31 |     return {
32 |       show: false
33 |     }
34 |   },
35 |   components: {
36 |     offCanvas
37 |   }
38 | }
39 | </script>
40 | 
41 | ```
42 | 
43 | ## Badges
44 | 
45 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
46 | ![](https://img.shields.io/badge/status-stable-green.svg)
47 | 
48 | ---
49 | 
50 | 
51 | > GitHub [@norbert989](https://github.com/norbert989)
52 | 
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-offcanvas-simple",
 3 |   "version": "1.0.1",
 4 |   "description": "a simple off canvas sidebar for use in vuejs 2.0 projects",
 5 |   "main": "src/SidebarOffCanvas.vue",
 6 |   "peerDependencies": {
 7 |     "vue": ">=2"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/norbert989/vue-offcanvas-simple.git"
12 |   },
13 |   "keywords": [
14 |     "vuejs",
15 |     "sidebar",
16 |     "vuejs",
17 |     "off",
18 |     "canvas"
19 |   ],
20 |   "author": "NPM Norbert Nagy <norbertnadj@gmail.com>",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/norbert989/vue-offcanvas-simple/issues"
24 |   },
25 |   "homepage": "https://github.com/norbert989/vue-offcanvas-simple#readme"
26 | }
27 | 


--------------------------------------------------------------------------------
/src/SidebarOffCanvas.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sidebar"
  3 |     style="position: fixed; top: 0; bottom: 0; height: 100vh;"
  4 |     :style="[setHorizontal, { 'width': width + 'px', 'transform': translateWidth }]">
  5 |     <slot v-if="visible"></slot>
  6 |   </div>
  7 | </template>
  8 | 
  9 | <script>
 10 | import Vue from 'vue'
 11 | 
 12 | export default {
 13 |   data() {
 14 |     return {
 15 |       visible: false
 16 |     }
 17 |   },
 18 |   props: {
 19 |     value: {
 20 |       type: Boolean
 21 |     },
 22 | 
 23 |     align: {
 24 |       type: String,
 25 |       default: 'left'
 26 |     },
 27 | 
 28 |     width: {
 29 |       type: Number,
 30 |       default: 270
 31 |     },
 32 | 
 33 |     duration: {
 34 |       type: Number,
 35 |       default: 0.2
 36 |     },
 37 | 
 38 |     effect: {
 39 |       type: String,
 40 |       default: 'linear'
 41 |     }
 42 |   },
 43 | 
 44 |   watch: {
 45 |     'value' (val) {
 46 |       setTimeout(() => this.toggle(val))
 47 |     }
 48 |   },
 49 | 
 50 |   computed: {
 51 |     setHorizontal() {
 52 |       return this.align === 'right' ? { right: 0 } : { left: 0 }
 53 |     },
 54 | 
 55 |     translateWidth() {
 56 |       return this.align === 'right' ? 'translateX('+this.width+'px)' : 'translateX(-'+this.width+'px)'
 57 |     }
 58 |   },
 59 | 
 60 |   methods: {
 61 |     setupBody() {
 62 |       let timingFunction = ''
 63 | 
 64 |       switch(this.effect) {
 65 |         case 'bounce':
 66 |           timingFunction = 'cubic-bezier(0, 1.1, 0.8, 1.1)'
 67 |           break
 68 | 
 69 |         default:
 70 |           timingFunction = this.effect
 71 |           break
 72 |       }
 73 |       document.body.style.transition = 'transform '+this.duration+'s '+timingFunction
 74 | 
 75 |     },
 76 | 
 77 |     clickOutside(e) {
 78 |       if(!this.$el.contains(e.target) && this.visible) {
 79 |         this.$emit('sidebarWasClosed', false)
 80 |         this.toggle(false)
 81 |       }
 82 |     },
 83 | 
 84 |     esc(e) {
 85 |       if(e.keyCode === 27) {
 86 |         this.$emit('sidebarWasClosed', false)
 87 |         return this.toggle(false)
 88 |       }
 89 |     },
 90 | 
 91 |     toggle(show) {
 92 |       if(show) {
 93 |         document.addEventListener('click', this.clickOutside)
 94 |         document.addEventListener('keydown', this.esc)
 95 | 
 96 |         document.body.style.transform = this.align === 'right' ? 'translateX(-'+this.width+'px)' : 'translateX('+this.width+'px)'
 97 |         this.setupBody()
 98 |         this.visible = true
 99 |       } else {
100 |         document.body.style.transform = 'translateX(0)'
101 |         setTimeout(() => this.visible = false, this.duration * 500)
102 |       }
103 |     }
104 |   }
105 | }
106 | </script>
107 | 
108 | <style lang="css" scoped>
109 |   .sidebar {
110 |     overflow-y: scroll;
111 |   }
112 | </style>
113 | 


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