Merges pull request #1 cmnext-cli

Master changes to cli branch

1 files changed, 80 insertions, 84 deletions

diff --git a/front-end/src/bootstrap/components/Header.vue b/front-end/src/bootstrap/components/Header.vue
index 43a805b..6093fdc 100644
--- a/front-end/src/bootstrap/components/Header.vue
+++ b/front-end/src/bootstrap/components/Header.vue
@@ -1,78 +1,4 @@
 <!-- eslint-disable vue/max-attributes-per-line -->
-<template>
-  <header class="sticky top-0 left-0 z-40">
-    <div class="flex header-container">
-      <div id="header-mobile-menu" ref="sideMenu" class="side-menu" :style="sideMenuStyle">
-        <div class="pt-4 pl-4 pr-6">
-          <nav id="header-mobile-nav" class="relative flex flex-col pr-3">
-            <div v-for="route in routes" :key="route.path" class="m-auto ml-0">
-              <div class="my-1" @click="closeSideMenu">
-                <router-link :to="route">
-                  {{ route.name }}
-                </router-link>
-              </div>
-            </div>
-          </nav>
-        </div>
-      </div>
-      <div class="flex flex-row w-full md:mx-3">
-        <div class="hidden w-4 lg:block" />
-        <div class="flex px-4 my-auto text-xl md:hidden">
-          <div v-if="!sideMenuActive" class="w-7" @click.prevent="openSideMenu">
-            <fa-icon icon="bars" />
-          </div>
-          <div v-else class="text-2xl w-7">
-            <fa-icon icon="times" />
-          </div>
-        </div>
-        <div id="site-title-container" class="flex m-0 mr-3">
-          <div class="inline-block px-1">
-            <slot name="site_logo" />
-          </div>
-          <div id="site-title" class="inline-block m-auto mx-1">
-            <router-link to="/">
-              <h3>{{ siteTitle }}</h3>
-            </router-link>
-          </div>
-        </div>
-        <div class="hidden w-4 lg:block" />
-        <nav id="header-desktop-nav" class="flex-row hidden mr-2 md:flex">
-          <span v-for="route in routes" :key="route.fullPath" class="flex px-1 lg:px-3">
-            <div v-if="!route.hide" class="m-auto">
-              <router-link :to="route" class="flex-auto">
-                {{ route.name }}
-              </router-link>
-            </div>
-          </span>
-        </nav>
-        <div id="user-menu" ref="userMenu" class="drop-controller" :class="{ 'hovered': userMenuHovered }">
-          <div class="user-menu">
-            Hello <span class="font-semibold">{{ uname }}</span>
-          </div>
-          <div ref="userDrop" class="absolute top-0 right-0 duration-100 ease-in-out" style="z-index:-1" :style="dropStyle">
-            <div class="drop-menu" @click.prevent="userMenuHovered = false">
-              <span class="space-x-2" />
-              <a v-if="!loggedIn" href="#" data-header-dropdown="register" @click="gotoRoute('/register')">
-                Register
-              </a>
-              <a v-else href="#" data-header-dropdown="account" @click="gotoRoute('/account')">
-                Account
-              </a>
-              <a v-if="!loggedIn" href="#" data-header-dropdown="login" @click="gotoRoute('/login')">
-                Login
-              </a>
-              <a v-else href="#" data-header-dropdown="logout" @click.prevent="OnLogout">
-                Logout
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="hidden space-x-4 lg:block" />
-      </div>
-    </div>
-  </header>
-</template>
-
 <script setup lang="ts">
 
 import { debounce, find } from 'lodash-es'
@@ -80,7 +6,7 @@ import { useElementSize, onClickOutside, useElementHover } from '@vueuse/core'
 import { computed, ref, toRefs } from 'vue'
 import { useEnvSize } from '@vnuge/vnlib.browser'
 import { RouteLocation, useRouter } from 'vue-router';
-import { storeToRefs } from 'pinia'; 
+import { storeToRefs } from 'pinia';
 import { useStore } from '../../store';
 
 const emit = defineEmits(['logout'])
