Add responsive menu

client/src/components/MainNavigationBar.vue

@@ -1,18 +1,82 @@
-<script>
-export default {
-  name: "MainNavigationBar"
+<script setup>
+
+import { reactive } from 'vue';
+
+const state = reactive({showMenu: false});
+
+function toggleNav() {
+  console.log(state.showMenu);
+  state.showMenu = !state.showMenu;
 }
+
+function calcNavigationMobileOpenClasses() {
+  return state.showMenu ? ['fixed', 'w-full', 'h-screen'] : [];
+}
+
 </script>
 
 <template>
-  <nav class="bg-blue-900 flex flex-row gap-x-8 items-center text-white px-8 py-4">
-    <a href="" class="text-xl">myVBV</a>
-    <a href="" class="">Lernpfad</a>
-    <a href="" class="">Kompetenzprofil</a>
-    <a href="" class="">Berufstypische Situationen</a>
+  <div class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
+    <nav
+      class="
+        px-8
+        py-4
+        mx-auto
+        lg:flex lg:justify-start lg:items-center
+      "
+    >
+      <div class="flex items-center justify-between">
+        <router-link
+          to="/"
+          class="
+            font-bold
+            text-white
+            text-2xl
+            hover:text-sky-500
+            pr-10
+          "
+        >myVBV
+        </router-link>
+
+        <!-- Mobile menu button -->
+        <div @click="toggleNav" class="flex lg:hidden">
+          <button
+            type="button"
+            class="
+              text-white
+              hover:text-sky-500
+              focus:outline-none focus:text-sky-500
+            "
+          >
+            <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
+              <path
+                fill-rule="evenodd"
+                d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
+              ></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+      <ul
+        :class="state.showMenu ? 'flex' : 'hidden'"
+        class="
+          flex-auto
+          flex-col
+          mt-8
+          space-y-8
+          lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
+        "
+      >
+        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Lernpfad</li>
+        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Kompetenzprofil</li>
+        <hr class="text-white lg:hidden">
+        <li class="hidden lg:list-item flex-auto"></li>
+        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Mediathek</li>
+        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Netzwerk</li>
+        <li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Jan Baumgartner</li>
+      </ul>
     </nav>
+  </div>
 </template>
-
-<style scoped>
-
-</style>