diff --git a/Gemfile.lock b/Gemfile.lock
index c6465bb47d02e0e5971332c39d37a189375dcc67..f53d1e5885dcc66fb41389fbd116774fb318a5e1 100644
--- a/Gemfile.lock
+++ b/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
 
diff --git a/app/assets/javascripts/admin/commons/nav.js b/app/assets/javascripts/admin/commons/nav.js
new file mode 100644
index 0000000000000000000000000000000000000000..ae6b7b8ecc8fb15adf147cffbca3447958c6c1c0
--- /dev/null
+++ b/app/assets/javascripts/admin/commons/nav.js
@@ -0,0 +1,12 @@
+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();
+});
diff --git a/app/assets/stylesheets/admin/appstack.sass b/app/assets/stylesheets/admin/appstack.sass
index f840f4a3c9fb55df1316d459568114c41148bd0c..b319a29efa4824c21a923a42cb4d4dcc955e4a4c 100644
--- a/app/assets/stylesheets/admin/appstack.sass
+++ b/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
diff --git a/app/views/admin/application/_nav.html.erb b/app/views/admin/application/_nav.html.erb
index 147fc55253291a3f90850521a67cb1186fffc187..a3287598e602b741f480f752dc3a7201ad785cd1 100644
--- a/app/views/admin/application/_nav.html.erb
+++ b/app/views/admin/application/_nav.html.erb
@@ -1,5 +1,5 @@
 <% 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' %>