feat(ui): simplify layout of Sidebar

front/src/components/ui/popover.scss

@@ -1,5 +1,5 @@
 .funkwhale.popover-container {
-  width: max-content;
+  display: contents;
 }
 
 .funkwhale.popover-outer {

front/src/ui/components/Sidebar.vue

@@ -30,8 +30,10 @@ const uploads = useUploadsStore()
 
 <template>
   <aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
-    <header :class="$style['header-wrapper']">
+    <Layout header flex>
-      <Link to="/" :class="$style['logo']">
+      <Link to="/"
+        :class="$style['logo']"
+      >
         <img
           src="../../assets/logo/logo.svg"
           alt="Logo"
@@ -40,15 +42,21 @@ const uploads = useUploadsStore()
         >
       </Link>
 
-      <nav :class="$style['quick-actions']">
+      <Spacer grow />
 
-        <Link to="/manage/settings">
+      <Layout nav no-gap flex style="align-items: center;">
-          <Button round icon="bi-wrench" ghost secondary>
+        <Link to="/manage/settings"
-          </Button>
+          round
+          icon="bi-wrench"
+          ghost
+        >
         </Link>
 
-        <Link to="/upload">
+        <Link to="/upload"
-          <Button round icon="bi-upload" class="is-icon-only" ghost secondary>
+          round icon="bi-upload"
+          class="is-icon-only"
+          ghost
+        >
           <Transition>
             <div
               v-if="uploads.currentIndex < uploads.queue.length"
@@ -61,13 +69,11 @@ const uploads = useUploadsStore()
               />
             </div>
           </Transition>
-          </Button>
         </Link>
 
-        <UserMenu :showShortcutsModal="openShortcutsModal" />
+        <UserMenu :showShortcutsModal="openShortcutsModal"/>
-
+      </Layout>
-      </nav>
+    </Layout>
-    </header>
     <Layout no-gap stack :class="$style['button-list']">
       <div :class="$style.search">
         <Input
@@ -80,7 +86,6 @@ const uploads = useUploadsStore()
       <nav style="display:contents;">
       <Link to="/library"
           ghost
-          secondary
           icon="bi-compass"
         >
           {{ t('components.Sidebar.header.explore') }}
@@ -88,7 +93,6 @@ const uploads = useUploadsStore()
 
       <Link to="/library/artists"
           ghost
-          secondary
           icon="bi-person"
         >
           {{ t('components.Sidebar.link.artists') }}
@@ -96,7 +100,6 @@ const uploads = useUploadsStore()
 
       <Link to="/library/albums"
           ghost
-          secondary
           icon="bi-disc"
         >
           {{ t('components.Sidebar.link.albums') }}
@@ -104,28 +107,24 @@ const uploads = useUploadsStore()
 
       <Link to="/library/playlists"
           ghost
-          secondary
           icon="bi-music-note-list"
         >
           {{ t('components.Sidebar.link.playlists') }}
       </Link>
       <Link to="/library/radios"
           ghost
-          secondary
           icon="bi-boombox-fill"
         >
           {{ t('components.Sidebar.link.radios') }}
       </Link>
       <Link to="/library/podcasts"
           ghost
-          secondary
           icon="bi-mic"
         >
           {{ t('components.Sidebar.link.podcasts') }}
       </Link>
       <Link to="/"
           ghost
-          secondary
           icon="bi-heart"
         >
           {{ t('components.Sidebar.link.favorites') }}
@@ -163,37 +162,6 @@ const uploads = useUploadsStore()
     overflow: auto;
     top: 0;
 
-    > .header-wrapper {
-      display: flex;
-
-      .logo {
-        height: 40px;
-        width: 40px;
-        margin: 20px;
-      }
-    }
-
-    .quick-actions {
-      display: flex;
-      align-self: end;
-      margin: 20px;
-      align-items: center;
-      font-size: 1.3rem;
-
-      .popover-container {
-        display: flex;
-      }
-
-      button.active {
-        box-shadow: inset 0 0 0 2px var(--fw-blue-500);
-        position: relative;
-        overflow: hidden;
-
-        :deep(svg + span) {
-          margin-left: 0 !important;
-        }
-      }
-
     .upload-progress {
       background: var(--fw-blue-500);
       position: absolute;
@@ -231,11 +199,6 @@ const uploads = useUploadsStore()
         }
       }
     }
-      .avatar,
-      .logo {
-        height: 30px;
-        display: block;
-      }
 
     .avatar {
       aspect-ratio: 1;
@@ -257,7 +220,6 @@ const uploads = useUploadsStore()
         border-radius: 100vh;
       }
     }
-    }
 
     .search {
       padding: 0 4px;