Added responsive design

src/components/Footer.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 
 <template>
-    <footer class="p-4 bg-white sm:p-6 dark:bg-gray-800 h-60">
+<footer class="p-4 bg-white sm:p-6 dark:bg-gray-800 min-h-[15rem]">
         <div class="mx-auto max-w-screen-xl">
             <div class="md:flex md:justify-between">
                 <div class="mb-6 md:mb-0">

src/components/Navbar.vue

@@ -19,11 +19,6 @@ export default {
             </a>
             <div class="flex items-center lg:order-2">
                 <p href="/authorize" class="text-gray-800 dark:text-white font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2"><Discord></Discord></p>
-                <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
-                    <span class="sr-only">Open main menu</span>
-                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
-                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                </button>
             </div>
             <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
                 <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">

src/components/app/AppHeader.vue

@@ -1,13 +1,12 @@
 <script lang="ts">
-
 export default {
-  components: {
+  methods: {
-
+    toggleSidebar() {
-  },
+      console.log('Toggle sidebar event emitted');
-  mounted() {
+      document.getElementById('drawer-navigation')?.classList.toggle('hidden');
+    }
   }
 }
-
 </script>
 
 <template>
@@ -15,6 +14,15 @@ export default {
     <nav class="bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50">
       <div class="flex flex-wrap justify-between items-center">
         <div class="flex justify-start items-center">
+          <button 
+            @click="toggleSidebar"
+            class="p-2 mr-2 text-gray-600 rounded-lg cursor-pointer md:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          >
+            <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+            </svg>
+            <span class="sr-only">Toggle sidebar</span>
+          </button>
           <a href="/" class="flex items-center justify-between mr-4">
             <img
               src="https://raw.githubusercontent.com/MaukiNet/.github/main/assets/4542221e59746b200f7d3d2c96cf9210.png"

src/components/app/AppSidebar.vue

@@ -76,7 +76,7 @@ export default {
 
 <template>
     <aside
-      class="fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+      class="hidden fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform duration-200 ease-in-out bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
       aria-label="Sidenav"
       id="drawer-navigation"
     >

src/views/Home.vue

@@ -36,13 +36,14 @@ export default {
 
 <template>
     <title>Home - CoasterDB</title>
-    <Navbar />
+    <div class="flex flex-col min-h-screen">
-    <main class="content">
+        <Navbar />
+    <main class="flex-grow content">
         <section class="bg-white dark:bg-gray-900">
             <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
                 <div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
                     <h2 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white">Entdecke CoasterDB!</h2>
-                    <p class="mb-4 font-light">Finde interessante Fakten und on-board Videos von deutschen Achterbahnen.</p>
+                    <p class="mb-4 font-light">Finde interessante Fakten und on-ride Videos von deutschen Achterbahnen.</p>
                     <p class="mb-4 font-medium">In dieser Web-Anwendung findest du viele Fakten, technische Daten und anderes Material zu verschiedene Achterbahnen und Parks in Deutschland.</p>
                     <a href="/app" class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700">
                         Öffne die Web-App
@@ -73,4 +74,5 @@ export default {
         </section>
     </main>
     <Footer />
+</div>
 </template>

src/views/app/App.vue

@@ -1,59 +1,40 @@
 <script lang="ts">
-
 import Header from '../../components/app/AppHeader.vue'
 import Sidebar from '../../components/app/AppSidebar.vue'
-import Documentation from "../../views/app/Documentation.vue"
-import Help from "../../views/app/Help.vue"
 
 export default {
     components: {
         Header,
-        Sidebar,
+        Sidebar
-        Documentation,
-        Help
     },
-  mounted() {
+    data() {
-    var current_page = "";
+        return {
-    setInterval(() => {
+            sidebarOpen: false
-      const docs = document.getElementById("docs-container");
+        }
-      const help = document.getElementById("docs-container");
+    },
-
+    methods: {
-      if (current_page == window.location.href.replace("https://", "").split("/")[4]) return;
+        toggleSidebar() {
-      current_page = window.location.href.replace("https://", "").split("/")[4];
+            this.sidebarOpen = !this.sidebarOpen;
-
+            const sidebar = document.getElementById('drawer-navigation');
-      switch (window.location.href.replace("https://", "").split("/")[4]) {
+            if (sidebar) {
-        case "docs":
+                sidebar.classList.toggle('-translate-x-full', !this.sidebarOpen);
-          if (docs?.classList.contains('hidden')) docs?.classList.remove('hidden'); else help?.classList.add('hidden');
+            }
-          break;
+        }
-
+    }
-        case "help":
-          if (help?.classList.contains('hidden')) help?.classList.remove('hidden'); else docs?.classList.add('hidden');
-          break;
-
-        default:
-          break;
-      }
-    }, 1000);
-  }
 }
-
 </script>
 
 <template>
   <title>App - CoasterDB</title>
 
-  <!-- Fester Header -->
+  <Header @toggle-sidebar="toggleSidebar" />
-  <Header />
   
-  <!-- Flex-Layout für Sidebar + Hauptinhalt -->
   <div class="flex pt-[63px] h-screen overflow-hidden">
-    <!-- Sidebar -->
+    <Sidebar :class="{'translate-x-0': sidebarOpen, '-translate-x-full': !sidebarOpen}" />
-    <Sidebar />
     
-    <!-- Hauptinhalt -->
+    <main class="flex-1 overflow-y-auto p-4 md:p-10 bg-gray-900 text-white">
-    <main class="flex-1 overflow-y-auto p-10 bg-gray-900 text-white">
       <div style="margin-top: 63px;"></div>
-      <section class="max-w-4xl mx-auto bg-gray-800 p-8 rounded-lg shadow-lg">
+      <section class="max-w-4xl mx-auto bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg">
         <h2 class="text-2xl font-semibold mb-4">Willkommen auf CoasterDB!</h2>
             <p class="mb-6 text-lg">
                 Um mit CoasterDB zu arbeiten, kannst du in der Sidebar unter <strong>Kategorien -> Parks/Attraktionen</strong> wählen, um Informationen zu verschiedenen Freizeitparks und deren Attraktionen zu erhalten.