#6797: Fix initial sidenav handling on smaller screens

netbox-community · Aug 5, 2021 · 7608ee8 · 7608ee8
1 parent da67a35
commit 7608ee8
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html
@@ -80,20 +80,25 @@
     {# Additional <head> content #}
     {% block head %}{% endblock %}
   </head>
-  
+
   <body>
     <script type="text/javascript">
       (function() {
         // Check localStorage to see if the sidebar should be pinned.
         var sideNavRaw = localStorage.getItem('netbox-sidenav');
+        // Determine if the device has a small screeen. This media query is equivalent to
+        // bootstrap's media-breakpoint-down(lg) breakpoint mixin, which is what the sidenav's
+        // CSS uses.
+        var isSmallScreen = window.matchMedia('(max-width: 991.98px)').matches;
         if (typeof sideNavRaw === 'string') {
           var sideNavState = JSON.parse(sideNavRaw);
-          if (sideNavState.pinned === true) {
-            // If the sidebar should be pinned, set the appropriate body attributes prior to the
-            // rest of the content rendering. This prevents jumpy/glitchy behavior on page reloads.
+          if (sideNavState.pinned === true && !isSmallScreen) {
+            // If the sidebar should be pinned and this is not a small screen, set the appropriate
+            // body attributes prior to the rest of the content rendering. This prevents
+            // jumpy/glitchy behavior on page reloads.
             document.body.setAttribute('data-sidenav-pinned', '');
             document.body.setAttribute('data-sidenav-show', '');
-          } else if (sideNavState.pinned === false) {
+          } else {
             document.body.setAttribute('data-sidenav-hidden', '');
           }
         }