Sidebar responsive

app/assets/sass/partials/_sidebar.scss

@@ -98,6 +98,57 @@ body.dashboard {
         }
     }
 
+    // Sidebar media queries
+    @media (max-width: $screen-sm-max) {
+        .sidebar {
+            width: 80px;
+            .sidebar-inner {
+                .profile .avatar img {
+                    width: 40px;
+                }
+                .profile .username {
+                    @extend .hidden-xs;
+                    @extend .hidden-sm;
+                }
+                .quick-add-incident {
+                    .btn {
+                        padding: 3px 6px;
+                    }
+                    i {
+                        @extend .visible-xs;
+                        @extend .visible-sm;
+                        font-size: 20px;
+                    }
+                    span {
+                        @extend .hidden-xs;
+                        @extend .hidden-sm;
+                    }
+                }
+                & > ul > li > a {
+                    text-align: center;
+                    & > i {
+                        font-size: 25px;
+                    }
+                    & > span {
+                        @extend .hidden-xs;
+                        @extend .hidden-sm;
+                    }
+                }
+            }
+            .bottom-menu-sidebar {
+                @extend .hidden-xs;
+                @extend .hidden-sm;
+            }
+        }
+    }
+
+    // Sidebar media queries
+    @media (max-width: $screen-sm-max) {
+        .sidebar {
+            @extend .hidden-xs;
+        }
+    }
+
     .sub-sidebar {
         left: 0;
         top: 0;
@@ -147,5 +198,9 @@ body.dashboard {
             padding: 24px 50px;
             padding-bottom: 80px;
         }
+
+        @media (max-width: $screen-sm-max) {
+
+        }
     }
 }

app/views/partials/dashboard/sidebar.blade.php

@@ -20,18 +20,21 @@
         <div class="clearfix"></div>
         <div class="quick-add-incident">
             <a class="btn btn-block btn-default uppercase" href="{{ route('dashboard.incidents.add') }}">
-                {{ trans('cachet.dashboard.incident-add') }}
+                <i class="icon ion-android-checkmark-circle visible-sm"></i>
+                <span class="hidden-sm">{{ trans('cachet.dashboard.incident-add') }}</span>
             </a>
         </div>
         <ul>
             <li {{ set_active('dashboard') }}>
                 <a href="{{ route('dashboard') }}">
-                    <i class="icon ion-speedometer"></i> {{ trans('cachet.dashboard.dashboard') }}
+                    <i class="icon ion-speedometer"></i>
+                    <span>{{ trans('cachet.dashboard.dashboard') }}</span>
                 </a>
             </li>
             <li {{ set_active('dashboard/incidents*') }}>
                 <a href="{{ route('dashboard.incidents') }}">
-                    <i class="icon ion-android-alert"></i> {{ trans('cachet.dashboard.incidents') }}
+                    <i class="icon ion-android-alert"></i>
+                    <span>{{ trans('cachet.dashboard.incidents') }}</span>
                 </a>
             </li>
             {{-- <li {{ set_active('dashboard/incidents/templates') }}>
@@ -41,7 +44,8 @@
             </li> --}}
             <li {{ set_active('dashboard/components*') }}>
                 <a href="{{ route('dashboard.components') }}">
-                    <i class="icons ion-ios-keypad"></i> {{ trans('cachet.dashboard.components') }}
+                    <i class="icons ion-ios-keypad"></i>
+                    <span>{{ trans('cachet.dashboard.components') }}</span>
                 </a>
             </li>
             {{-- <li {{ set_active('dashboard/metrics') }}>
@@ -56,7 +60,10 @@
             </li> --}}
             <li {{ set_active('dashboard/settings*') }}>
                 <a href="{{ route('dashboard.settings.setup') }}">
-                    <i class="icon ion-gear-a"></i> {{ trans('cachet.dashboard.settings') }}
+                    <i class="icon ion-gear-a"></i>
+                    <span>
+                        {{ trans('cachet.dashboard.settings') }}
+                    </span>
                 </a>
             </li>
         </ul>

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "css/all.css": "css/all-84f50550.css",
+  "css/all.css": "css/all-e8d268bb.css",
   "js/all.js": "js/all-8dfe8cf3.js"
 }