Add basic routing and container

client/src/components/MainNavigationBar.vue

@@ -162,7 +162,7 @@ const profileDropdownData = [
               Shop
             </router-link>
             <router-link
-              to="/mediacenter"
+              to="/mediacenter/overview"
               class="nav-item"
               :class="{ 'nav-item--active': isInRoutePath(['/mediacenter']) }"
             >

client/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import CockpitView from '@/views/CockpitView.vue'
 import LoginView from '@/views/LoginView.vue'
+import MediaMainView from '@/views/MediaMainView.vue'
 import { redirectToLoginIfRequired, updateLoggedIn } from '@/router/guards'
 import { useAppStore } from '@/stores/app'
 
@@ -27,6 +28,12 @@ const router = createRouter({
     {
       path: '/mediacenter',
       component: () => import('@/views/MediaView.vue'),
+      children: [
+        {
+          path: 'overview',
+          component: () => import('@/views/MediaMainView.vue')
+        }
+      ]
     },
     {
       path: '/messages',

client/src/views/MediaMainView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+
+log.debug('MediaMainView created');
+
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+    <div class="flex items-center justify-between">
+      <h1>Mediathek</h1>
+      <div>Dropdown</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

client/src/views/MediaView.vue

@@ -6,9 +6,20 @@ log.debug('ShopView created');
 </script>
 
 <template>
-  <main class="px-8 py-8">
+  <div class="bg-gray-200">
-    <h1>Mediathek</h1>
+    <nav class="h-12 px-6 py-2 border-b border-gray-500 bg-white">
-  </main>
+      <ul class="flex">
+        <li>Übersicht</li>
+        <li class="ml-10">Handlungsfelder</li>
+        <li class="ml-10">Allgemeines zu Versicherungen</li>
+        <li class="ml-10">Lernmedien</li>
+        <li class="ml-10">Lexikon</li>
+      </ul>
+    </nav>
+    <main class="px-8 py-8">
+      <router-view></router-view>
+    </main>
+  </div>
 </template>
 
 <style scoped>