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,34 +42,38 @@ 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"
-            <Transition>
+          class="is-icon-only"
+          ghost
+        >
+          <Transition>
+            <div
+              v-if="uploads.currentIndex < uploads.queue.length"
+              :class="$style['upload-progress']"
+            >
+              <div :class="[$style.progress, $style.fake]" />
               <div
-                v-if="uploads.currentIndex < uploads.queue.length"
+                :class="$style.progress"
-                :class="$style['upload-progress']"
+                :style="{ maxWidth: `${uploads.progress}%` }"
-              >
+              />
-                <div :class="[$style.progress, $style.fake]" />
+            </div>
-                <div
+          </Transition>
-                  :class="$style.progress"
-                  :style="{ maxWidth: `${uploads.progress}%` }"
-                />
-              </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,99 +162,62 @@ const uploads = useUploadsStore()
     overflow: auto;
     top: 0;
 
-    > .header-wrapper {
+    .upload-progress {
-      display: flex;
+      background: var(--fw-blue-500);
+      position: absolute;
+      left: 0;
+      bottom: 2px;
+      width: 100%;
+      padding: 2px;
 
-      .logo {
+      &.v-enter-active,
-        height: 40px;
+      &.v-leave-active {
-        width: 40px;
+        transition: transform 0.2s ease, opacity 0.2s ease;
-        margin: 20px;
+      }
+
+      &.v-leave-to,
+      &.v-enter-from {
+        transform: translateY(0.5rem);
+        opacity: 0;
+      }
+
+      > .progress {
+        height: 0.25rem;
+        width: 100%;
+        transition: max-width 0.1s ease;
+        background: var(--fw-gray-100);
+        border-radius: 100vh;
+        position: relative;
+
+        &.fake {
+          background: var(--fw-blue-700);
+        }
+
+        &:not(.fake) {
+          position: absolute;
+          inset: 2px;
+        }
       }
     }
 
-    .quick-actions {
+    .avatar {
-      display: flex;
+      aspect-ratio: 1;
-      align-self: end;
+      background: var(--fw-beige-100);
-      margin: 20px;
+      border-radius: 100%;
-      align-items: center;
-      font-size: 1.3rem;
 
-      .popover-container {
+      text-decoration: none !important;
-        display: flex;
+      color: var(--fw-gray-700);
-      }
 
-      button.active {
+      > img,
-        box-shadow: inset 0 0 0 2px var(--fw-blue-500);
+      > i {
-        position: relative;
-        overflow: hidden;
-
-        :deep(svg + span) {
-          margin-left: 0 !important;
-        }
-      }
-
-      .upload-progress {
-        background: var(--fw-blue-500);
-        position: absolute;
-        left: 0;
-        bottom: 2px;
         width: 100%;
-        padding: 2px;
+        height: 100%;
 
-        &.v-enter-active,
+        display: flex;
-        &.v-leave-active {
+        justify-content: center;
-          transition: transform 0.2s ease, opacity 0.2s ease;
+        align-items: center;
-        }
+        margin: 0 !important;
-
+        border-radius: 100vh;
-        &.v-leave-to,
-        &.v-enter-from {
-          transform: translateY(0.5rem);
-          opacity: 0;
-        }
-
-        > .progress {
-          height: 0.25rem;
-          width: 100%;
-          transition: max-width 0.1s ease;
-          background: var(--fw-gray-100);
-          border-radius: 100vh;
-          position: relative;
-
-          &.fake {
-            background: var(--fw-blue-700);
-          }
-
-          &:not(.fake) {
-            position: absolute;
-            inset: 2px;
-          }
-        }
-      }
-      .avatar,
-      .logo {
-        height: 30px;
-        display: block;
-      }
-
-      .avatar {
-        aspect-ratio: 1;
-        background: var(--fw-beige-100);
-        border-radius: 100%;
-
-        text-decoration: none !important;
-        color: var(--fw-gray-700);
-
-        > img,
-        > i {
-          width: 100%;
-          height: 100%;
-
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin: 0 !important;
-          border-radius: 100vh;
-        }
       }
     }