bug fixes for sidebar

src/components/sidebar/Sidebar.vue

@@ -19,6 +19,11 @@
     mixins: [Toggleable],
 
     props: {
+      closeOnClick: {
+        type: Boolean,
+        default: true
+      },
+
       drawer: Boolean,
 
       fixed: Boolean,
@@ -38,6 +43,11 @@
         default: true
       },
 
+      mobileBreakPoint: {
+        type: Number,
+        default: 768
+      },
+
       items: {
         type: Array,
         default: () => []
@@ -49,10 +59,11 @@
     computed: {
       classes () {
         return {
-          'sidebar--mobile': this.mobile,
-          'sidebar--fixed': this.fixed && !this.right,
-          'sidebar--fixed-right': this.fixed && this.right,
           'sidebar--close': !this.active,
+          'sidebar--drawer': this.drawer,
+          'sidebar--fixed': this.fixed || this.drawer,
+          'sidebar--fixed-right': this.fixed && this.right,
+          'sidebar--mobile': this.mobile,
           'sidebar--open': this.active
         }
       },
@@ -80,13 +91,16 @@
 
     methods: {
       resize () {
-        if (!this.drawer) {
-          this.active = window.innerWidth >= 672
+        if (this.mobile && !this.drawer) {
+          this.active = window.innerWidth > this.mobileBreakPoint
         }
       },
 
       itemClicked () {
-        if (window.innerWidth < 672 && !this.drawer) {
+        if (
+          (window.innerWidth < this.mobileBreakPoint && this.mobile && this.closeOnClick)
+          || (this.drawer && this.closeOnClick)
+        ) {
           this.active = false
         }
       },
@@ -98,7 +112,8 @@
           || e.target === this.$el
           || this.$el.contains(e.target)
           || this.activator.contains(e.target)
-          || (window.innerWidth >= 672 && !this.drawer)
+          || (window.innerWidth >= this.mobileBreakPoint && !this.drawer)
+          || !this.closeOnClick
         ) {
           return
         }

src/components/sidebar/SidebarItem.vue

@@ -26,28 +26,12 @@
 
 <script>
   import { closest } from '../../util/helpers'
+  import Itemable from '../../mixins/itemable'
 
   export default {
     name: 'sidebar-item',
 
-    props: {
-      item: {
-        type: Object,
-        default () {
-          return {
-            href: '#!',
-            text: '',
-            icon: false,
-            router: true
-          }
-        }
-      },
-
-      router: {
-        type: Boolean,
-        default: true
-      }
-    },
+    mixins: [Itemable],
 
     computed: {
       groupUid () {

src/directives/_index.js

@@ -11,5 +11,6 @@ export default {
   Modal,
   Ripple,
   SideBar,
+  sidebar: SideBar,
   Tooltip
 }

src/mixins/itemable.js

@@ -0,0 +1,17 @@
+export default {
+  props: {
+    item: {
+      type: Object,
+      default () {
+        return {
+          href: '#!',
+          text: '',
+          icon: false,
+          router: false
+        }
+      }
+    },
+
+    router: Boolean
+  }
+}

src/stylus/settings/_variables.styl

@@ -26,10 +26,10 @@ $color-pack := true
 // Grid
 // ============================================================
 $grid-breakpoints := {
-  xs: 0rem
-  sm: 48rem
-  md: 64rem
-  lg: 75rem
+  xs: 0
+  sm: 576px
+  md: 768px
+  lg: 992px
 }
 $container-max-widths := {
   sm: $grid-breakpoints.sm * .9,

src/stylus/trumps/_app.styl

@@ -30,7 +30,7 @@
       padding-left: $sidebar-width
       transition: $primary-transition
 
-      @media screen and (max-width: $grid-breakpoints.sm)
+      @media screen and (max-width: $grid-breakpoints.md)
         padding-left: 0
 
   &.left-sidebar
@@ -50,5 +50,5 @@
       padding-right: $sidebar-width
       transition: $primary-transition
 
-      @media screen and (max-width: $grid-breakpoints.sm)
+      @media screen and (max-width: $grid-breakpoints.md)
         padding-right: 0

src/stylus/trumps/_display.styl

@@ -1,8 +1,13 @@
 for size, width in $grid-breakpoints
-  @media screen and (min-width: width)
-    .hidden-{size}-and-up
-      display: none !important
+  .hidden
+    &-{size}-and-up
+      display: none
 
-  @media screen and (max-width: width)
-    .hidden-{size}-and-down
-      display: none !important
+      @media screen and (max-width: width)
+        display: initial !important
+
+    &-{size}-and-down
+      display: none
+
+      @media screen and (min-width: width)
+        display: initial !important