瀏覽代碼

refactor(ui): Use matchMedia for desktop breakpoint detection

Replace hardcoded width check with Bootstrap's lg breakpoint (992px)
using matchMedia API. Adds constant with comment linking to navbar
configuration for maintainability.
Martin Hauser 16 小時之前
父節點
當前提交
105e58a433

文件差異過大導致無法顯示
+ 0 - 0
netbox/project-static/dist/netbox.js


文件差異過大導致無法顯示
+ 0 - 0
netbox/project-static/dist/netbox.js.map


+ 4 - 1
netbox/project-static/src/sidenav.ts

@@ -4,6 +4,9 @@ import { getElements, isElement } from './util';
 type NavState = { pinned: boolean };
 type BodyAttr = 'show' | 'hide' | 'hidden' | 'pinned';
 
+// Keep in sync with Bootstrap's `lg` breakpoint and `navbar-expand-lg` in base/layout.html.
+const SIDENAV_DESKTOP_MEDIA = '(min-width: 992px)';
+
 class SideNav {
   /**
    * Sidenav container element.
@@ -63,7 +66,7 @@ class SideNav {
       toggler.addEventListener('click', event => this.onMobileToggle(event));
     }
 
-    if (window.innerWidth >= 1200) {
+    if (window.matchMedia(SIDENAV_DESKTOP_MEDIA).matches) {
       if (this.state.get('pinned')) {
         this.pin();
       } else {

部分文件因文件數量過多而無法顯示