Beginn Responsive Design

frontend/src/App.vue

@@ -1,29 +1,34 @@
 <template>
   <div class="main">
     <div v-if="isAuthenticated" class="navigation">
-      <div>
-        Verein:
-        <select v-model="selectedClub">
-          <option value="">---</option>
-          <option value="new">Neuer Verein</option>
-          <option v-for="club in clubs" :key="club.id" :value="club.id">{{ club.name }}</option>
-        </select>
-        <button @click="loadClub">-&gt;</button>
+      <div class="club-selector">
+        <div>
+          Verein:
+          <select v-model="selectedClub">
+            <option value="">---</option>
+            <option value="new">Neuer Verein</option>
+            <option v-for="club in clubs" :key="club.id" :value="club.id">{{ club.name }}</option>
+          </select>
+          <button @click="loadClub">-&gt;</button>
+        </div>
       </div>
-      <template v-if="selectedClub">
+
+      <div v-if="selectedClub" class="nav-links">
         <a href="/members">Mitglieder</a>
         <a href="/diary">Tagebuch</a>
         <a href="/pending-approvals">Freigaben</a>
         <a href="/schedule">Spielpläne</a>
-      </template>
-      <div>
+      </div>
+      <div class="logout-btn">
         <button @click="logout()">Ausloggen</button>
       </div>
     </div>
+
     <div v-else class="navigation">
       <a href="/login">Einloggen</a>
       <a href="/register">Registrieren</a>
     </div>
+
     <router-view class="content"></router-view>
   </div>
 </template>
@@ -71,30 +76,128 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .main {
   display: flex;
+  flex-direction: column;
   height: 100%;
-  overflow: hidden;
   width: 100%;
+  overflow: hidden;
 }
+
 .navigation {
-width: 13em;
   background-color: #e0f0e8;
   display: flex;
   flex-direction: column;
-  padding: .5rem;
+  padding: 0.5rem;
 }
-.content {
-  flex: 1;
-  width: 100%;
-  height:calc(100% - 2.5rem);
-  overflow: auto;
-  padding: 0 0.35em;
+
+.club-selector,
+.logout-btn {
+  margin-bottom: 1rem;
 }
-.navigation > a{
+
+.nav-links {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.navigation>a {
   text-decoration: none;
   margin: 0.3em 0;
   color: #a07040;
 }
+
+.content {
+  flex: 1;
+  padding: 0.5em;
+}
+
+button {
+  padding: 0.3em 0.6em;
+  background-color: #a07040;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #804b29;
+}
+
+select {
+  padding: 0.3em;
+  border: 1px solid #ccc;
+}
+
+/* Responsive Design */
+@media (min-width: 768px) {
+  .main {
+    flex-direction: row;
+  }
+
+  .navigation {
+    width: 13em;
+    padding: 1rem;
+  }
+
+  .content {
+    padding: 1rem;
+    height: calc(100% - 2.5rem);
+  }
+
+  .nav-links {
+    flex-direction: row;
+  }
+
+  .nav-links>a {
+    margin: 0 1em;
+  }
+
+  select {
+    width: 100%;
+  }
+}
+
+@media (max-width: 767px) {
+  .navigation {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .content {
+    padding: 0.5rem;
+  }
+
+  .nav-links {
+    display: block;
+  }
+
+  .nav-links>a {
+    display: block;
+    margin: 0.5em 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .navigation {
+    font-size: 1.5em;
+  }
+
+  select {
+    width: 100%;
+  }
+
+  button {
+    width: 100%;
+    margin-top: 0.5em;
+  }
+
+  .nav-links>a {
+    font-size: 0.85em;
+    padding: 0.5em;
+    border-bottom: 1px solid #ddd;
+  }
+}
 </style>