From 925d2db0a63b12094396238d41a5b2d912e72c4f Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 15 Dec 2024 15:07:04 +0100
Subject: [PATCH] chore(style): contain all Sidebar classes inside the module

---
 front/src/ui/components/Sidebar.vue | 46 +++++++++++------------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index f1808f958..143994169 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -23,9 +23,8 @@ const uploads = useUploadsStore()
 </script>
 
 <template>
-  <aside>
-    <div class="sticky-content">
-      <nav class="quick-actions">
+  <aside :class="[$style.sidebar, $style['sticky-content']]">
+      <nav :class="$style['quick-actions']">
         <Link to="/">
           <img
             src="../../assets/logo/logo.svg"
@@ -47,11 +46,11 @@ const uploads = useUploadsStore()
             <Transition>
               <div
                 v-if="uploads.currentIndex < uploads.queue.length"
-                class="upload-progress"
+                :class="$style['upload-progress']"
               >
-                <div class="progress fake" />
+                <div :class="[$style.progress, $style.fake]" />
                 <div
-                  class="progress"
+                  :class="$style.progress"
                   :style="{ maxWidth: `${uploads.progress}%` }"
                 />
               </div>
@@ -62,7 +61,7 @@ const uploads = useUploadsStore()
 
       </nav>
 
-      <div class="search">
+      <div :class="$style.search">
         <Input
           v-model="searchQuery"
           type="search"
@@ -71,10 +70,9 @@ const uploads = useUploadsStore()
         />
       </div>
 
-      <nav class="button-list">
+      <nav :class="$style['button-list']">
         <Link to="/library"
           color="secondary"
-          variant="ghost"
           icon="bi-compass"
         >
           Explore
@@ -82,76 +80,66 @@ const uploads = useUploadsStore()
 
       </nav>
 
-      <nav class="button-list">
+      <nav :class="$style['button-list']">
         <Link to="/library/artists"
           color="secondary"
-          variant="ghost"
           icon="bi-person"
         >
           Artists
         </Link>
         <Link to="/library/albums"
           color="secondary"
-          variant="ghost"
           icon="bi-disc"
         >
           Albums
         </Link>
         <Link to="/library/playlists"
           color="secondary"
-          variant="ghost"
           icon="bi-music-note-list"
         >
           Playlists
         </Link>
         <Link to="/library/radios"
           color="secondary"
-          variant="ghost"
           icon="bi-question-diamond"
         >
           Radios
         </Link>
         <Link to="/library/podcasts"
           color="secondary"
-          variant="ghost"
           icon="bi-mic"
         >
           Podcasts
         </Link>
         <Link to="/"
           color="secondary"
-          variant="ghost"
           icon="bi-heart"
         >
           Favorites
         </Link>
       </nav>
     <h3>Channels</h3>
-    <nav class="footer inline menu">
-      <Link to="/about">
+    <nav :class="$style['button-list']">
+      <Link inline to="/about">
         {{ t('components.Sidebar.link.about') }}
       </Link>
-      <Link to="/privacy">
+      <Link inline to="/privacy">
         Privacy
       </Link>
-      <Link to="/legal">
+      <Link inline to="/legal">
         Legal
       </Link>
     </nav>
-    </div>
   </aside>
 </template>
 
-<style scoped lang="scss">
-aside {
-  @include light-theme {
-    background: var(--fw-beige-300);
-  }
-  @include dark-theme {
-    background: var(--fw-blue-700);
-  }
+<style module lang="scss">
+.sidebar {
+  background-color: var(--fw-bg-raised)
 
   height: 100%;
+  display:flex;
+  flex-direction:column;
 
   > .sticky-content {
     position: sticky;