@@ -92,7 +18,6 @@ const { routes } = toRefs(props)
 
 const store = useStore();
 const { loggedIn, siteTitle } = storeToRefs(store);
-
 const { headerHeight } = useEnvSize()
 
 //Get the router for navigation
@@ -132,7 +57,7 @@ const openSideMenu = debounce(() => sideMenuActive.value = true, 50)
 onClickOutside(sideMenu, closeSideMenu)
 
 //Redirect to the route when clicking on it
-const gotoRoute = (route : string) =>{
+const gotoRoute = (route: string) => {
 
   //Get all routes from the router
   const allRoutes = router.getRoutes();
@@ -140,19 +65,90 @@ const gotoRoute = (route : string) =>{
   //Try to find the route by its path
   const goto = find(allRoutes, { path: route });
 
-  if(goto){
+  if (goto) {
     //navigate to the route manually
     router.push(goto);
   }
-  else{
+  else {
     //Fallback to full navigation
     window.location.assign(route);
   }
 }
 
-const OnLogout = () =>{
-  //Emit logout event
-  emit('logout')
-}
+//Emit logout event
+const OnLogout = () => emit('logout')
 
-</script>
\ No newline at end of file
+</script>
+<template>
+  <header class="sticky top-0 left-0 z-40">
+    <div class="flex header-container">
+      <div id="header-mobile-menu" ref="sideMenu" class="side-menu" :style="sideMenuStyle">
+        <div class="pt-4 pl-4 pr-6">
+          <nav id="header-mobile-nav" class="relative flex flex-col pr-3">
+            <div v-for="route in routes" :key="route.path" class="m-auto ml-0">
+              <div class="my-1" @click="closeSideMenu">
+                <router-link :to="route">
+                  {{ route.name }}
+                </router-link>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </div>
+      <div class="flex flex-row w-full md:mx-3">
+        <div class="hidden w-4 lg:block" />
+        <div class="flex px-4 my-auto text-xl md:hidden">
+          <div v-if="!sideMenuActive" class="w-7" @click.prevent="openSideMenu">
+            <fa-icon icon="bars" />
+          </div>
+          <div v-else class="text-2xl w-7">
+            <fa-icon icon="times" />
+          </div>
+        </div>
+        <div id="site-title-container" class="flex m-0 mr-3">
+          <div class="inline-block px-1">
+            <slot name="site_logo" />
+          </div>
+          <div id="site-title" class="inline-block m-auto mx-1">
+            <router-link to="/">
+              <h3>{{ siteTitle }}</h3>
+            </router-link>
+          </div>
+        </div>
+        <div class="hidden w-4 lg:block" />
+        <nav id="header-desktop-nav" class="flex-row hidden mr-2 md:flex">
+          <span v-for="route in routes" :key="route.fullPath" class="flex px-1 lg:px-3">
+            <div v-if="!route.hide" class="m-auto">
+              <router-link :to="route" class="flex-auto">
+                {{ route.name }}
+              </router-link>
+            </div>
+          </span>
+        </nav>
+        <div id="user-menu" ref="userMenu" class="drop-controller" :class="{ 'hovered': userMenuHovered }">
+          <div class="user-menu">
+            Hello <span class="font-semibold">{{ uname }}</span>
+          </div>
+          <div ref="userDrop" class="absolute top-0 right-0 duration-100 ease-in-out" style="z-index:-1" :style="dropStyle">
+            <div class="drop-menu" @click.prevent="userMenuHovered = false">
+              <span class="space-x-2" />
+              <a v-if="!loggedIn" href="#" data-header-dropdown="register" @click="gotoRoute('/register')">
+                Register
+              </a>
+              <a v-else href="#" data-header-dropdown="account" @click="gotoRoute('/account')">
+                Account
+              </a>
+              <a v-if="!loggedIn" href="#" data-header-dropdown="login" @click="gotoRoute('/login')">
+                Login
+              </a>
+              <a v-else href="#" data-header-dropdown="logout" @click.prevent="OnLogout">
+                Logout
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="hidden space-x-4 lg:block" />
+      </div>
+    </div>
+  </header>
+</template>