Просмотр исходного кода

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 17 часов назад
Родитель
Сommit
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 {

Некоторые файлы не были показаны из-за большого количества измененных файлов