fix styling

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -21,7 +21,7 @@ nav {
 
     &.hidden {
       @media screen and (max-width: 860px) {
-        top: -60px;
+        // top: -60px;
       }
     }
 

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

@@ -1,12 +1,14 @@
 <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>
-  </button>
-  } @if (heading && !fullscreen) {
-  <div class="heading">{{ heading }}</div>
-  } @if (subheading && !fullscreen) {
-  <div class="subheading">{{ subheading }}</div>
+    <button [routerLink]="closeLink" class="btn-close" mat-icon-button>
+      <fa-icon [icon]="closeIcon"></fa-icon>
+    </button>
+  }
+  @if (heading && !fullscreen) {
+    <div class="heading">{{ heading }}</div>
+  }
+  @if (subheading && !fullscreen) {
+    <div class="subheading">{{ subheading }}</div>
   }
   <ng-content></ng-content>
 </div>

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

@@ -1,7 +1,7 @@
 @import "../../../../styles/shadow";
 
 .card {
-  margin: 20px;
+  margin: 20px 20px 0;
   border-radius: 8px;
   background: var(--surface);
   backdrop-filter: blur(15px);
@@ -14,10 +14,8 @@
   box-shadow: var(--shadow-card-3);
 
   @media screen and (max-width: 860px) {
-    width: 100vw;
-    border-radius: 0;
-    background: var(--surface-strong);
-    margin: 0;
+    width: calc(100vw - 10px);
+    margin: 5px;
     color: var(--text);
   }
 

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

@@ -0,0 +1,27 @@
+@if (withMenu() || title()) {
+  <div class="header">
+    @if (withMenu()) {
+      <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>
+    }
+    <div class="title">{{ title() }}</div>
+  </div>
+}
+@if (!collapsed) {
+  <button (click)="close()" aria-label="Sidebar schließen" class="sidebar-backdrop" tabindex="-1"
+          type="button"></button>
+}
+<aside [class.collapsed]="collapsed">
+  <div aria-hidden="true" class="sidebar-toggle-placeholder"></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/page-frame.component.less

@@ -19,20 +19,20 @@
 
 .sidebar-toggle {
   --icon-button-color: var(--primary-hover);
-  --icon-button-hover-color: var(--primary-active);
+  --icon-button-hover-color: var(--primary);
   position: fixed;
   top: calc(50px + var(--sidebar-toggle-offset));
   left: var(--sidebar-toggle-offset);
   z-index: 11;
   color: var(--icon-button-color);
-  background: var(--surface-strong);
   box-shadow: none;
   border-radius: 999px;
+  transition: all 150ms ease-in-out;
 }
 
 :host.collapsed .sidebar-toggle {
-  --icon-button-color: var(--text);
-  --icon-button-hover-color: var(--primary-active);
+  --icon-button-color: var(--surface);
+  --icon-button-hover-color: var(--surface-subtle);
 }
 
 .sidebar-toggle fa-icon {
@@ -92,7 +92,7 @@ aside.collapsed {
 
   .sidebar-toggle {
     top: calc(50px + 8px);
-    left: 12px;
+    left: 5px;
     right: auto;
     z-index: 13;
   }
@@ -121,6 +121,32 @@ aside.collapsed {
   .content {
     grid-column: auto;
     width: 100%;
-    padding-top: calc(var(--sidebar-toggle-size) + 6px);
+  }
+}
+
+.header {
+  @media screen and (max-width: 860px) {
+    height: 50px;
+  }
+}
+
+.title {
+  color: var(--surface);
+  font-size: 30px;
+  text-transform: uppercase;
+  text-align: right;
+  opacity: 0.5;
+  text-shadow: var(--shadow-card-3);
+
+  position: fixed;
+  right: 10px;
+  top: 61px;
+
+  transition: all 150ms ease-in-out;
+
+  @media screen and (min-width: 888px) {
+    transform-origin: top right;
+    transform: rotate(90deg) translateX(100%) translateX(10px);
+    text-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);
   }
 }

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

@@ -1,17 +1,17 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import {SidebarComponent} from './sidebar.component';
+import {PageFrameComponent} from './page-frame.component';
 
 describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
+  let component: PageFrameComponent;
+  let fixture: ComponentFixture<PageFrameComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SidebarComponent],
+      imports: [PageFrameComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(SidebarComponent);
+    fixture = TestBed.createComponent(PageFrameComponent);
     component = fixture.componentInstance;
     await fixture.whenStable();
   });

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

@@ -1,21 +1,23 @@
-import {Component} from '@angular/core';
+import {Component, input} 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',
+  selector: 'app-page-frame',
   imports: [MatIconButton, FaIconComponent],
-  templateUrl: './sidebar.component.html',
-  styleUrl: './sidebar.component.less',
+  templateUrl: './page-frame.component.html',
+  styleUrl: './page-frame.component.less',
   host: {
     '[class.collapsed]': 'collapsed',
   },
 })
-export class SidebarComponent {
+export class PageFrameComponent {
   public collapsed = true;
   public openIcon = faChevronLeft;
   public closedIcon = faBars;
+  public title = input.required<string>();
+  public withMenu = input<boolean>(true);
 
   public toggle(): void {
     this.collapsed = !this.collapsed;

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

@@ -1,15 +0,0 @@
-<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 aria-hidden="true" class="sidebar-toggle-placeholder"></div>
-  <div class="sidebar-body">
-    <ng-content select="[sidebar]"></ng-content>
-  </div>
-</aside>
-<div class="content">
-  <ng-content select="[content]"></ng-content>
-</div>