Fixed #36529 -- Added support for the admin navigation sidebar on mobile screens.

Antoliny0919 · Antoliny0919 · commit e9a6058d6ce2 · 2025-08-28T17:00:24.000+09:00
diff --git a/django/contrib/admin/static/admin/css/nav_sidebar.css b/django/contrib/admin/static/admin/css/nav_sidebar.css
@@ -117,13 +117,18 @@
 }
 
 @media (max-width: 767px) {
-    #nav-sidebar, #toggle-nav-sidebar {
-        display: none;
+    #container > .main.shifted {
+        overflow-x: hidden;
+        flex: 0 1 auto;
     }
 
-    .main > #nav-sidebar + .content,
-    .main.shifted > #nav-sidebar + .content {
-        max-width: 100%;
+    .main.shifted #nav-sidebar {
+        flex: none;
+    }
+
+    #nav-sidebar {
+        width: calc(100% - 23px);
+        height: 100%;
     }
 }
 
diff --git a/django/contrib/admin/static/admin/js/nav_sidebar.js b/django/contrib/admin/static/admin/js/nav_sidebar.js
@@ -2,9 +2,10 @@
 {
     const toggleNavSidebar = document.getElementById('toggle-nav-sidebar');
     if (toggleNavSidebar !== null) {
+        const isMobile = window.innerWidth <= 768;
         const navSidebar = document.getElementById('nav-sidebar');
         const main = document.getElementById('main');
-        let navSidebarIsOpen = localStorage.getItem('django.admin.navSidebarIsOpen');
+        let navSidebarIsOpen = isMobile ? false : localStorage.getItem('django.admin.navSidebarIsOpen');
         if (navSidebarIsOpen === null) {
             navSidebarIsOpen = 'true';
         }
diff --git a/tests/admin_views/test_nav_sidebar.py b/tests/admin_views/test_nav_sidebar.py
@@ -232,3 +232,40 @@ def test_sidebar_filter_persists(self):
         filter_input = self.selenium.find_element(By.CSS_SELECTOR, "#nav-filter")
         filter_input.send_keys("users")
         self.assertEqual(self.selenium.execute_script(filter_value_script), "users")
+
+    def test_sidebar_state_ignore_on_mobile(self):
+        from selenium.webdriver.common.by import By
+
+        def get_nav_sidebar():
+            return self.selenium.find_element(By.ID, "nav-sidebar")
+
+        def get_users_link():
+            return self.selenium.find_element(By.CSS_SELECTOR, "#auth-user a")
+
+        self.selenium.get(
+            self.live_server_url + reverse("test_with_sidebar:auth_user_changelist")
+        )
+        with self.mobile_size():
+            self.assertIsNone(
+                self.selenium.execute_script(
+                    "return localStorage.getItem('django.admin.navSidebarIsOpen')"
+                )
+            )
+            users_link = get_users_link()
+            users_link.click()
+            nav_sidebar = get_nav_sidebar()
+            self.assertFalse(nav_sidebar.is_displayed())
+            toggle_button = self.selenium.find_element(
+                By.CSS_SELECTOR, "#toggle-nav-sidebar"
+            )
+            toggle_button.click()
+            self.assertEqual(
+                self.selenium.execute_script(
+                    "return localStorage.getItem('django.admin.navSidebarIsOpen')"
+                ),
+                "true",
+            )
+            users_link = get_users_link()
+            users_link.click()
+            nav_sidebar = get_nav_sidebar()
+            self.assertFalse(nav_sidebar.is_displayed())

Original file line number	Diff line number	Diff line change
`@@ -117,13 +117,18 @@`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`@media (max-width: 767px) {`
`120`		`- #nav-sidebar, #toggle-nav-sidebar {`
`121`		`- display: none;`
	`120`	`+ #container > .main.shifted {`
	`121`	`+ overflow-x: hidden;`
	`122`	`+ flex: 0 1 auto;`
`122`	`123`	`}`
`123`	`124`
`124`		`- .main > #nav-sidebar + .content,`
`125`		`- .main.shifted > #nav-sidebar + .content {`
`126`		`- max-width: 100%;`
	`125`	`+ .main.shifted #nav-sidebar {`
	`126`	`+ flex: none;`
	`127`	`+ }`
	`128`	`+`
	`129`	`+ #nav-sidebar {`
	`130`	`+ width: calc(100% - 23px);`
	`131`	`+ height: 100%;`
`127`	`132`	`}`
`128`	`133`	`}`
`129`	`134`
Original file line number	Diff line number	Diff line change
`@@ -2,9 +2,10 @@`
`2`	`2`	`{`
`3`	`3`	`const toggleNavSidebar = document.getElementById('toggle-nav-sidebar');`
`4`	`4`	`if (toggleNavSidebar !== null) {`
	`5`	`+ const isMobile = window.innerWidth <= 768;`
`5`	`6`	`const navSidebar = document.getElementById('nav-sidebar');`
`6`	`7`	`const main = document.getElementById('main');`
`7`		`- let navSidebarIsOpen = localStorage.getItem('django.admin.navSidebarIsOpen');`
	`8`	`+ let navSidebarIsOpen = isMobile ? false : localStorage.getItem('django.admin.navSidebarIsOpen');`
`8`	`9`	`if (navSidebarIsOpen === null) {`
`9`	`10`	`navSidebarIsOpen = 'true';`
`10`	`11`	`}`