frontend: added api credits for anilist, mangadex, and mangaupdates

frontend/src/components/navbar/NavBar.vue

@@ -29,6 +29,14 @@ export default class NavBar extends Vue {
       <div class="navbar-sidebar-toggler mx-1 c-pointer">
         <i class="fa fa-bars me-2" @click="$emit('toggleSidebar')"/>
       </div>
+      <div class="navbar-nav flex-row">
+        <div class="nav-item">
+          <RouterLink class="nav-link active" aria-current="page" to="/">List</RouterLink>
+        </div>
+        <div class="nav-item">
+          <RouterLink class="nav-link active" aria-current="page" to="/about">About</RouterLink>
+        </div>
+      </div>
     </div>
     <div>
       <div class="d-flex flex-row">
@@ -50,11 +58,16 @@ export default class NavBar extends Vue {
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins/breakpoints';
 
+nav.navbar .nav-item {
+  margin-inline-end: 1rem;
+}
+
 @include media-breakpoint-down(sm) {
   nav.navbar {
     --bs-navbar-padding-x: 0.5rem;
   }
 
+  nav.navbar .navbar-nav,
   nav.navbar .navbar-locale-select,
   nav.navbar .navbar-theme-switch {
     display: none;

frontend/src/components/sidebar/SideBar.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import SideBarNavItem from '@/components/sidebar/SideBarNavItem.vue';
+import SideBarNavLink from '@/components/sidebar/SideBarNavLink.vue';
 import {Prop} from 'vue-property-decorator';
 import LocaleSelector from '@/components/locale/LocaleSelector.vue';
 import BootstrapThemeSwitch from '@/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue';
@@ -13,6 +14,7 @@ import SideBarHead from '@/components/sidebar/SideBarHead.vue';
     LocaleSelector,
     SideBarHead,
     SideBarNavItem,
+    SideBarNavLink,
   },
   emits: {
     'close': undefined,
@@ -31,6 +33,13 @@ export default class SideBar extends Vue {
         <li>
           <SideBarHead @close="$emit('close')"/>
         </li>
+        <SideBarNavLink :text="$t('menu.list')" to="/" faIcon="fa-list"
+                        @click="$emit('close')"></SideBarNavLink>
+        <SideBarNavLink :text="$t('menu.about')" to="/about" faIcon="fa-question"
+                        @click="$emit('close')"></SideBarNavLink>
+        <li>
+          <hr class="m-0"/>
+        </li>
         <SideBarNavItem :text="$t('locale')" faIcon="fa-language">
           <template #end>
             <LocaleSelector class="navbar-locale-select me-1"/>

frontend/src/components/sidebar/SideBarNavItem.vue

@@ -19,7 +19,11 @@ export default class SideBarNavItem extends Vue {
     <slot>
       <div class="d-flex flex-row p-2 align-items-center">
         <i :class="[faIcon]" class="sidebar-nav-item-icon text-center fa"></i>
-        <span class="sidebar-nav-item-text me-auto">{{ text }}</span>
+        <span class="sidebar-nav-item-text me-auto">
+          <slot name="text" :text="text">
+            {{ text }}
+          </slot>
+        </span>
         <slot name="end"/>
       </div>
     </slot>

frontend/src/components/sidebar/SideBarNavLink.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+import SideBarNavItem from '@/components/sidebar/SideBarNavItem.vue';
+
+@Options({
+  name: 'SideBarNavLink',
+  components: {SideBarNavItem},
+})
+export default class SideBarNavLink extends Vue {
+  @Prop({required: false})
+  faIcon!: string;
+  @Prop({required: false})
+  text!: string;
+  @Prop({required: true})
+  to!: string;
+}
+</script>
+
+<style>
+.no-link, .no-link:link, .no-link:hover {
+  color: inherit;
+  text-decoration: inherit;
+}
+</style>
+
+<template>
+  <SideBarNavItem :fa-icon="faIcon" :text="text">
+    <template #text="props">
+      <RouterLink :to="to" class="no-link">
+        {{ props.text }}
+      </RouterLink>
+    </template>
+  </SideBarNavItem>
+</template>

frontend/src/locale/de.ts

@@ -48,6 +48,10 @@ export const messagesDe = {
       found: 'gefunden',
     },
   },
+  menu: {
+    about: 'Über',
+    list: 'Liste',
+  },
   search: 'Suche',
   wakeLock: {
     notSupported: 'Wake lock wird nicht unterstützt! Das Gerät könnte Sync-Funktion unterbrechen.',

frontend/src/locale/en.ts

@@ -49,6 +49,10 @@ export const messagesEn = {
       found: 'found',
     },
   },
+  menu: {
+    about: 'About',
+    list: 'List',
+  },
   search: 'Search',
   wakeLock: {
     notSupported: 'Wake lock is not supported! The device could pause the sync function.',

frontend/src/views/AboutView.vue

@@ -1,15 +1,23 @@
 <template>
-  <div class="about">
+  <div class="p-3 overflow-y-auto">
-    <h1>This is an about page</h1>
+    <div class="mb-3">
+      <h1>About</h1>
+      This is small personal project to get an overview what manga have new chapters available and how many.
+    </div>
+    <div>
+      <h2>API credits</h2>
+      <div>
+        <img src="https://anilist.co/favicon.ico" alt="AniList logo" height="16" width="16" class="me-1">
+        <a href="https://anilist.co">AniList</a> (manga images, titles, personal score & progress)
+      </div>
+      <div>
+        <img src="https://mangadex.org/favicon.ico" alt="MangaDex logo" height="16" width="16" class="me-1">
+        <a href="https://mangadex.org">MangaDex</a> (linking between AniList and MangaUpdates)
+      </div>
+      <div>
+        <img src="https://www.mangaupdates.com/favicon.ico" alt="MangaUpdates logo" height="16" width="16" class="me-1">
+        <a href="https://www.mangaupdates.com">MangaUpdates</a> (chapter availability)
+      </div>
+    </div>
   </div>
 </template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>