From 1fec1dc8c0530c4c4e47e1415ccd0866df4bbb0b Mon Sep 17 00:00:00 2001
From: veenm <vanveenmel11@gmail.com>
Date: Sat, 19 Apr 2025 14:53:16 +0200
Subject: [PATCH] mobiele layout toegevoegd voor agenda en inlog

---
 src/app/pages/agenda/agenda.component.scss | 79 ++++++++++++++++++++--
 src/app/pages/home/home.component.html     |  4 +-
 src/app/pages/login/login.component.scss   |  7 ++
 3 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/agenda/agenda.component.scss b/src/app/pages/agenda/agenda.component.scss
index 2a75217..1c1cb08 100644
--- a/src/app/pages/agenda/agenda.component.scss
+++ b/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 */
+  }
+}
+
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index e543500..e21dfd5 100644
--- a/src/app/pages/home/home.component.html
+++ b/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
diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss
index fd8bf65..9cda52a 100644
--- a/src/app/pages/login/login.component.scss
+++ b/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;
+  }
+}