fix autocollapse sidebar #531

Gemfile.lock

@@ -281,6 +281,7 @@ GEM
     mime-types-data (3.2022.0105)
     mini_magick (4.11.0)
     mini_mime (1.1.2)
+    mini_portile2 (2.8.0)
     minitest (5.16.3)
     msgpack (1.5.6)
     multi_json (1.15.0)
@@ -289,6 +290,9 @@ GEM
       ruby2_keywords (~> 0.0.1)
     nesty (1.0.2)
     nio4r (2.5.8)
+    nokogiri (1.13.8)
+      mini_portile2 (~> 2.8.0)
+      racc (~> 1.4)
     nokogiri (1.13.8-arm64-darwin)
       racc (~> 1.4)
     nokogiri (1.13.8-x86_64-darwin)
@@ -468,6 +472,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-21
+  ruby
   x86_64-darwin-21
   x86_64-linux
 

app/assets/javascripts/admin/commons/nav.js

+function autoCollapseSidebar() {
+  var sidebar = document.querySelector('#sidebar[data-auto-collapsed]');
+  if (sidebar && window.innerWidth >= 992) {
+    sidebar.classList.add('collapsed');
+    sidebar.removeAttribute('data-auto-collapsed');
+  }
+}
+
+window.addEventListener('DOMContentLoaded', function () {
+  'use strict';
+  autoCollapseSidebar();
+});

app/assets/stylesheets/admin/appstack.sass

@@ -24,3 +24,8 @@ main.content
 
 .alert
     padding: .95rem
+
+.sidebar[data-auto-collapsed]
+    @include media-breakpoint-up(lg)
+        transition-duration: 0s
+        margin-left: -260px

app/views/admin/application/_nav.html.erb

 <% if current_user.can_display_global_menu? %>
-  <nav id="sidebar" class="sidebar<%= ' collapsed' if @menu_collapsed %>">
+  <nav id="sidebar" class="sidebar" <%= 'data-auto-collapsed' if @menu_collapsed %>>
     <div class="sidebar-content js-simplebar">
       <%= link_to admin_root_path, class: 'sidebar-brand' do %>
         <%= image_tag 'osuny-white.svg', class: 'img-fluid' %>