mobiele layout toegevoegd voor agenda en inlog

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

@@ -4,13 +4,6 @@
   padding: 20px;
 }
 
-@media (max-width: 768px) {
-  .container {
-    max-width: 95vw;
-  }
-}
-
-
 ul {
   list-style-type: none;
   padding: 0;
@@ -166,3 +159,75 @@ strong, p {
     transform: translateY(0);
   }
 }
+
+@media (max-width: 600px) {
+  .container {
+    padding: 12px;
+  }
+
+  .heading {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+
+  .heading h1.date {
+    font-size: 1rem;
+    text-align: center;
+    flex: 1;
+    margin: 0 8px;
+  }
+
+  .heading button {
+    flex-shrink: 0;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .toolbar button {
+    margin-left: 0;
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .calendar {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .date {
+    font-size: 1.2rem;
+  }
+
+  .time-slot {
+    font-size: 14px;
+  }
+
+  .appointment {
+    left: 60px;
+    width: calc(100% - 80px);
+    font-size: 14px;
+  }
+
+  .appointment-time {
+    font-size: 12px;
+    display: block;
+  }
+
+  .content {
+    max-height: 70vh; /* Of pas dit aan naar wat past bij jouw UI */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .agenda-container {
+    height: auto; /* Laat het alle tijdslots renderen op vaste hoogte */
+  }
+}
+

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

@@ -8,8 +8,8 @@
     <button class="hamburger" (click)="menuOpen = !menuOpen">&#9776;</button>
     <div class="nav-wrapper" [ngClass]="{ 'open': menuOpen }">
       <ul>
-        <li><a routerLink="/home/agenda" routerLinkActive="active">Agenda</a></li>
-        <li><a routerLink="/home/klanten" routerLinkActive="active">Klanten</a></li>
+        <li><a routerLink="/home/agenda" routerLinkActive="active" (click)="menuOpen = false">Agenda</a></li>
+        <li><a routerLink="/home/klanten" routerLinkActive="active" (click)="menuOpen = false">Klanten</a></li>
       </ul>
 
       <button

src/app/pages/login/login.component.scss

@@ -51,3 +51,10 @@ p{
   );
   background-size: var(--s) calc(var(--s) * 0.577);
 }
+
+
+@media (max-width: 600px) {
+  .center-container {
+    padding: 0;
+  }
+}