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()
{{ t('components.Sidebar.header.explore') }}
@@ -132,6 +133,7 @@ const uploads = useUploadsStore()
{{ t('components.Sidebar.link.artists') }}
@@ -139,6 +141,7 @@ const uploads = useUploadsStore()
{{ t('components.Sidebar.link.albums') }}
@@ -146,24 +149,28 @@ const uploads = useUploadsStore()
{{ t('components.Sidebar.link.playlists') }}
{{ t('components.Sidebar.link.radios') }}
{{ t('components.Sidebar.link.podcasts') }}
{{ t('components.Sidebar.link.favorites') }}
@@ -194,6 +201,10 @@ const uploads = useUploadsStore()
display:flex;
flex-direction:column;
+ .logo {
+ margin: 16px;
+ }
+
&.sticky-content {
max-height: 100vh;
overflow: auto;