From 4e7ca3bd1a558eb8ecf6fd591e0bd0068f682dd2 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 29 Jun 2022 16:21:32 +0200
Subject: [PATCH] Toggle MainNavigationBar

---
 client/src/App.vue                          |  6 ++++++
 client/src/components/MainNavigationBar.vue |  4 +++-
 client/src/stores/app.ts                    | 16 ++++++++++++++++
 client/src/stores/circle.ts                 | 11 ++++++++++-
 client/src/views/CircleView.vue             |  4 ----
 client/src/views/DashboardView.vue          |  4 ----
 client/src/views/HomeView.vue               |  5 +----
 client/src/views/LearningPathView.vue       |  4 ----
 client/src/views/LoginView.vue              |  4 ----
 client/src/views/MediaView.vue              |  4 ----
 client/src/views/MessagesView.vue           |  4 ----
 client/src/views/ProfileView.vue            |  4 ----
 client/src/views/ShopView.vue               |  4 ----
 client/src/views/StyelGuideView.vue         |  3 ---
 14 files changed, 36 insertions(+), 41 deletions(-)
 create mode 100644 client/src/stores/app.ts

diff --git a/client/src/App.vue b/client/src/App.vue
index 4036fbd1..8dd258e8 100644
--- a/client/src/App.vue
+++ b/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>
diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 0dc61f18..64d53f5c 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/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
diff --git a/client/src/stores/app.ts b/client/src/stores/app.ts
new file mode 100644
index 00000000..473c102a
--- /dev/null
+++ b/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: {
+  }
+})
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index 557c297c..cd5b1917 100644
--- a/client/src/stores/circle.ts
+++ b/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) {
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 318e4da9..7d07b4f2 100644
--- a/client/src/views/CircleView.vue
+++ b/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">
diff --git a/client/src/views/DashboardView.vue b/client/src/views/DashboardView.vue
index e4997bc7..e31db0fe 100644
--- a/client/src/views/DashboardView.vue
+++ b/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>
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index a641128a..828fd2a3 100644
--- a/client/src/views/HomeView.vue
+++ b/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>
 
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 52f53ac0..6b7f7720 100644
--- a/client/src/views/LearningPathView.vue
+++ b/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">
diff --git a/client/src/views/LoginView.vue b/client/src/views/LoginView.vue
index 6d6e78f0..137ee027 100644
--- a/client/src/views/LoginView.vue
+++ b/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>
 
diff --git a/client/src/views/MediaView.vue b/client/src/views/MediaView.vue
index 02bf8a26..6439a274 100644
--- a/client/src/views/MediaView.vue
+++ b/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>
diff --git a/client/src/views/MessagesView.vue b/client/src/views/MessagesView.vue
index 7fd21f4a..93eb97d5 100644
--- a/client/src/views/MessagesView.vue
+++ b/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>
diff --git a/client/src/views/ProfileView.vue b/client/src/views/ProfileView.vue
index e174c0de..56909600 100644
--- a/client/src/views/ProfileView.vue
+++ b/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>
diff --git a/client/src/views/ShopView.vue b/client/src/views/ShopView.vue
index f2eb17b8..b1f7b356 100644
--- a/client/src/views/ShopView.vue
+++ b/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>
diff --git a/client/src/views/StyelGuideView.vue b/client/src/views/StyelGuideView.vue
index d3aea4d8..87b39b33 100644
--- a/client/src/views/StyelGuideView.vue
+++ b/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>