feat: move Plus badge to bottom of sidebar

resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue

@@ -1,6 +1,10 @@
 <template>
   <nav id="sidebar" v-koel-clickaway="closeIfMobile" :class="{ showing: mobileShowing }" class="side side-nav">
+    <section class="search-wrapper">
       <SearchForm/>
+    </section>
+
+    <section class="menu-wrapper">
       <section class="music">
         <h1>Your Music</h1>
 
@@ -24,14 +28,13 @@
           <SidebarItem screen="Settings" href="#/settings" :icon="faTools" v-if="isAdmin">Settings</SidebarItem>
           <SidebarItem screen="Upload" href="#/upload" :icon="faUpload">Upload</SidebarItem>
           <SidebarItem screen="Users" href="#/users" :icon="faUsers" v-if="isAdmin">Users</SidebarItem>
-        <li v-if="!isPlus && isAdmin">
-          <a :href="storeUrl" target="_blank">
-            <Icon :icon="faPlus" fixed-width />
-            <span>Upgrade to Plus</span>
-          </a>
-        </li>
         </ul>
       </section>
+    </section>
+
+    <section v-if="!isPlus && isAdmin" class="plus-wrapper">
+      <BtnUpgradeToPlus/>
+    </section>
   </nav>
 </template>
 
@@ -63,7 +66,7 @@ const { onRouteChanged } = useRouter()
 const { useYouTube } = useThirdPartyServices()
 const { isAdmin } = useAuthorization()
 const { allowsUpload } = useUpload()
-const { storeUrl, isPlus } = useKoelPlus()
+const { isPlus } = useKoelPlus()
 
 const mobileShowing = ref(false)
 const youTubePlaying = ref(false)
@@ -85,23 +88,43 @@ eventBus.on('TOGGLE_SIDEBAR', () => (mobileShowing.value = !mobileShowing.value)
 
 <style lang="scss" scoped>
 nav {
+  position: relative;
   width: var(--sidebar-width);
   background-color: var(--color-bg-secondary);
-  padding: 2.05rem 1.5rem;
   overflow: auto;
   overflow-x: hidden;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
 
-  > * + * {
-    margin-top: 2.25rem;
+  form[role=search] {
+    min-height: 38px;
   }
 
+  .search-wrapper {
+    padding: 2.05rem 1.5rem 0;
+  }
+
+  .menu-wrapper {
+    flex: 1;
+    padding: 2.05rem 1.5rem;
+    overflow-y: auto;
+
     @media (hover: none) {
       // Enable scroll with momentum on touch devices
       overflow-y: scroll;
       -webkit-overflow-scrolling: touch;
     }
+  }
+
+  .plus-wrapper {
+    padding:  1rem 1.5rem;
+  }
+
+  .menu-wrapper > * + * {
+    margin-top: 2.25rem;
+  }
 
   .droppable {
     box-shadow: inset 0 0 0 1px var(--color-accent);

resources/assets/js/components/meta/BtnUpgradeToPlus.vue

@@ -1,33 +1,32 @@
 <template>
-  <a :href="storeUrl" target="_blank">Upgrade to Plus</a>
+  <a :href="storeUrl" target="_blank" class="upgrade-to-plus-btn">
+    <Icon :icon="faPlus" fixed-width/>
+    Upgrade to Plus
+  </a>
 </template>
 
 <script setup lang="ts">
 import { useKoelPlus } from '@/composables'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 const { storeUrl } = useKoelPlus()
 </script>
 
 <style scoped lang="scss">
-a {
+a.upgrade-to-plus-btn {
   @include inset-when-pressed();
 
-  background: transparent;
-  border-width: 1px;
-  border-style: solid;
-  padding: .5rem 1rem;
+  background: linear-gradient(97.78deg, #671ce4 17.5%, #c62be8 113.39%);
   border-radius: 5px;
-  border-color: var(--color-text-primary);
+  border-style: solid;
+  padding: .65rem 1rem;
 
   &:hover {
-    transition: .3s ease-in-out;
-    background: var(--color-highlight);
-    border-color: var(--color-highlight);
     color: var(--color-text-primary) !important;
   }
 
   &:active {
-    transition: none;
+    padding: .65rem 1rem; // prevent layout jump in sidebar
   }
 }
 </style>

resources/assets/sass/partials/_mixins.scss

@@ -156,7 +156,7 @@
 
 @mixin inset-when-pressed() {
   &:not([disabled]):active {
-    box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, .6);
+    box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .6);
   }
 }