From 33de453301f3bb8e2c668470dcfb1e8c6ebaad4c Mon Sep 17 00:00:00 2001
From: wea_ondara <wea_ondara@cutiepie.at>
Date: Sat, 25 Nov 2023 18:42:05 +0100
Subject: [PATCH] frontend: added logo to navbar and sidebar

---
 frontend/src/components/Logo.vue              | 22 +++++++++++++++++++
 frontend/src/components/navbar/NavBar.vue     |  4 ++++
 .../src/components/sidebar/SideBarHead.vue    |  6 +++--
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Logo.vue

diff --git a/frontend/src/components/Logo.vue b/frontend/src/components/Logo.vue
new file mode 100644
index 0000000..6dbd982
--- /dev/null
+++ b/frontend/src/components/Logo.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="logo">
+    <img src="/favicon.ico" alt="logo" height="24" width="24" class="me-1">
+    <b>MangaStatus</b>
+  </div>
+</template>
+
+<style>
+.logo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+</style>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-property-decorator';
+
+@Options({name: 'Logo'})
+export default class Logo extends Vue {
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/navbar/NavBar.vue b/frontend/src/components/navbar/NavBar.vue
index a9ced8a..3493ef3 100644
--- a/frontend/src/components/navbar/NavBar.vue
+++ b/frontend/src/components/navbar/NavBar.vue
@@ -4,6 +4,7 @@ import BootstrapThemeSwitch from '@/components/bootstrapThemeSwitch/BootstrapThe
 import AniListUserSearch from '@/components/navbar/AniListUserSearch.vue';
 import MangaUpdatesUpdater from '@/components/navbar/MangaUpdatesUpdater.vue';
 import LocaleSelector from '@/components/locale/LocaleSelector.vue';
+import Logo from '@/components/Logo.vue';
 
 @Options({
   name: 'NavBar',
@@ -11,6 +12,7 @@ import LocaleSelector from '@/components/locale/LocaleSelector.vue';
     AniListUserSearch,
     BootstrapThemeSwitch,
     LocaleSelector,
+    Logo,
     MangaUpdatesUpdater,
   },
   emits: {
@@ -30,6 +32,7 @@ export default class NavBar extends Vue {
         <i class="fa fa-bars me-2" @click="$emit('toggleSidebar')"/>
       </div>
       <div class="navbar-nav flex-row">
+        <Logo class="navbar-logo"/>
         <div class="nav-item">
           <RouterLink class="nav-link active" aria-current="page" to="/">List</RouterLink>
         </div>
@@ -58,6 +61,7 @@ export default class NavBar extends Vue {
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins/breakpoints';
 
+nav.navbar .navbar-logo,
 nav.navbar .nav-item {
   margin-inline-end: 1rem;
 }
diff --git a/frontend/src/components/sidebar/SideBarHead.vue b/frontend/src/components/sidebar/SideBarHead.vue
index a920ed1..d561881 100644
--- a/frontend/src/components/sidebar/SideBarHead.vue
+++ b/frontend/src/components/sidebar/SideBarHead.vue
@@ -1,9 +1,10 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
+import Logo from '@/components/Logo.vue';
 
 @Options({
   name: 'SideBar',
-  components: {},
+  components: {Logo},
   emits: {
     'close': undefined,
   },
@@ -14,11 +15,12 @@ export default class SideBar extends Vue {
 
 <template>
   <nav class="navbar border-bottom shadow flex-nowrap">
-    <div class="sidebar-closer mx-1 c-pointer">
+    <div class="sidebar-closer mx-1 c-pointer d-flex flex-row align-items-center">
       <i class="fa fa-arrow-left me-2" @click="$emit('close')"/>
 
       <!-- 'hack' to ensure this nav is the same height as the navbar -->
       <input class="form-control d-inline mx-0 px-0" style="visibility: hidden; width: 0;"/>
+      <Logo/>
     </div>
   </nav>
 </template>