Initial

listify-client/src/app/app.ts

@@ -0,0 +1,47 @@
+import { Component, inject, signal } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { map } from 'rxjs';
+import { AuthService } from './auth/auth.service';
+
+@Component({
+  selector: 'app-root',
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatSidenavModule,
+    MatToolbarModule,
+  ],
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
+})
+export class App {
+  protected readonly auth = inject(AuthService);
+  private readonly breakpointObserver = inject(BreakpointObserver);
+
+  protected readonly isCompact = toSignal(
+    this.breakpointObserver.observe('(max-width: 800px)').pipe(map((state) => state.matches)),
+    { initialValue: false },
+  );
+  protected readonly sidebarOpened = signal(false);
+
+  protected toggleSidebar(): void {
+    this.sidebarOpened.update((opened) => !opened);
+  }
+
+  protected closeSidebarOnCompact(): void {
+    if (this.isCompact()) {
+      this.sidebarOpened.set(false);
+    }
+  }
+}