Created bootstrap breakpoint class

app/assets/javascripts/application.js.coffee

@@ -256,35 +256,15 @@ $ ->
           $('.right-sidebar')
             .hasClass('right-sidebar-collapsed'), { path: '/' })
 
-  bootstrapBreakpoint = undefined;
-  checkBootstrapBreakpoints = ->
-    if $('.device-xs').is(':visible')
-      bootstrapBreakpoint = "xs"
-    else if $('.device-sm').is(':visible')
-      bootstrapBreakpoint = "sm"
-    else if $('.device-md').is(':visible')
-      bootstrapBreakpoint = "md"
-    else if $('.device-lg').is(':visible')
-      bootstrapBreakpoint = "lg"
-
-  setBootstrapBreakpoints = ->
-    if $('.device-xs').length
-      return
-
-    $("body")
-      .append('<div class="device-xs visible-xs"></div>'+
-        '<div class="device-sm visible-sm"></div>'+
-        '<div class="device-md visible-md"></div>'+
-        '<div class="device-lg visible-lg"></div>')
-    checkBootstrapBreakpoints()
-
   fitSidebarForSize = ->
     oldBootstrapBreakpoint = bootstrapBreakpoint
     checkBootstrapBreakpoints()
+    bootstrapBreakpoint = breakpoints.getBreakpointSize()
     if bootstrapBreakpoint != oldBootstrapBreakpoint
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
   checkInitialSidebarSize = ->
+    bootstrapBreakpoint = breakpoints.getBreakpointSize()
     if bootstrapBreakpoint is "xs" or "sm"
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
@@ -293,6 +273,7 @@ $ ->
     .on "resize", (e) ->
       fitSidebarForSize()
 
-  setBootstrapBreakpoints()
   checkInitialSidebarSize()
+  breakpoints = new Breakpoints()
+  bootstrapBreakpoint = breakpoints.getBreakpointSize()
   new Aside()

app/assets/javascripts/breakpoints.coffee

+class @Breakpoints
+  BREAKPOINTS = ["xs", "sm", "md", "lg"]
+
+  constructor: ->
+    @setup()
+
+  setup: ->
+    allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
+      ".device-#{breakpoint}"
+
+    if $(allDeviceSelector.join(",")).length
+      return
+
+    # Create all the elements
+    $.each BREAKPOINTS, (i, breakpoint) ->
+      $("body").append "<div class='device-#{breakpoint} visible-#{breakpoint}'></div>"
+
+  getBreakpointSize: ->
+    allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
+      ".device-#{breakpoint}"
+
+    $visibleDevice = $(allDeviceSelector.join(",")).filter(":visible")
+    
+    return $visibleDevice.attr("class").split("visible-")[1]

app/assets/javascripts/sidebar.js.coffee

-mobileWidth = 768
+mobileWidth = 991
 collapsed = 'page-sidebar-collapsed'
 expanded = 'page-sidebar-expanded'
 
@@ -21,6 +21,9 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
 )
 
 $ ->
-  if $(window).width() < mobileWidth
+  breakpoints = new Breakpoints()
+  size = breakpoints.getBreakpointSize()
+
+  if size is "xs" or size is "sm"
     if $('.page-with-sidebar').hasClass(expanded)
       toggleSidebar()

app/assets/stylesheets/framework/header.scss

@@ -141,22 +141,18 @@ header {
   margin-left: $sidebar_collapsed_width;
 }
 
-@media (max-width: $screen-sm-min) {
-  .header-collapsed {
-    margin-left: $sidebar_collapsed_width;
-  }
+.header-collapsed {
+  margin-left: $sidebar_collapsed_width;
 
-  .header-expanded {
-    margin-left: $sidebar_collapsed_width;
+  @media (min-width: $screen-sm-max) {
+    @include collapsed-header;
   }
 }
 
-@media(min-width: $screen-sm-min) {
-  .header-collapsed {
-    @include collapsed-header;
-  }
+.header-expanded {
+  margin-left: $sidebar_collapsed_width;
 
-  .header-expanded {
+  @media (min-width: $screen-sm-max) {
     margin-left: $sidebar_width;
   }
 }

app/assets/stylesheets/framework/sidebar.scss

@@ -205,7 +205,7 @@
 @mixin expanded-sidebar {
   padding-left: $sidebar_collapsed_width;
 
-  @media (min-width: $screen-sm-min) {
+  @media (min-width: $screen-sm-max) {
     padding-left: $sidebar_width;
   }