mobile view

src/app/widget-modules/components/sidebar/sidebar.component.html

@@ -1,8 +1,11 @@
-<button class="sidebar-toggle" (click)="toggle()" [attr.aria-expanded]="!collapsed" aria-label="Sidebar umschalten" mat-icon-button type="button">
+<button (click)="toggle()" [attr.aria-expanded]="!collapsed" aria-label="Sidebar umschalten" class="sidebar-toggle" mat-icon-button type="button">
   <fa-icon [icon]="collapsed ? closedIcon : openIcon"></fa-icon>
 </button>
+@if (!collapsed) {
+<button (click)="close()" aria-label="Sidebar schließen" class="sidebar-backdrop" tabindex="-1" type="button"></button>
+}
 <aside [class.collapsed]="collapsed">
-  <div class="sidebar-toggle-placeholder" aria-hidden="true"></div>
+  <div aria-hidden="true" class="sidebar-toggle-placeholder"></div>
   <div class="sidebar-body">
     <ng-content select="[sidebar]"></ng-content>
   </div>

src/app/widget-modules/components/sidebar/sidebar.component.less

@@ -2,6 +2,7 @@
   --sidebar-width: 300px;
   --sidebar-toggle-size: 48px;
   --sidebar-toggle-offset: 12px;
+  --sidebar-mobile-width: min(92vw, 360px);
   display: grid;
   width: 100%;
   max-width: 100%;
@@ -24,13 +25,14 @@
   left: var(--sidebar-toggle-offset);
   z-index: 11;
   color: var(--icon-button-color);
-  background: transparent;
+  background: var(--surface-strong);
   box-shadow: none;
+  border-radius: 999px;
 }
 
 :host.collapsed .sidebar-toggle {
-  --icon-button-color: var(--text-inverse);
+  --icon-button-color: var(--text);
-  --icon-button-hover-color: var(--text-inverse);
+  --icon-button-hover-color: var(--primary-active);
 }
 
 .sidebar-toggle fa-icon {
@@ -41,6 +43,10 @@
   color: var(--icon-button-hover-color);
 }
 
+.sidebar-backdrop {
+  display: none;
+}
+
 aside {
   width: var(--sidebar-width);
   height: calc(100vh - 50px);
@@ -76,3 +82,45 @@ aside.collapsed {
   width: 100%;
   padding: 0;
 }
+
+@media screen and (max-width: 1100px) {
+  :host,
+  :host.collapsed {
+    display: block;
+    grid-template-columns: none;
+  }
+
+  .sidebar-toggle {
+    top: calc(50px + 8px);
+    left: 12px;
+    right: auto;
+    z-index: 13;
+  }
+
+  .sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 50px 0 0 0;
+    z-index: 11;
+    border: 0;
+    padding: 0;
+    background: rgba(0, 0, 0, 0.32);
+  }
+
+  aside {
+    width: var(--sidebar-mobile-width);
+    max-width: 100%;
+    z-index: 12;
+    backdrop-filter: blur(10px);
+  }
+
+  aside.collapsed {
+    transform: translateX(calc(-1 * var(--sidebar-mobile-width)));
+  }
+
+  .content {
+    grid-column: auto;
+    width: 100%;
+    padding-top: calc(var(--sidebar-toggle-size) + 6px);
+  }
+}

src/app/widget-modules/components/sidebar/sidebar.component.spec.ts

@@ -19,4 +19,14 @@ describe('SidebarComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should toggle and close the sidebar', () => {
+    expect(component.collapsed).toBeTrue();
+
+    component.toggle();
+    expect(component.collapsed).toBeFalse();
+
+    component.close();
+    expect(component.collapsed).toBeTrue();
+  });
 });

src/app/widget-modules/components/sidebar/sidebar.component.ts

@@ -20,4 +20,8 @@ export class SidebarComponent {
   public toggle(): void {
     this.collapsed = !this.collapsed;
   }
+
+  public close(): void {
+    this.collapsed = true;
+  }
 }