bugfixes & added/design navbar

src/app/shared/components/header/header.component.html

@@ -1,9 +1,12 @@
 <section>
-  <div class="headline">Kanban Project Management Tool</div>
-  <div class="left-frame">
-    <div class="img-help" routerLink="help">
-      <img src="./../../../../assets/img/sidebar/help.svg" alt="" />
+  <div class="header">
+    <div class="headline">Kanban Project Management Tool</div>
+    <div class="left-frame">
+      <div class="img-help" routerLink="help">
+        <img src="./../../../../assets/img/sidebar/help.svg" alt="" />
+      </div>
+      <div class="img-user" (click)="toggleNavbar()">G</div>
     </div>
-    <div class="img-user">G</div>
   </div>
 </section>
+<app-navbar *ngIf="navbarVisible"></app-navbar>

src/app/shared/components/header/header.component.scss

@@ -1,8 +1,12 @@
 section {
+  height: 96px;
+}
+
+.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: calc(100% - 3px);
+  height: 93px;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
 }
 

src/app/shared/components/header/header.component.ts

@@ -1,11 +1,34 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, HostListener } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { NavbarComponent } from '../navbar/navbar.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, NavbarComponent, CommonModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  navbarVisible: boolean = false;
+
+  constructor(private elementRef: ElementRef) {}
+
+  toggleNavbar() {
+    this.navbarVisible = !this.navbarVisible;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClick(event: MouseEvent) {
+    const targetElement = event.target as HTMLElement;
+
+    // Überprüfe, ob der Klick außerhalb der Navbar erfolgt ist
+    if (
+      !targetElement.closest('app-navbar') &&
+      !targetElement.closest('.img-user')
+    ) {
+      this.navbarVisible = false;
+    }
+  }
+}

src/app/shared/components/navbar/navbar.component.html

@@ -0,0 +1,11 @@
+<nav id="navbar" class="navbar d-none">
+  <div class="link" routerLink="imprint">
+    <span>Legal Notice</span>
+  </div>
+  <div class="link" routerLink="privacy-policy">
+    <span>Privacy Policy</span>
+  </div>
+  <div class="link" onclick="logout()">
+    <span>Log out</span>
+  </div>
+</nav>

src/app/shared/components/navbar/navbar.component.scss

@@ -0,0 +1,35 @@
+.navbar {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 96px;
+  right: 15px;
+  width: 150px;
+  height: 158px;
+  background-color: var(--bgSidebar);
+  border-radius: 20px 0 20px 20px;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  z-index: 1;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  height: 46px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: var(--very-light-gray4);
+  cursor: pointer;
+}
+
+span {
+  color: var(--white);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.link:hover {
+  color: var(--light-blue);
+  background-color: var(--very-dark-blue);
+}

src/app/shared/components/navbar/navbar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavbarComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/navbar/navbar.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: true,
+  imports: [RouterModule],
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.scss',
+})
+export class NavbarComponent {}

src/styles.scss

@@ -30,13 +30,13 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--bgSidebar);
+  background: var(--white);
 }
 
 *::-webkit-scrollbar-thumb {
   background-color: var(--light-gray);
   border-radius: 10px;
-  border: 3px solid var(--black);
+  border: 3px solid var(--white);
 }
 
 /*------------- FONTS -------------*/