From 098b3b0b9cb91a14c038d77b060116956834a45f Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Tue, 1 Oct 2024 06:33:59 +0200
Subject: [PATCH] Responsive design added

---
 frontend/src/App.vue | 47 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e75b785..11f162b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="main">
-    <div v-if="isAuthenticated" class="navigation">
+    <!-- Button zum Anzeigen/Ausblenden des Menüs auf mobilen Geräten -->
+    <button class="menu-toggle" @click="toggleMenu">
+      {{ isMenuOpen ? 'Menü schließen' : 'Menü öffnen' }}
+    </button>
+
+    <div v-if="isAuthenticated" class="navigation" :class="{ 'menu-open': isMenuOpen }">
       <div class="club-selector">
         <div>
           Verein:
@@ -19,6 +24,7 @@
         <a href="/pending-approvals">Freigaben</a>
         <a href="/schedule">Spielpläne</a>
       </div>
+
       <div class="logout-btn">
         <button @click="logout()">Ausloggen</button>
       </div>
@@ -42,6 +48,7 @@ export default {
   data() {
     return {
       selectedClub: null,
+      isMenuOpen: false, // Für das mobile Design zum Öffnen/Schließen des Menüs
     };
   },
   computed: {
@@ -57,7 +64,7 @@ export default {
       } else if (newVal) {
         this.$router.push(`/showclub/${newVal}`);
       }
-    }
+    },
   },
   methods: {
     ...mapActions(['setCurrentClub', 'setClubs', 'logout']),
@@ -65,6 +72,9 @@ export default {
       this.setCurrentClub(this.currentClub);
       this.$router.push(`/showclub/${this.currentClub}`);
     },
+    toggleMenu() {
+      this.isMenuOpen = !this.isMenuOpen; // Menü auf mobilen Geräten ein-/ausblenden
+    },
   },
   async mounted() {
     const response = await apiClient.get('/clubs');
@@ -72,7 +82,7 @@ export default {
     if (this.currentClub) {
       this.selectedClub = this.currentClub;
     }
-  }
+  },
 };
 </script>
 
@@ -112,6 +122,7 @@ export default {
 .content {
   flex: 1;
   padding: 0.5em;
+  overflow: auto;
 }
 
 button {
@@ -131,6 +142,11 @@ select {
   border: 1px solid #ccc;
 }
 
+/* Menü-Toggle-Button nur auf kleinen Bildschirmen anzeigen */
+.menu-toggle {
+  display: none;
+}
+
 /* Responsive Design */
 @media (min-width: 768px) {
   .main {
@@ -161,11 +177,21 @@ select {
 }
 
 @media (max-width: 767px) {
+  .main {
+    flex-direction: column;
+  }
+
   .navigation {
+    display: none;
     flex-direction: column;
     width: 100%;
   }
 
+  /* Das Menü anzeigen, wenn es geöffnet ist */
+  .menu-open {
+    display: flex;
+  }
+
   .content {
     padding: 0.5rem;
   }
@@ -178,6 +204,21 @@ select {
     display: block;
     margin: 0.5em 0;
   }
+
+  /* Menü-Toggle-Button nur auf kleinen Bildschirmen */
+  .menu-toggle {
+    display: block;
+    background-color: #a07040;
+    color: white;
+    border: none;
+    padding: 0.5em;
+    margin: 0.5em;
+    cursor: pointer;
+  }
+
+  .menu-toggle:hover {
+    background-color: #804b29;
+  }
 }
 
 @media (max-width: 480px) {