From 31eb779ce53358ef9cbdd77b821729cc0b577c69 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 24 Aug 2022 15:08:11 +0200
Subject: [PATCH] Add basic routing and container

---
 client/src/components/MainNavigationBar.vue |  2 +-
 client/src/router/index.ts                  |  7 +++++++
 client/src/views/MediaMainView.vue          | 18 ++++++++++++++++++
 client/src/views/MediaView.vue              | 17 ++++++++++++++---
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 client/src/views/MediaMainView.vue

diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index b4400703..00df77bb 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/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']) }"
             >
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index af8feacc..204beaf5 100644
--- a/client/src/router/index.ts
+++ b/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',
diff --git a/client/src/views/MediaMainView.vue b/client/src/views/MediaMainView.vue
new file mode 100644
index 00000000..e9b89171
--- /dev/null
+++ b/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>
diff --git a/client/src/views/MediaView.vue b/client/src/views/MediaView.vue
index 6439a274..b8e42f67 100644
--- a/client/src/views/MediaView.vue
+++ b/client/src/views/MediaView.vue
@@ -6,9 +6,20 @@ log.debug('ShopView created');
 </script>
 
 <template>
-  <main class="px-8 py-8">
-    <h1>Mediathek</h1>
-  </main>
+  <div class="bg-gray-200">
+    <nav class="h-12 px-6 py-2 border-b border-gray-500 bg-white">
+      <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>