deemixer/src/components/TheSidebar.vue

<template>
	<aside
		id="sidebar"
		class="top-0 left-0 flex flex-col w-64 h-screen bg-panels-bg text-foreground"
		:class="{ slim: isSlim }"
		role="navigation"
		aria-label="sidebar"
		ref="sidebar"
	>
		<router-link
			tag="a"
			v-for="link in links"
			:key="link.id"
			class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
			:id="link.id"
			:class="{ 'bg-background-main': activeTablink === link.name }"
			:aria-label="link.ariaLabel"
			:to="{ name: link.routerName }"
			@click.native="activeTablink = link.name"
		>
			<i
				class="p-2 text-3xl material-icons side_icon group-hover:text-primary"
				:class="{ 'text-primary': activeTablink === link.name }"
			>
				{{ link.icon }}
			</i>
			<span class="ml-5 overflow-hidden capitalize whitespace-no-wrap main_tablinks_text" style="letter-spacing: 1.3px">
				{{ $t(link.label) }}
			</span>
			<span
				v-if="link.name === 'about' && updateAvailable"
				id="update-notification"
				class="w-3 h-3 bg-red-600 rounded-full"
			></span>
		</router-link>

		<span id="theme_selector" class="flex h-12 mt-5" role="link" aria-label="theme selector">
			<i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme">
				brush
			</i>
			<div id="theme_togglers" class="relative flex items-center w-full justify-evenly">
				<div
					v-for="theme of themes"
					:key="theme"
					class="w-6 h-6 border rounded-full cursor-pointer theme_toggler border-grayscale-500"
					:class="[{ 'theme_toggler--active': activeTheme === theme }, `theme_toggler--${theme}`]"
					@click="changeTheme(theme)"
				></div>
			</div>
		</span>
	</aside>
</template>

<style lang="scss" scoped>
#sidebar.slim {
	width: 46px;
}

#sidebar.slim .main_tablinks_text {
	display: none;
}

#sidebar.slim #theme_selector,
#sidebar.slim #theme_togglers {
	display: inline-grid;
	grid-gap: 8px;
}

#update-notification {
	position: absolute;
	left: 30px;
	top: 12px;
}

.theme_toggler {
	transition: border 200ms ease-in-out;

	&--active {
		border-width: 3px;
	}

	&--light {
		background-color: #fff;
	}

	&--dark {
		background-color: hsl(0, 0%, 8%);
	}

	&--purple {
		background: hsl(261, 85%, 37%);
	}
}
</style>

<script>
import { socket } from '@/utils/socket'
import { mapGetters } from 'vuex'

export default {
	data() {
		return {
			activeTheme: 'light',
			themes: ['purple', 'dark', 'light'],
			activeTablink: 'home',
			updateAvailable: false,
			links: [
				{
					id: 'main_home_tablink',
					name: 'home',
					ariaLabel: 'home',
					routerName: 'Home',
					icon: 'home',
					label: 'sidebar.home'
				},
				{
					id: 'main_search_tablink',
					name: 'search',
					ariaLabel: 'search',
					routerName: 'Search',
					icon: 'search',
					label: 'sidebar.search'
				},
				{
					id: 'main_charts_tablink',
					name: 'charts',
					ariaLabel: 'charts',
					routerName: 'Charts',
					icon: 'show_chart',
					label: 'sidebar.charts'
				},
				{
					id: 'main_favorites_tablink',
					name: 'favorites',
					ariaLabel: 'favorites',
					routerName: 'Favorites',
					icon: 'star',
					label: 'sidebar.favorites'
				},
				{
					id: 'main_analyzer_tablink',
					name: 'analyzer',
					ariaLabel: 'link analyzer',
					routerName: 'Link Analyzer',
					icon: 'link',
					label: 'sidebar.linkAnalyzer'
				},
				{
					id: 'main_settings_tablink',
					name: 'settings',
					ariaLabel: 'settings',
					routerName: 'Settings',
					icon: 'settings',
					label: 'sidebar.settings'
				},
				{
					id: 'main_about_tablink',
					name: 'about',
					ariaLabel: 'info',
					routerName: 'About',
					icon: 'info',
					label: 'sidebar.about'
				}
			]
		}
	},
	computed: {
		...mapGetters({
			isSlim: 'getSlimSidebar'
		})
	},
	mounted() {
		/* === Current theme handling === */
		this.activeTheme = localStorage.getItem('selectedTheme') || 'dark'

		this.$router.afterEach((to, from) => {
			const linkInSidebar = this.links.find(link => link.routerName === to.name)

			if (!linkInSidebar) return

			this.activeTablink = linkInSidebar.name
		})

		/* === Add update notification near info === */
		socket.on('updateAvailable', () => {
			this.updateAvailable = true
		})
	},
	methods: {
		changeTheme(newTheme) {
			if (newTheme === this.activeTheme) return

			this.activeTheme = newTheme
			document.documentElement.setAttribute('data-theme', newTheme)
			localStorage.setItem('selectedTheme', newTheme)

			// Animating everything to have a smoother theme switch
			const allElements = document.querySelectorAll('*')

			allElements.forEach(el => {
				el.classList.add('changing-theme')
			})

			document.documentElement.addEventListener('transitionend', function transitionHandler() {
				allElements.forEach(el => {
					el.classList.remove('changing-theme')
				})

				document.documentElement.removeEventListener('transitionend', transitionHandler)
			})
		}
	}
}
</script>