Add navigation bar (#29)

Author: zelytra

deployment/dev/docker-compose.yml

@@ -8,7 +8,7 @@ services:
     ports:
       - "24900:5432"
     volumes:
-      - ./onepool/psql-data/app:/var/lib/postgresql/data
+      - /onepool/psql-data/app:/var/lib/postgresql/data
       - /etc/localtime:/etc/localtime:ro
     environment:
       POSTGRES_USER: ${POSTGRES_USER}
@@ -23,7 +23,7 @@ services:
     ports:
       - "24903:5432"
     volumes:
-      - ./onepool/psql-data/auth:/var/lib/postgresql/data/pgdata
+      - /onepool/psql-data/auth:/var/lib/postgresql/data/pgdata
       - /etc/localtime:/etc/localtime:ro
     environment:
       POSTGRES_USER: ${POSTGRES_USER}

webapp/src/App.vue

@@ -5,11 +5,13 @@
       <component :is="Component"/>
     </transition>
   </router-view>
+  <NavigationBar/>
 </template>
 
 <script setup lang="ts">
 import AlertFactory from "@/vue/alerts/AlertFactory.vue";
 import {useUserStore} from "@/objects/stores/UserStore.ts";
+import NavigationBar from "@/vue/NavigationBar.vue";
 </script>
 
 <style scoped lang="scss">

webapp/src/assets/icons/friend.svg

@@ -9,6 +9,11 @@
   scrollbar-width: thin;
   color: var(--primary-text);
   user-select: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
 }
 
 body {
@@ -33,16 +38,16 @@ body {
 
 html, body {
   background: var(--primary-background);
-  height: 100vh;
-  overflow: hidden;
-  overflow-y: auto;
-  width: auto;
-  position: relative;
+
 }
 
 #app {
   background: var(--primary-background);
-
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+  height: 100vh;
+  padding-bottom: 80px; //Simulate nav bar web flow
   // Remove when computer display is done
   max-width: 600px;
   margin: auto;

webapp/src/assets/icons/home.svg

@@ -1,6 +1,8 @@
 <template>
-  <p>User profile</p>
-  <button @click="keycloakStore.keycloak.logout()">logout</button>
+  <section>
+    <p>User profile</p>
+    <button @click="keycloakStore.keycloak.logout()">logout</button>
+  </section>
 </template>
 
 <script setup lang="ts">

webapp/src/assets/icons/info.svg

@@ -0,0 +1,41 @@
+<template>
+  <nav>
+    <router-link to="/">
+      <img src="@/assets/icons/info.svg" alt="nav-icon"/>
+    </router-link>
+    <router-link to="/" v-if="router.currentRoute.value.name !== t('router.home')">
+      <img src="@/assets/icons/note.svg" alt="nav-icon"/>
+    </router-link>
+    <router-link to="/">
+      <img src="@/assets/icons/home.svg" alt="nav-icon"/>
+    </router-link>
+    <router-link to="/friends" v-if="router.currentRoute.value.name !== t('router.home')">
+      <img src="@/assets/icons/friend.svg" alt="nav-icon"/>
+    </router-link>
+    <router-link to="/profile/:id">
+      <img src="@/assets/icons/parameters.svg" alt="nav-icon"/>
+    </router-link>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import router from "@/router";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n();
+</script>
+
+<style scoped lang="scss">
+nav {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px;
+  background: var(--secondary-background);
+  margin-top: 4px;
+  border-radius: 0 0 4px 4px;
+}
+</style>

webapp/src/assets/icons/note.svg

@@ -46,7 +46,6 @@ watch(alerts.getAlerts, () => {
   gap: 8px;
   width: 90%;
   margin: 8px auto auto;
-  box-sizing: border-box;
   overflow: hidden;
   transition: all 200ms;
 }