From aa62f417b27372a20103ebf62b3be4c3e2d5c71e Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Sun, 9 Jul 2023 00:22:17 -0400
Subject: [PATCH] fix: nav post button gradient transition (#10401) + half
 refactor ?

---
 packages/client/src/ui/_common_/navbar.vue | 398 +++++++++------------
 1 file changed, 167 insertions(+), 231 deletions(-)

diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index a470c69b9..e98aa738c 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -26,7 +26,7 @@
 				<MkA
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.timeline"
-					class="item index"
+					class="nav-item index"
 					active-class="active"
 					to="/"
 					exact
@@ -46,7 +46,7 @@
 						v-tooltip.noDelay.right="
 							i18n.ts[navbarItemDef[item].title]
 						"
-						class="item _button"
+						class="nav-item _button"
 						:class="[item, { active: navbarItemDef[item].active }]"
 						active-class="active"
 						:to="navbarItemDef[item].to"
@@ -78,7 +78,7 @@
 					v-if="$i.isAdmin || $i.isModerator"
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.controlPanel"
-					class="item _button"
+					class="nav-item _button"
 					active-class="active"
 					to="/admin"
 				>
@@ -99,7 +99,7 @@
 				<button
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.more"
-					class="item _button"
+					class="nav-item _button"
 					@click="more"
 				>
 					<i
@@ -116,7 +116,7 @@
 				<MkA
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.settings"
-					class="item _button"
+					class="nav-item _button"
 					active-class="active"
 					to="/settings"
 				>
@@ -127,7 +127,7 @@
 			<div class="bottom">
 				<button
 					v-tooltip.noDelay.right="i18n.ts.note"
-					class="item _button post"
+					class="nav-item _button post"
 					data-cy-open-post-form
 					@click="os.post"
 				>
@@ -272,6 +272,125 @@ function more(ev: MouseEvent) {
 		flex-direction: column;
 	}
 
+	.nav-item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding-inline: 30px;
+		line-height: 2.85rem;
+		margin-bottom: 0.5rem;
+		white-space: nowrap;
+		width: 100%;
+		text-align: left;
+		box-sizing: border-box;
+		color: var(--navFg);
+
+		&:before, &.post::after {
+			content: "";
+			display: block;
+			width: calc(100% - 34px);
+			height: 100%;
+			margin: auto;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 999px;
+			background: var(--accentedBg);
+			opacity: 0;
+			z-index: -2;
+		}
+
+		> .icon {
+			position: relative;
+			width: 32px;
+			margin-right: 8px;
+		}
+
+		> .indicator {
+			position: absolute;
+			top: 0;
+			left: 20px;
+			color: var(--navIndicator);
+			font-size: 8px;
+		}
+
+		> .animateIndicator {
+			animation: blink 1s infinite;
+		}
+		> .text {
+			position: relative;
+			font-size: 0.9em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&:hover,
+		&:focus-within {
+			text-decoration: none;
+			color: var(--navHoverFg);
+			transition: color 0.4s ease;
+		}
+
+		&.active {
+			color: var(--navActive);
+		}
+
+		&:hover,
+		&:focus-within,
+		&.active {
+			color: var(--accent);
+			opacity: 1;
+			transition: color 0.4s, opacity 0.4s;
+			&::before {
+				opacity: 1;
+			}
+		}
+	}
+	.post {
+		padding-inline: 0;
+		color: var(--fgOnAccent);
+		font-weight: bold;
+
+		&::before {
+			opacity: 1;
+			background: linear-gradient(
+				90deg,
+				var(--buttonGradateA),
+				var(--buttonGradateB)
+			);
+		}
+		&::after {
+			background: var(--accentLighten) !important;
+			opacity: 0;
+			z-index: -1;
+			transition: opacity 0.2s;
+		}
+
+		&:hover,
+		&:focus-within,
+		&.active {
+			&::after {
+				opacity: 1;
+			}
+		}
+
+		> .icon,
+		> .text {
+			position: relative;
+			left: 3rem;
+			margin: 0;
+			width: auto;
+			color: var(--fgOnAccent);
+			transform: translateY(0em);
+		}
+
+		> .text {
+			margin-left: 1rem;
+		}
+	}
+
 	&:not(.iconOnly) {
 		> .body {
 			margin-left: -200px;
@@ -312,57 +431,6 @@ function more(ev: MouseEvent) {
 			> .bottom {
 				padding: 20px 0;
 
-				> .post {
-					position: relative;
-					width: 100%;
-					height: 40px;
-					color: var(--fgOnAccent);
-					font-weight: bold;
-					text-align: left;
-					display: flex;
-					align-items: center;
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 38px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(
-							90deg,
-							var(--buttonGradateA),
-							var(--buttonGradateB)
-						);
-					}
-
-					&:hover,
-					&:focus-within,
-					&.active {
-						&:before {
-							background: var(--accentLighten);
-							transition: all 0.4s ease;
-						}
-					}
-
-					> .icon,
-					> .text {
-						position: relative;
-						left: 3rem;
-						color: var(--fgOnAccent);
-						transform: translateY(0em);
-					}
-
-					> .text {
-						margin-left: 1rem;
-					}
-				}
-
 				> .instance {
 					position: relative;
 					display: block;
@@ -400,78 +468,6 @@ function more(ev: MouseEvent) {
 					margin: 16px 16px;
 					border-top: solid 0.5px var(--divider);
 				}
-
-				> .item {
-					position: relative;
-					display: flex;
-					align-items: center;
-					padding-left: 30px;
-					line-height: 2.85rem;
-					margin-bottom: 0.5rem;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> .icon {
-						position: relative;
-						width: 32px;
-						margin-right: 8px;
-					}
-
-					> .indicator {
-						position: absolute;
-						top: 0;
-						left: 20px;
-						color: var(--navIndicator);
-						font-size: 8px;
-					}
-
-					> .animateIndicator {
-						animation: blink 1s infinite;
-					}
-
-					> .text {
-						position: relative;
-						font-size: 0.9em;
-						overflow: hidden;
-						text-overflow: ellipsis;
-					}
-
-					&:hover,
-					&:focus-within {
-						text-decoration: none;
-						color: var(--navHoverFg);
-						transition: all 0.4s ease;
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover,
-					&:focus-within,
-					&.active {
-						color: var(--accent);
-						transition: all 0.4s ease;
-
-						&:before {
-							content: "";
-							display: block;
-							width: calc(100% - 34px);
-							height: 100%;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-					}
-				}
 			}
 		}
 	}
@@ -503,52 +499,6 @@ function more(ev: MouseEvent) {
 			> .bottom {
 				padding: 20px 0;
 
-				> .post {
-					display: block;
-					position: relative;
-					width: 100%;
-					height: 52px;
-					margin-bottom: 16px;
-					text-align: center;
-
-					&:before {
-						content: "";
-						display: block;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						margin: auto;
-						width: 52px;
-						aspect-ratio: 1/1;
-						border-radius: 100%;
-						background: linear-gradient(
-							90deg,
-							var(--buttonGradateA),
-							var(--buttonGradateB)
-						);
-					}
-
-					&:hover,
-					&:focus-within,
-					&.active {
-						&:before {
-							background: var(--accentLighten);
-							transition: all 0.4s ease;
-						}
-					}
-
-					> .icon {
-						position: relative;
-						color: var(--fgOnAccent);
-					}
-
-					> .text {
-						display: none;
-					}
-				}
-
 				> .help {
 					position: relative;
 					display: block;
@@ -587,70 +537,56 @@ function more(ev: MouseEvent) {
 					border-top: solid 0.5px var(--divider);
 				}
 
-				> .item {
-					display: block;
-					position: relative;
-					padding: 1.1rem 0;
-					margin-bottom: 0.2rem;
-					width: 100%;
-					text-align: center;
+			}
+		}
+		.nav-item {
+			padding: 1.1rem 0;
+			margin-bottom: 0.2rem;
+			text-align: center;
 
-					> .icon {
-						display: block;
-						margin: 0 auto;
-						opacity: 0.7;
-						transform: translateY(0em);
-					}
+			> .icon {
+				display: block;
+				margin: 0 auto;
+				opacity: 0.7;
+				transform: translateY(0em);
+			}
 
-					> .text {
-						display: none;
-					}
+			> .text {
+				display: none;
+			}
 
-					> .indicator {
-						position: absolute;
-						top: 6px;
-						left: 24px;
-						color: var(--navIndicator);
-						font-size: 8px;
-					}
+			> .indicator {
+				position: absolute;
+				top: 6px;
+				left: 24px;
+				color: var(--navIndicator);
+				font-size: 8px;
+			}
 
-					> .animateIndicator {
-						animation: blink 1s infinite;
-					}
-
-					&:hover,
-					&:focus-within,
-					&.active {
-						text-decoration: none;
-						color: var(--accent);
-						transition: all 0.4s ease;
-
-						&:before {
-							content: "";
-							display: block;
-							height: 100%;
-							aspect-ratio: 1;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-
-						> .icon,
-						> .text {
-							opacity: 1;
-						}
-					}
-				}
+			> .animateIndicator {
+				animation: blink 1s infinite;
+			}
+		}
+		.post {
+			width: 100%;
+			height: 52px;
+			margin-bottom: 16px;
+			&:before, &::after {
+				inset: 0;
+				margin: auto;
+				width: 52px;
+				aspect-ratio: 1/1;
+			}
+			> .icon {
+				left: unset;
+			}
+			> .text {
+				display: none;
 			}
 		}
 	}
 
-	.item {
+	.nav-item {
 		outline: none;
 		&:focus-visible:before {
 			outline: auto;