feat(theme:layout-default): collapsed aside when screen is small (#1868)

cipchk · web-flow · commit 983cedb37daa · 2025-01-19T11:39:48.000+08:00
diff --git a/packages/theme/layout-default/layout.service.ts b/packages/theme/layout-default/layout.service.ts
@@ -1,4 +1,6 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { Injectable, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 import { SettingsService } from '@delon/theme';
@@ -38,6 +40,18 @@ export class LayoutDefaultService {
     return `menu-${type}`;
   }
 
+  constructor(bm: BreakpointObserver) {
+    const mobileMedia = 'only screen and (max-width: 767.99px)';
+    bm.observe(mobileMedia)
+      .pipe(takeUntilDestroyed())
+      .subscribe(state => this.checkMedia(state.matches));
+    this.checkMedia(bm.isMatched(mobileMedia));
+  }
+
+  private checkMedia(value: boolean): void {
+    this.settings.setLayout('collapsed', value);
+  }
+
   private notify(): void {
     this._options$.next(this._options);
   }
diff --git a/src/dev/layout.component.ts b/src/dev/layout.component.ts
@@ -119,7 +119,7 @@ export class DevLayoutComponent implements OnInit {
     logoExpanded: `./assets/logo-full.svg`,
     logoCollapsed: `./assets/logo.svg`,
     hideHeader: false,
-    showHeaderCollapse: false,
+    showHeaderCollapse: true,
     showSiderCollapse: true
     // hideAside: true
   };
