Implemented slim Sidebar setting

Still need to move back the toast messages when slimSidebar is set

src/components/TheSidebar.vue

@@ -4,6 +4,7 @@
 		class="top-0 left-0 flex flex-col w-64 h-screen bg-panels-bg text-foreground"
 		role="navigation"
 		aria-label="sidebar"
+		ref="sidebar"
 	>
 		<router-link
 			tag="a"
@@ -217,6 +218,11 @@ export default {
 		socket.on('updateAvailable', () => {
 			this.updateAvailable = true
 		})
+
+		// Check if download tab has slim entries
+		if ('true' === localStorage.getItem('slimSidebar')) {
+			this.$refs.sidebar.classList.add('slim')
+		}
 	},
 	methods: {
 		changeTheme(newTheme) {

src/components/pages/Settings.vue

@@ -72,6 +72,10 @@
 				<input type="checkbox" v-model="changeSlimDownloads" />
 				<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
 			</label>
+			<label class="with_checkbox">
+				<input type="checkbox" v-model="changeSlimSidebar" />
+				<span class="checkbox_text">{{ $t('settings.appearance.slimSidebar') }}</span>
+			</label>
 		</div>
 
 		<div class="settings-group">
@@ -683,6 +687,7 @@ export default {
 			lastUser: '',
 			spotifyUser: '',
 			slimDownloads: false,
+			slimSidebar: false,
 			previewVolume: window.vol,
 			accountNum: 0,
 			accounts: []
@@ -708,6 +713,16 @@ export default {
 				localStorage.setItem('slimDownloads', wantSlimDownloads)
 			}
 		},
+		changeSlimSidebar: {
+			get() {
+				return this.slimSidebar
+			},
+			set(wantSlimSidebar) {
+				this.slimSidebar = wantSlimSidebar
+				document.getElementById('sidebar').classList.toggle('slim', wantSlimSidebar)
+				localStorage.setItem('slimSidebar', wantSlimSidebar)
+			}
+		},
 		pictureHref() {
 			// Default image: https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg
 			return `https://e-cdns-images.dzcdn.net/images/user/${this.user.picture}/125x125-000000-80-0-0.jpg`
@@ -734,6 +749,7 @@ export default {
 		}
 
 		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
+		this.changeSlimSidebar = 'true' === localStorage.getItem('slimSidebar')
 
 		let volume = parseInt(localStorage.getItem('previewVolume'))
 

src/lang/en.js

@@ -199,7 +199,8 @@ const en = {
 		},
 		appearance: {
 			title: 'Appearance',
-			slimDownloadTab: 'Slim download tab'
+			slimDownloadTab: 'Slim download tab',
+			slimSidebar: 'Slim Sidebar'
 		},
 		downloadPath: {
 			title: 'Download Path'

src/lang/it.js

@@ -203,7 +203,8 @@ const it = {
 		},
 		appearance: {
 			title: 'Aspetto',
-			slimDownloadTab: 'Tab dei download slim'
+			slimDownloadTab: 'Tab dei download slim',
+			slimSidebar: 'Sidebar slim'
 		},
 		downloadPath: {
 			title: 'Cartella di download'