From 9b54240010cad2e8170ada366b2bc70ee7b1688f Mon Sep 17 00:00:00 2001
From: Michael Small <michaelsmalldev@gmail.com>
Date: Mon, 6 Oct 2025 19:03:09 -0500
Subject: [PATCH] chore(demo): make sidenav collapsible

---
 apps/demo/src/app/app.component.html |  5 +++-
 apps/demo/src/app/app.component.ts   | 35 ++++++++++++++++++----------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
index a18faa3d..3dabc493 100644
--- a/apps/demo/src/app/app.component.html
+++ b/apps/demo/src/app/app.component.html
@@ -1,8 +1,11 @@
 <mat-toolbar color="primary">
+  <button matIconButton (click)="drawer.toggle()">
+    <mat-icon>menu</mat-icon>
+  </button>
   <span>NgRx Toolkit Demo</span>
 </mat-toolbar>
 <mat-drawer-container class="container">
-  <mat-drawer mode="side" opened>
+  <mat-drawer mode="side" #drawer [opened]="opened()">
     <mat-nav-list>
       <a mat-list-item routerLink="/todo">DevTools</a>
       <a mat-list-item routerLink="/flight-search">withRedux</a>
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
index 3437c545..0b2505d9 100644
--- a/apps/demo/src/app/app.component.ts
+++ b/apps/demo/src/app/app.component.ts
@@ -1,16 +1,15 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
-import {
-  MatDrawer,
-  MatDrawerContainer,
-  MatDrawerContent,
-} from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterLink, RouterOutlet } from '@angular/router';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'demo-root',
@@ -22,11 +21,9 @@ import { RouterLink, RouterOutlet } from '@angular/router';
     MatListModule,
     RouterLink,
     RouterOutlet,
-    CommonModule,
     MatToolbarModule,
-    MatDrawer,
-    MatDrawerContainer,
-    MatDrawerContent,
+    MatSidenavModule,
+    MatButtonModule,
   ],
   styles: `
     .container {
@@ -37,4 +34,18 @@ import { RouterLink, RouterOutlet } from '@angular/router';
     }
   `,
 })
-export class AppComponent {}
+export class AppComponent {
+  opened = toSignal(
+    inject(BreakpointObserver)
+      .observe([Breakpoints.XSmall, Breakpoints.Small])
+      .pipe(
+        map(
+          ({ breakpoints }) =>
+            !(
+              breakpoints[Breakpoints.XSmall] || breakpoints[Breakpoints.Small]
+            ),
+        ),
+      ),
+    { requireSync: true },
+  );
+}