feat(style): SVG switchable monochrome logo in sidebar

front/src/components/Logo.vue

@@ -4,7 +4,7 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  fill: '#222222'
+  fill: 'var(--color)'
 })
 </script>
 

front/src/ui/components/Sidebar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 import { useUploadsStore } from '../stores/upload'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { color } from '~/composables/colors'
 
+import Logo from '~/components/Logo.vue'
 import Input from '~/components/ui/Input.vue'
 import Link from '~/components/ui/Link.vue'
 import ActorAvatar from '~/components/common/ActorAvatar.vue'
@@ -30,20 +31,20 @@ const { t } = useI18n()
 
 const store = useStore()
 const uploads = useUploadsStore()
+const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
 </script>
 
 <template>
   <Layout aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color({}, ['default', 'solid', 'raised'])">
     <Layout flex no-gap header style="justify-content:space-between; padding-right:8px;">
-      <Link to="/"
+      <Link
+        :to="{name: logoUrl}"
         :class="$style['logo']"
       >
-        <img
-          src="../../assets/logo/logo.svg"
-          alt="Logo"
-          width="40px"
-          height="40px"
-        >
+        <i>
+          <Logo />
+          <span class="visually-hidden">{{ t('components.Sidebar.link.home') }}</span>
+        </i>
       </Link>
 
       <Layout nav no-gap flex style="align-items: center;">
@@ -187,8 +188,10 @@ const uploads = useUploadsStore()
 
 .sidebar {
   .logo {
-    padding-left: 16px;
-    padding-top: 8px;
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin: 16px;
   }
 
   &.sticky-content {
@@ -281,18 +284,18 @@ const uploads = useUploadsStore()
     }
   }
 
-  :global(.hide-on-mobile){
+  :global(.hide-on-mobile) {
     display: none;
   }
 
   @media screen and (min-width: 1024px) {
     height: 100%;
 
-    :global(.hide-on-desktop){
+    :global(.hide-on-desktop) {
       display: none !important;
     }
 
-    :global(.hide-on-mobile){
+    :global(.hide-on-mobile) {
       display: inherit;
     }