WIP: Add dummy mobile nav

client/src/components/MainNavigationBar.vue

@@ -8,6 +8,7 @@ import { useAppStore } from '@/stores/app';
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
+import MobileMenu from "@/components/MobileMenu.vue"
 
 log.debug('MainNavigationBar created');
 
@@ -82,51 +83,67 @@ const profileDropdownData = [
 </script>
 
 <template>
+  <Teleport to="body">
+    <MobileMenu
+      :show="state.showMenu"
+    />
+  </Teleport>
   <Transition name="nav">
     <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
       <nav
         class="
           px-8
-          py-4
+          py-2
           mx-auto
-          lg:flex lg:justify-start lg:items-center
+          lg:flex lg:justify-start lg:items-center lg:py-4
         "
       >
         <div class="flex items-center justify-between">
-          <a
-            href="https://www.vbv.ch"
-            class="flex">
-            <it-icon-vbv class="h-8 w-16 -mt-6 -ml-3"/>
-          </a>
-          <router-link
-            to="/"
-            class="flex">
-            <div class="
-              text-white
-              text-2xl
-              pr-10
-              pl-3
-              ml-1
-              border-l border-white
-            "
-            >
-              myVBV
-            </div>
-          </router-link>
-
-          <!-- Mobile menu button -->
-          <div @click="toggleNav" class="flex lg:hidden">
-            <button
-              type="button"
-              class="
-                w-8
+          <div class="flex items-center">
+            <a
+              href="https://www.vbv.ch"
+              class="flex">
+              <it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
+            </a>
+            <router-link
+              to="/"
+              class="flex">
+              <div class="
                 text-white
-                hover:text-sky-500
-                focus:outline-none focus:text-sky-500
+                text-2xl
+                pr-10
+                pl-3
+                ml-1
+                border-l border-white
               "
+              >
+                myVBV
+              </div>
+            </router-link>
+          </div>
+
+          <div class="flex items-center">
+            <router-link
+              to="/messages"
+              class="nav-item flex flex-row items-center"
             >
-              <it-icon-menu class="h-8 w-8"/>
-            </button>
+              <it-icon-message class="w-8 h-8 mr-6"/>
+            </router-link>
+            <!-- Mobile menu button -->
+            <div @click="toggleNav" class="flex lg:hidden">
+              <button
+                type="button"
+                class="
+                  w-8
+                  h-8
+                  text-white
+                  hover:text-sky-500
+                  focus:outline-none focus:text-sky-500
+                "
+              >
+                <it-icon-menu class="h-8 w-8"/>
+              </button>
+            </div>
           </div>
         </div>
 
@@ -162,7 +179,6 @@ const profileDropdownData = [
             Kompetenzprofil
           </router-link>
 
-          <hr class="text-white lg:hidden">
           <div class="hidden lg:block flex-auto"></div>
           <router-link
             to="/shop"
@@ -178,12 +194,6 @@ const profileDropdownData = [
           >
             Mediathek
           </router-link>
-          <router-link
-            to="/messages"
-            class="nav-item flex flex-row items-center"
-          >
-            <it-icon-message class="w-8 h-8 mr-2"/>
-          </router-link>
           <div class="nav-item flex items-center" v-if="userStore.loggedIn">
             <ItDropdown
               :button-classes="[]"

client/src/components/MobileMenu.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+<div>
+  <div>
+    <div>
+      <img>
+      <div>
+        <h3>Jan</h3>
+        link
+      </div>
+    </div>
+    <div>
+      <h4>Kurs:</h4>
+      <ul>
+        <li>Lernpfad</li>
+        <li>Komp</li>
+      </ul>
+    </div>
+    <div>
+      <ul>
+        <li>Shop</li>
+        <li>Mediathek</li>
+      </ul>
+    </div>
+    <div>
+      Abmelden
+    </div>
+  </div>
+</div>
+</template>