From 2d58b6307b4ceb78209d26e8be290de5fc328d20 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 7 Nov 2022 12:41:47 -0800
Subject: [PATCH] refactor: :alembic: try `active-class`

---
 package.json                         |  2 +-
 packages/client/src/ui/universal.vue | 51 ++++++++--------------------
 2 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index 601ff3232..3c95cd224 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.9.18",
+	"version": "12.119.0-calc.9.19",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 059354864..13e030787 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -24,17 +24,17 @@
 				<i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span>
 			</div>
 		</button>
-		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/'); updateButtonState();">
+		<button class="button home _button" active-class="active" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')">
 			<div class="button-wrapper" :class="buttonAnimIndex === 0 ? 'on' : ''">
 				<i class="ph-house-bold ph-lg"></i>
 			</div>
 		</button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications'); updateButtonState();">
+		<button class="button notifications _button" active-class="active" @click="mainRouter.push('/my/notifications')">
 			<div class="button-wrapper" :class="buttonAnimIndex === 1 ? 'on' : ''">
 				<i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span>
 			</div>
 		</button>
-		<button class="button messaging _button" @click="mainRouter.push('/my/messaging'); updateButtonState();">
+		<button class="button messaging _button" active-class="active" @click="mainRouter.push('/my/messaging')">
 			<div class="button-wrapper" :class="buttonAnimIndex === 2 ? 'on' : ''">
 				<i class="ph-chats-teardrop-bold ph-lg"></i><span v-if="$i?.hasUnreadMessagingMessage" class="indicator"><i class="ph-circle-fill"></i></span>
 			</div>
@@ -133,31 +133,7 @@ const menuIndicated = computed(() => {
 	return false;
 });
 
-function updateButtonState(): string {
-	let routerState = window.location.pathname;
-	if (routerState === '/') {
-		buttonAnimIndex.value = 0;
-		return routerState;
-	}
-	if (routerState.includes('/my/notifications')) {
-		buttonAnimIndex.value = 1;
-		return routerState;
-	}
-	if (routerState.includes('/my/messaging')) {
-		buttonAnimIndex.value = 2;
-		return routerState;
-	}
-	buttonAnimIndex.value = 3;
-	return routerState;
-}
-
-updateButtonState();
-
-mainRouter.on('change', () => {
-	drawerMenuShowing.value = false;
-	const newState = updateButtonState();
-	console.log(newState);
-});
+mainRouter.on('change', () => (drawerMenuShowing.value = false));
 
 document.documentElement.style.overflowY = 'scroll';
 
@@ -182,7 +158,7 @@ onMounted(() => {
 
 		function createScrollStopListener(element: Window, callback: TimerHandler, timeout: number): () => void {
 			let handle = 0;
-			const onScroll = () => {
+			const onScroll = (): void => {
 				if (handle) {
 					clearTimeout(handle);
 				}
@@ -396,6 +372,15 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 			}
 
 			> .button-wrapper {
+
+				&.on {
+					background-color: var(--accentedBg);
+					width: 100%;
+					border-radius: 999px;
+					transform: translateY(-0.5em);
+					transition: all 0.3s ease-in-out;
+				}
+
 				> .indicator {
 					position: absolute;
 					top: 0;
@@ -406,14 +391,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 				}
 			}
 
-			> .button-wrapper.on {
-				background-color: var(--accentedBg);
-				width: 100%;
-				border-radius: 999px;
-				transform: translateY(-0.5em);
-				transition: all 0.3s ease-in-out;
-			}
-
 			&:not(:last-child) {
 				margin-right: 12px;
 			}