From 5f6d0c6bb257263a69f318bad38af39ae8ffea6d Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 19 Dec 2024 10:45:55 +0100
Subject: [PATCH] feat(ui): Sidebar thick active links

---
 front/src/components/ui/Link.vue    | 11 ++++++++---
 front/src/ui/components/Sidebar.vue | 11 +++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 8daab6c6c..28dd8a301 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -3,11 +3,11 @@ import { computed } from 'vue'
 import { type RouterLinkProps, RouterLink } from 'vue-router'
 import { type ColorProps, type DefaultProps, type VariantProps, propsToColor } from '~/composables/colors';
 
-const { to, icon, thin, round, ...colorProps } = defineProps<{
+const { to, icon, thickWhenActive, round, ...colorProps } = defineProps<{
     width?: 'standard' | 'auto' | 'full'
     alignText?: 'left' | 'center' | 'right'
     alignSelf?: 'start' | 'center' | 'end'
-    thin?: true
+    thickWhenActive?: true
 
     icon?: string;
     round?: true;
@@ -17,7 +17,7 @@ const isExternalLink = computed(() => {
   return typeof to === 'string' && to.startsWith('http')
 })
 
-const fontWeight = thin ? 400 : 900
+const [fontWeight, activeFontWeight] = thickWhenActive ? [600, 900] : [400, 400]
 
 const isIconOnly = computed(() => !!icon)
 const isSimple = propsToColor(colorProps).class === ''
@@ -71,6 +71,11 @@ const isSimple = propsToColor(colorProps).class === ''
 
     font-family: $font-main;
     font-weight: v-bind(fontWeight);
+
+    &:global(.router-link-exact-active) {
+      font-weight: v-bind(activeFontWeight);
+    }
+
     font-size: 0.875em;
 
     line-height: 1em;
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index ccbeb2373..cbb1566e8 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -125,6 +125,7 @@ const uploads = useUploadsStore()
       <Link to="/library"
           ghost
           icon="bi-compass"
+          thickWhenActive
         >
           {{ t('components.Sidebar.header.explore') }}
       </Link>
@@ -132,6 +133,7 @@ const uploads = useUploadsStore()
       <Link to="/library/artists"
           ghost
           icon="bi-person"
+          thickWhenActive
         >
           {{ t('components.Sidebar.link.artists') }}
       </Link>
@@ -139,6 +141,7 @@ const uploads = useUploadsStore()
       <Link to="/library/albums"
           ghost
           icon="bi-disc"
+          thickWhenActive
         >
           {{ t('components.Sidebar.link.albums') }}
       </Link>
@@ -146,24 +149,28 @@ const uploads = useUploadsStore()
       <Link to="/library/playlists"
           ghost
           icon="bi-music-note-list"
+          thickWhenActive
         >
           {{ t('components.Sidebar.link.playlists') }}
       </Link>
       <Link to="/library/radios"
           ghost
           icon="bi-boombox-fill"
+          thickWhenActive
         >
           {{ t('components.Sidebar.link.radios') }}
       </Link>
       <Link to="/library/podcasts"
           ghost
           icon="bi-mic"
+          thickWhenActive
         >
           {{ t('components.Sidebar.link.podcasts') }}
       </Link>
       <Link to="/favorites"
           ghost
           icon="bi-heart"
+          thickWhenActive
         >
           {{ t('components.Sidebar.link.favorites') }}
       </Link>
@@ -194,6 +201,10 @@ const uploads = useUploadsStore()
   display:flex;
   flex-direction:column;
 
+  .logo {
+    margin: 16px;
+  }
+
   &.sticky-content {
     max-height: 100vh;
     overflow: auto;