Toggle MainNavigationBar

client/src/App.vue

@@ -1,8 +1,14 @@
 <template>
   <div id="app">
+    <MainNavigationBar />
     <RouterView />
   </div>
 </template>
 
 <script setup lang="ts">
+import * as log from 'loglevel';
+
+import MainNavigationBar from '@/components/MainNavigationBar.vue';
+
+log.debug('App created');
 </script>

client/src/components/MainNavigationBar.vue

@@ -4,11 +4,13 @@ import * as log from 'loglevel';
 import { reactive } from 'vue';
 import { useUserStore } from '@/stores/user';
 import { useRoute } from 'vue-router';
+import { useAppStore } from '@/stores/app';
 
 log.debug('MainNavigationBar.vue created');
 
 const route = useRoute()
 const userStore = useUserStore();
+const appStore = useAppStore();
 const state = reactive({showMenu: false});
 
 function toggleNav() {
@@ -27,7 +29,7 @@ function menuActive(checkPath) {
 </script>
 
 <template>
-  <div class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
+  <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
     <nav
       class="
         px-8

client/src/stores/app.ts

@@ -0,0 +1,16 @@
+import {defineStore} from 'pinia'
+
+export type AppState = {
+  showMainNavigationBar: boolean;
+}
+
+export const useAppStore = defineStore({
+  id: 'app',
+  state: () => ({
+    showMainNavigationBar: true,
+  } as AppState),
+  getters: {
+  },
+  actions: {
+  }
+})

client/src/stores/circle.ts

@@ -5,6 +5,7 @@ import {defineStore} from 'pinia'
 import type {Circle, CircleChild, CircleCompletion, LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
 import {itGet, itPost} from '@/fetchHelpers';
 import {parseLearningSequences} from '@/services/circle';
+import {useAppStore} from '@/stores/app';
 
 export type CircleStoreState = {
   circleData: Circle;
@@ -80,19 +81,27 @@ export const useCircleStore = defineStore({
     },
     openLearningContent(learningContent: LearningContent) {
       this.currentLearningContent = learningContent;
+      const appStore = useAppStore();
+      appStore.showMainNavigationBar = false;
       this.page = 'LEARNING_CONTENT';
     },
     closeLearningContent() {
       this.currentLearningContent = undefined;
+      const appStore = useAppStore();
+      appStore.showMainNavigationBar = true;
       this.page = 'INDEX';
     },
     openSelfEvaluation(learningUnit: LearningUnit) {
       this.page = 'SELF_EVALUATION';
+      const appStore = useAppStore();
+      appStore.showMainNavigationBar = false;
       this.currentSelfEvaluation = learningUnit;
     },
     closeSelfEvaluation() {
-      this.page = 'INDEX';
       this.currentSelfEvaluation = undefined;
+      const appStore = useAppStore();
+      appStore.showMainNavigationBar = true;
+      this.page = 'INDEX';
     },
     calcSelfEvaluationStatus(learningUnit: LearningUnit) {
       if (learningUnit.children.length > 0) {

client/src/views/CircleView.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
-
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
 import LearningSequence from '@/components/circle/LearningSequence.vue';
 import CircleOverview from '@/components/circle/CircleOverview.vue';
 import LearningContent from '@/components/circle/LearningContent.vue';
@@ -38,8 +36,6 @@ onMounted(async () => {
       <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
     </div>
     <div v-else>
-      <MainNavigationBar/>
-
       <div class="circle">
         <div class="flex flex-col lg:flex-row">
           <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:py-8">

client/src/views/DashboardView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
-
 log.debug('DashboardView created');
 
 </script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-8">
     <h1>Dashboard</h1>
   </main>

client/src/views/HomeView.vue

@@ -1,9 +1,6 @@
-<script setup lang="ts">
-import MainNavigationBar from '@/components/MainNavigationBar.vue';</script>
+<script setup lang="ts"></script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-8">
     <h1>myVBV Start Page</h1>
 

client/src/views/LearningPathView.vue

@@ -5,7 +5,6 @@ import * as log from 'loglevel';
 import MainNavigationBar from '../components/MainNavigationBar.vue';
 import LearningPathDiagram from '../components/circle/LearningPathDiagram.vue';
 
-
 export default {
 
 
@@ -65,9 +64,6 @@ export default {
 <template>
   <div class="bg-gray-300 h-screen" v-if="learningPathContents">
 
-
-    <MainNavigationBar/>
-
     <div class="learningpath flex flex-col">
       <div class="flex flex-col h-max">
         <div class="bg-white h-80 pt-8">

client/src/views/LoginView.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
-
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
 import {reactive} from 'vue';
 import {useUserStore} from '@/stores/user';
 import {useRoute} from 'vue-router';
@@ -21,8 +19,6 @@ const userStore = useUserStore();
 </script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-8">
     <h1>Login</h1>
 

client/src/views/MediaView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
-
 log.debug('ShopView created');
 
 </script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-8">
     <h1>Mediathek</h1>
   </main>

client/src/views/MessagesView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
-
 log.debug('MessagesView created');
 
 </script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-8">
     <h1>Messages</h1>
   </main>

client/src/views/ProfileView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
-
 log.debug('ProfileView created');
 
 </script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-8">
     <h1>Profil</h1>
   </main>

client/src/views/ShopView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
-
 log.debug('ShopView created');
 
 </script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-8">
     <h1>Shop</h1>
   </main>

client/src/views/StyelGuideView.vue

@@ -2,7 +2,6 @@
 
 import {reactive} from 'vue'
 import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
-import MainNavigationBar from '@/components/MainNavigationBar.vue';
 import ItCheckbox from '@/components/ui/ItCheckbox.vue';
 
 
@@ -34,8 +33,6 @@ function colorBgClass(color: string, value: number) {
 </script>
 
 <template>
-  <MainNavigationBar/>
-
   <main class="px-8 py-4">
     <h1>Style Guide</h1>