sidemenu song list

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

@@ -1,4 +1,4 @@
-<div [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
+<div @fade [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
   @if (closeLink && !fullscreen) {
   <button [routerLink]="closeLink" class="btn-close" mat-icon-button>
     <fa-icon [icon]="closeIcon"></fa-icon>

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

@@ -70,9 +70,10 @@
 }
 
 .btn-close {
+  --icon-button-color: var(--text-soft);
+  --icon-button-hover-color: var(--text);
   position: absolute;
   right: 10px;
   top: 15px;
   opacity: 0.7;
-  color: var(--text-soft);
 }

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

@@ -4,12 +4,14 @@ import {faTimes} from '@fortawesome/free-solid-svg-icons';
 import {MatIconButton} from '@angular/material/button';
 import {RouterLink} from '@angular/router';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {fade} from '../../../animations';
 
 @Component({
   selector: 'app-card',
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.less'],
   imports: [MatIconButton, RouterLink, FaIconComponent],
+  animations: [fade],
 })
 export class CardComponent {
   @Input() public padding = true;

src/app/widget-modules/components/list-header/list-header.component.html

@@ -1,13 +1,15 @@
 <div class="header">
+  @if (showFilterButton) {
   <button (click)="onFilterClick()" [class.filter-active]="anyFilterActive" mat-icon-button>
     <fa-icon [icon]="faFilter"></fa-icon>
   </button>
+  }
   <button mat-icon-button routerLink="new">
     <fa-icon [icon]="faNew"></fa-icon>
   </button>
 </div>
 
-@if (filterVisible || anyFilterActive) {
+@if (showFilterButton && (filterVisible || anyFilterActive)) {
 <div @fade>
   <app-card>
     <ng-content></ng-content>

src/app/widget-modules/components/list-header/list-header.component.less

@@ -10,11 +10,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: var(--primary-hover);
-
 }
 
-.filter-active {
-  color: var(--danger);
+.header .mat-mdc-icon-button {
+  --icon-button-color: var(--primary-hover);
+  --icon-button-hover-color: var(--primary-active);
+}
+
+.header .mat-mdc-icon-button.filter-active {
+  --icon-button-color: var(--danger);
+  --icon-button-hover-color: var(--danger);
   cursor: not-allowed;
 }

src/app/widget-modules/components/list-header/list-header.component.ts

@@ -20,6 +20,7 @@ export class ListHeaderComponent {
   public filterVisible = false;
   @Output() public filterVisibleChanged = new EventEmitter<boolean>();
   @Input() public anyFilterActive = false;
+  @Input() public showFilterButton = true;
 
   public onFilterClick(): void {
     this.filterVisible = !this.filterVisible || this.anyFilterActive;

src/app/widget-modules/components/menu-button/menu-button.component.less

@@ -1,4 +1,6 @@
-button {
+.mat-mdc-button {
+  --icon-button-color: var(--primary-color);
+  --icon-button-hover-color: var(--primary-active);
   min-width: 0;
   padding: 0 var(--button-padding, 5px);
   font-size: var(--button-font-size, 1em);

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

@@ -1 +1,12 @@
-<aside></aside>
+<button class="sidebar-toggle" (click)="toggle()" [attr.aria-expanded]="!collapsed" aria-label="Sidebar umschalten" mat-icon-button type="button">
+  <fa-icon [icon]="collapsed ? closedIcon : openIcon"></fa-icon>
+</button>
+<aside [class.collapsed]="collapsed">
+  <div class="sidebar-toggle-placeholder" aria-hidden="true"></div>
+  <div class="sidebar-body">
+    <ng-content select="[sidebar]"></ng-content>
+  </div>
+</aside>
+<div class="content">
+  <ng-content select="[content]"></ng-content>
+</div>

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

@@ -1,5 +1,48 @@
+:host {
+  --sidebar-width: 300px;
+  --sidebar-toggle-size: 48px;
+  --sidebar-toggle-offset: 12px;
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  align-items: start;
+  box-sizing: border-box;
+  transition: grid-template-columns 200ms ease;
+}
+
+:host.collapsed {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.sidebar-toggle {
+  --icon-button-color: var(--primary-hover);
+  --icon-button-hover-color: var(--primary-active);
+  position: fixed;
+  top: calc(50px + var(--sidebar-toggle-offset));
+  left: var(--sidebar-toggle-offset);
+  z-index: 11;
+  color: var(--icon-button-color);
+  background: transparent;
+  box-shadow: none;
+}
+
+:host.collapsed .sidebar-toggle {
+  --icon-button-color: var(--text-inverse);
+  --icon-button-hover-color: var(--text-inverse);
+}
+
+.sidebar-toggle fa-icon {
+  color: inherit;
+}
+
+.sidebar-toggle:hover {
+  color: var(--icon-button-hover-color);
+}
+
 aside {
-  width: 200px;
+  width: var(--sidebar-width);
   height: calc(100vh - 50px);
 
   position: fixed;
@@ -8,4 +51,28 @@ aside {
   bottom: 0;
 
   background: var(--surface);
+  box-shadow: var(--shadow-card-2);
+  overflow: hidden;
+  transform: translateX(0);
+  transition: transform 200ms ease;
+}
+
+aside.collapsed {
+  transform: translateX(calc(-1 * var(--sidebar-width)));
+}
+
+.sidebar-toggle-placeholder {
+  height: calc(var(--sidebar-toggle-size) + var(--sidebar-toggle-offset));
+  flex: 0 0 auto;
+}
+
+.sidebar-body {
+  height: calc(100% - var(--sidebar-toggle-size) - var(--sidebar-toggle-offset));
+}
+
+.content {
+  grid-column: 2;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
 }

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

@@ -1,9 +1,23 @@
 import {Component} from '@angular/core';
+import {MatIconButton} from '@angular/material/button';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {faBars, faChevronLeft} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-sidebar',
-  imports: [],
+  imports: [MatIconButton, FaIconComponent],
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.less',
+  host: {
+    '[class.collapsed]': 'collapsed',
+  },
 })
-export class SidebarComponent {}
+export class SidebarComponent {
+  public collapsed = true;
+  public openIcon = faChevronLeft;
+  public closedIcon = faBars;
+
+  public toggle(): void {
+    this.collapsed = !this.collapsed;
+  }
+}