feat(webui): actually use slimSidebar setting

.changeset/ten-candles-sneeze.md

@@ -0,0 +1,5 @@
+---
+"deemix-webui": minor
+---
+
+Correctly slim the sidebar when slimSidebar enabled

webui/src/client/components/TheSidebar.vue

@@ -15,11 +15,11 @@ const { THEMES, currentTheme } = useTheme();
 
 const activeTab = links.find((link) => link.routerName === route.name);
 
-const isSlim = ref(false);
 const activeTablink = ref(activeTab ? activeTab.name : "home");
 
 /* === Add update notification near info === */
 const updateAvailable = computed(() => appInfoStore.updateAvailable);
+const hasSlimSidebar = computed(() => appInfoStore.hasSlimSidebar);
 
 router.afterEach((to) => {
 	const linkInSidebar = links.find((link) => link.routerName === to.name);
@@ -32,25 +32,33 @@ router.afterEach((to) => {
 
 <template>
 	<aside
-		id="sidebar"
-		:class="{ 'slim-sidebar w-12': isSlim }"
-		:style="{ minWidth: '14rem' }"
-		aria-label="sidebar"
 		class="bg-panels-bg text-foreground left-0 top-0 flex h-screen flex-col"
+		:class="{
+			'slim-sidebar w-20': hasSlimSidebar,
+			'min-w-56': !hasSlimSidebar,
+		}"
+		aria-label="sidebar"
 		role="navigation"
 	>
 		<img
 			src="@/assets/deemix-icon.svg?url"
 			alt="deemix-icon"
-			class="mx-auto my-5 w-24"
+			class="mx-auto"
+			:class="{
+				'my-2 w-14': hasSlimSidebar,
+				'my-5 w-24': !hasSlimSidebar,
+			}"
 		/>
 		<router-link
 			v-for="link in links"
 			:key="link.name"
 			:aria-label="link.ariaLabel"
-			:class="{ 'bg-background-main': activeTablink === link.name }"
+			class="hover:bg-background-main text-foreground group relative flex h-16 w-full items-center px-4 no-underline"
+			:class="{
+				'bg-background-main': activeTablink === link.name,
+				'justify-center': hasSlimSidebar,
+			}"
 			:to="{ name: link.routerName }"
-			class="main_tablinks hover:bg-background-main text-foreground group relative flex h-16 items-center px-4 no-underline"
 			@click="activeTablink = link.name"
 		>
 			<i
@@ -60,33 +68,28 @@ router.afterEach((to) => {
 				{{ link.icon }}
 			</i>
 			<span
-				:class="{ hidden: isSlim }"
-				class="whitespace-no-wrap main-tablinks-text ml-3 overflow-hidden capitalize"
+				:class="{ hidden: hasSlimSidebar }"
+				class="whitespace-no-wrap ml-3 overflow-hidden capitalize"
 			>
 				{{ t(link.label) }}
 			</span>
 			<span
 				v-if="link.name === 'about' && updateAvailable"
-				id="update-notification"
-				class="absolute h-3 w-3 rounded-full bg-red-600"
+				class="absolute left-10 top-3 h-3 w-3 rounded-full bg-red-600"
 			></span>
 		</router-link>
 
-		<span
-			id="theme_selector"
-			:class="{ 'inline-grid gap-2': isSlim }"
-			aria-label="theme selector"
+		<div
 			class="-ml-10 mb-5 mt-auto flex h-12 items-center justify-center gap-2"
+			:class="{ 'ml-0 h-auto flex-col': hasSlimSidebar }"
+			aria-label="theme selector"
 			role="link"
 		>
-			<i
-				class="material-icons side_icon side_icon--theme w-10 p-2 text-xl transition-all duration-500"
-			>
+			<i class="material-icons w-10 p-2 text-xl transition-all duration-500">
 				brush
 			</i>
 			<div
-				id="theme_togglers"
-				:class="{ 'inline-grid gap-2': isSlim }"
+				:class="{ 'inline-grid gap-2': hasSlimSidebar }"
 				class="relative flex items-center justify-center gap-3"
 			>
 				<div
@@ -100,38 +103,11 @@ router.afterEach((to) => {
 					@click="currentTheme = theme"
 				/>
 			</div>
-		</span>
+		</div>
 	</aside>
 </template>
 
 <style scoped>
-.deemix-icon-container {
-	display: grid;
-	place-content: center;
-}
-.slim-sidebar .deemix-icon-container {
-	margin: 0.5rem 0;
-}
-.slim-sidebar .deemix-icon-container:deep(svg) {
-	height: 30px;
-}
-.deemix-icon-container:deep(svg) {
-	height: 75px;
-}
-
-#update-notification {
-	top: 12px;
-	left: 30px;
-}
-
-.side_icon--theme {
-	font-size: 1.5rem /* 24px */;
-	line-height: 2rem /* 32px */;
-}
-
-.theme_toggler {
-	transition: border 200ms ease-in-out;
-}
 .theme_toggler--active {
 	border-width: 3px;
 }