mobiele layout toegevoegd

src/app/pages/agenda/agenda.component.scss

@@ -4,6 +4,13 @@
   padding: 20px;
 }
 
+@media (max-width: 768px) {
+  .container {
+    max-width: 95vw;
+  }
+}
+
+
 ul {
   list-style-type: none;
   padding: 0;

src/app/pages/home/home.component.html

@@ -4,12 +4,14 @@
 </div>
 <header>
   <div class="navbar">
-    <img src="assets/logo-minimal.png" alt="App Logo" class="img-fluid">
+    <img src="assets/logo-minimal.png" alt="App Logo" class="img-fluid" />
+    <button class="hamburger" (click)="menuOpen = !menuOpen">&#9776;</button>
+    <div class="nav-wrapper" [ngClass]="{ 'open': menuOpen }">
       <ul>
-      <li><a routerLink="/home/agenda" id="agenda" routerLinkActive="active">Agenda</a></li>
+        <li><a routerLink="/home/agenda" routerLinkActive="active">Agenda</a></li>
-      <li><a routerLink="/home/klanten" id="klanten" routerLinkActive="active">Klanten</a></li>
+        <li><a routerLink="/home/klanten" routerLinkActive="active">Klanten</a></li>
       </ul>
-    <hr/>
+
       <button
         tuiChevron
         type="button"
@@ -17,27 +19,18 @@
         [tuiDropdown]="dropdownContent"
         [tuiDropdownManual]="open"
         [tuiObscuredEnabled]="open"
-      (click)="onClick()"
+        (click)="onClick(); $event.stopPropagation()"
         (tuiActiveZoneChange)="onActiveZone($event)"
         (tuiObscured)="onObscured($event)">
-      <tui-avatar src="{{getInitials()}}"/>
+        <tui-avatar [src]="getInitials()"></tui-avatar>
-
-
-
       </button>
+    </div>
+
     <ng-template #dropdownContent>
       <div class="dropdown">
         <h3>{{ fullName }}</h3>
         <h4>{{ userService.currentCompany.name }}</h4>
-
+        <button tuiButton size="m" type="button" (click)="logout()">Uitloggen</button>
-        <button
-          size="m"
-          tuiButton
-          type="button"
-          id="uitloggen"
-          (click)="logout()">
-          Uitloggen
-        </button>
       </div>
     </ng-template>
   </div>

src/app/pages/home/home.component.scss

@@ -1,62 +1,106 @@
-.navbar {
+@keyframes slideDown {
-  background-color: #f8f9fa;
+  0% {
-  display: flex;
+    opacity: 0;
-  align-items: center;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-
+.active{
-ul {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  list-style-type: none;
-  align-items: center;
-}
-
-li {
-  margin: 0 10px;
-}
-
-a {
-  text-decoration: none;
-  color: black;
-  font-size: 16px;
-}
-
-img {
-  display: block;
-  max-width: 230px;
-  max-height: 95px;
-  width: auto;
-  height: auto;
-}
-
-hr {
-  clear: both;
-  visibility: hidden;
-}
-
-tui-avatar {
-  margin-right: 32px;
-  cursor: pointer;
-}
-
-.active {
   font-weight: bold;
 }
 
-.dropdown {
+.navbar {
-  font-size: 0.8125rem;
+  background-color: #f8f9fa;
-  line-height: 1.25rem;
+  padding: 10px 16px;
-  padding: 0.25rem 0.75rem;
+  display: flex;
-  margin: 20px 20px 8px 4px;
+  align-items: center;
-  min-width: 200px;
+  flex-wrap: wrap;
-}
 
-ui-scrollbar.t-scroll.ng-tns-c452864359-10._native-hidden {
+  > img {
+    max-height: 50px;
+    width: auto;
     margin-right: 24px;
-}
+  }
 
-button {
+  .hamburger {
-  background: transparent;
+    font-size: 24px;
+    background: none;
     border: none;
+    cursor: pointer;
+    display: none;
+    margin-left: auto;
+  }
+
+  .nav-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: space-between;
+
+    ul {
+      display: flex;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li a {
+        text-decoration: none;
+        color: black;
+        font-size: 16px;
+        padding: 0 8px;
+      }
+    }
+
+    button#userMenu {
+      background: none;
+      border: none;
+      margin-left: 16px;
+    }
+  }
+
+  .dropdown {
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.75rem;
+    min-width: 200px;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .hamburger {
+      display: block;
+      align-self: flex-end;
+    }
+
+    .nav-wrapper {
+      display: none;
+      width: 100%;
+      flex-direction: column;
+      margin-top: 10px;
+    }
+
+    .nav-wrapper.open {
+      display: flex;
+      animation: slideDown 0.3s ease-out;
+    }
+
+    ul {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    ul li {
+      padding: 10px 0;
+    }
+
+    button#userMenu {
+      align-self: flex-end;
+      margin-right: 16px;
+      margin-top: 10px;
+    }
+  }
 }

src/app/pages/home/home.component.ts

@@ -9,10 +9,11 @@ import {environment} from '../../../environments/environment';
 import {TuiSelectModule} from '@taiga-ui/legacy';
 import {UserService} from '../../services/user.service';
 import {AppUserDto, CompanyDTO} from '../../models/app-user-dto';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'app-home',
-  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron, TuiSelectModule, ReactiveFormsModule],
+  imports: [TuiAvatar, RouterModule, FormsModule, RouterLink, RouterLinkActive, TuiDropdown, TuiObscured, TuiActiveZone, TuiButton, TuiChevron, TuiSelectModule, ReactiveFormsModule, NgClass],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
@@ -20,6 +21,8 @@ export class HomeComponent implements OnInit {
   user: AppUserDto;
   fullName: string
   companies: CompanyDTO[];
+  menuOpen = false;
+
 
   getInitials(): string {
     this.user = this.userService.userValue
@@ -43,6 +46,7 @@ export class HomeComponent implements OnInit {
     this.open = active && this.open;
   }
 
+
   constructor(private authService: AuthService, private router: Router, protected userService: UserService) {
   }