From 1761a03afb8b8cb16ca0257fdabaee39bcc46c88 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Tue, 14 Nov 2023 11:10:14 +0100
Subject: [PATCH] add router for navbar and default routes for the non existing
 pages

---
 layouts/Navigationbar.vue | 110 ++++++++++++++++++++++----------------
 routerFrontend/index.js   |  25 +++++++++
 2 files changed, 90 insertions(+), 45 deletions(-)
 create mode 100644 routerFrontend/index.js

diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 42a1f39..b57c46e 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,61 +1,64 @@
 <template>
-  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
+  <aside
+    :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggle">
-      <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode' ]" id="back-icon">
-        <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-          loading="lazy" src="../icons/Back-Icon.svg" />
+      <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </div>
-      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleSidebar">
-        <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-          loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
+      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+        @click="toggleSidebar">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
-      <nav id="home-menu" :class="[ darkMode ? 'menu-darkmode' : 'menu-lightmode' ]">
-        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="home-button">
+      <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="home-button">
           <div class="icon" id="home-icon">
-            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-              loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Home-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Home</pre>
-        </button>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
+        </router-link>
       </nav>
       <nav id="site-menu">
-        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="checklists-button">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
           <div class="icon" id="checklists-icon">
-            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-              loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Checklists</pre>
-        </button>
-        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="assets-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
+        </router-link>
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-              loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Assets-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Config Items</pre>
-        </button>
-        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="solutions-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
+        </router-link>
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
           <div class="icon" id="solutions-icon">
-            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-              loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Solutions-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Solutions</pre>
-        </button>
-        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="accounting-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
+        </router-link>
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-              loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Accounting-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Accounting</pre>
-        </button>
-        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="clients-button">
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
+        </router-link>
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
-              loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="../icons/navbar-icons/Clients-Icon.svg" />
           </div>
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Clients</pre>
-        </button>
+          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
+        </router-link>
       </nav>
     </div>
   </aside>
@@ -64,7 +67,6 @@
 
 
 <script>
-
 export default {
   name: "Navigationbar",
   data() {
@@ -97,6 +99,7 @@ aside {
   width: 3.125rem;
   transition: 0.5s ease-in-out;
 }
+
 aside.is-expanded {
   width: 12.5rem;
 }
@@ -105,6 +108,7 @@ aside.is-expanded {
   opacity: 1;
   transition: 0.5s ease-in-out;
 }
+
 .is-not-expanded #indicator-icon {
   transform: rotate(180deg);
   transition: 0.5s ease-in-out;
@@ -122,10 +126,12 @@ aside.is-expanded {
   padding: 0.9375rem;
   margin: 0;
 }
+
 .navbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
 }
+
 .navbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
@@ -149,6 +155,7 @@ aside.is-expanded {
   padding: 1.25rem 0;
   gap: 1.875rem;
   transition: 0.5s ease-in-out;
+  align-items: center;
 }
 
 
@@ -158,17 +165,21 @@ nav {
   justify-content: center;
   padding: 0.9375rem 0;
   gap: 1.875rem;
+  width: 92%;
 }
+
 .menu-darkmode {
   border-bottom: 0.0625rem solid #8E8E8E;
 }
+
 .menu-lightmode {
   border-bottom: 0.0625rem solid #BABABA;
 }
 
 
 
-button {
+button,
+a {
   display: flex;
   flex-direction: row;
   align-self: stretch;
@@ -179,26 +190,30 @@ button {
   gap: 0.3125rem;
   border: none;
   transition: 0.5s ease-in-out;
+  text-decoration: none;
+  width: 100%;
 }
+
 .button-darkmode {
   background-color: #2C2C2C;
 }
+
 .button-lightmode {
   background-color: #FFFFFF;
 }
-.button-darkmode:hover, 
+
+.button-darkmode:hover,
 .indicator-darkmode:hover,
 .back-darkmode:hover {
   background-color: #444444;
 }
 
-.button-lightmode:hover, 
+.button-lightmode:hover,
 .indicator-lightmode:hover,
 .back-lightmode:hover {
   background-color: #ACACAC;
 }
 
-
 .icon {
   display: flex;
   flex-direction: row;
@@ -208,7 +223,9 @@ button {
   justify-content: center;
   transition: 0.2s ease-in-out;
 }
-#back-icon, #indicator-icon {
+
+#back-icon,
+#indicator-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.3125rem;
@@ -225,6 +242,7 @@ img {
   overflow: hidden;
   transition: 0.2s ease-out;
 }
+
 .img-darkmode {
   filter: invert(100%);
 }
@@ -236,11 +254,13 @@ img {
   margin: auto 0;
   font: 600 0.875rem/1.25rem Overpass, sans-serif;
   opacity: 0;
-  transition: opacity 0.5s ease-out; 
+  transition: opacity 0.5s ease-out;
 }
+
 .label-darkmode {
   color: #FFFFFF;
 }
+
 .label-lightmode {
   color: #000000;
 }
diff --git a/routerFrontend/index.js b/routerFrontend/index.js
new file mode 100644
index 0000000..14bdbc3
--- /dev/null
+++ b/routerFrontend/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomePage from '../pages/home.vue';
+import ClientsPage from '../pages/clients.vue';
+import LoginPage from '../pages/login.vue';
+
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: LoginPage
+        },
+        {
+            path: '/home',
+            component: HomePage
+        }, 
+        {
+            path: '/clients',
+            component: ClientsPage
+        },         
+    ]
+})
+
+export default router
\ No newline at end of file