From 9516bf8b1d6c4b2977cd104b2959624ad1e070a3 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 11:00:49 +0800
Subject: [PATCH 1/5] Hide nav avatar and socials on about page

---
 src/partials/SideNavPartial.vue | 42 ++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index 5a664f7..aec4f86 100644
--- a/src/partials/SideNavPartial.vue
+++ b/src/partials/SideNavPartial.vue
@@ -2,7 +2,7 @@
 	<div class="sticky top-0 w-16 md:w-24 shrink-0 h-screen overflow-y-auto no-scrollbar border-r border-slate-200 dark:border-slate-800">
 		<div class="h-full flex flex-col justify-between after:flex-1 after:mt-auto">
 			<!-- Sidebar avatar -->
-			<div v-if="!isHome" class="flex justify-center my-4">
+			<div v-if="!isHome && !isAbout" class="flex justify-center my-4">
 				<router-link v-lazy-link to="/">
 					<AvatarPartial width="w-16" height="h-16" loading="lazy" decoding="async" fetchpriority="low" />
 				</router-link>
@@ -65,24 +65,26 @@
 								</a>
 							</router-link>
 						</li>
-						<li v-if="navSocialLinks.length" class="py-2" aria-hidden="true">
-							<div class="mx-auto h-px w-8 bg-slate-200 dark:bg-slate-700"></div>
-						</li>
-						<li v-for="link in navSocialLinks" :key="link.name" class="py-2">
-							<a
-								class="h6 blog-side-nav-router-link-a blog-side-nav-router-link-a-resting"
-								:href="link.url"
-								target="_blank"
-								rel="noopener noreferrer"
-								@mouseenter="showTooltip($event, link.title)"
-								@mouseleave="hideTooltip"
-							>
-								<span class="sr-only">{{ link.label }}</span>
-								<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
-									<path :class="link.iconClass" :d="link.icon" />
-								</svg>
-							</a>
-						</li>
+						<template v-if="!isAbout">
+							<li v-if="navSocialLinks.length" class="py-2" aria-hidden="true">
+								<div class="mx-auto h-px w-8 bg-slate-200 dark:bg-slate-700"></div>
+							</li>
+							<li v-for="link in navSocialLinks" :key="link.name" class="py-2">
+								<a
+									class="h6 blog-side-nav-router-link-a blog-side-nav-router-link-a-resting"
+									:href="link.url"
+									target="_blank"
+									rel="noopener noreferrer"
+									@mouseenter="showTooltip($event, link.title)"
+									@mouseleave="hideTooltip"
+								>
+									<span class="sr-only">{{ link.label }}</span>
+									<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+										<path :class="link.iconClass" :d="link.icon" />
+									</svg>
+								</a>
+							</li>
+						</template>
 					</ul>
 				</nav>
 			</div>
@@ -116,6 +118,8 @@ const isHome = computed<boolean>(() => {
 	return currentRoute.path === '/';
 });
 
+const isAbout = computed<boolean>(() => currentRoute.path === '/about');
+
 function bindIconClassFor(isActive: boolean): string {
 	return isActive ? 'blog-side-nav-router-link-a-active' : 'blog-side-nav-router-link-a-resting';
 }

From 4abfb27b87b082bcc1a145538e3cf778e9afe7ea Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 11:12:17 +0800
Subject: [PATCH 2/5] Adjust SideNav about spacing

---
 src/partials/SideNavPartial.vue       |  4 ++-
 tests/partials/SideNavPartial.test.ts | 44 ++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index aec4f86..1b4628c 100644
--- a/src/partials/SideNavPartial.vue
+++ b/src/partials/SideNavPartial.vue
@@ -10,7 +10,7 @@
 
 			<!-- Sidebar menu-->
 			<div class="flex-1 grow flex items-start">
-				<nav class="w-full pt-16 pb-10">
+				<nav :class="['w-full pb-10', navPaddingTopClass]">
 					<ul class="space-y-4">
 						<li class="py-2">
 							<!-- home -->
@@ -120,6 +120,8 @@ const isHome = computed<boolean>(() => {
 
 const isAbout = computed<boolean>(() => currentRoute.path === '/about');
 
+const navPaddingTopClass = computed<string>(() => (isAbout.value ? 'pt-28 md:pt-32' : 'pt-16'));
+
 function bindIconClassFor(isActive: boolean): string {
 	return isActive ? 'blog-side-nav-router-link-a-active' : 'blog-side-nav-router-link-a-resting';
 }
diff --git a/tests/partials/SideNavPartial.test.ts b/tests/partials/SideNavPartial.test.ts
index ae6396c..f10f043 100644
--- a/tests/partials/SideNavPartial.test.ts
+++ b/tests/partials/SideNavPartial.test.ts
@@ -92,14 +92,56 @@ describe('SideNavPartial', () => {
 		wrapper.unmount();
 	});
 
-	it('shows the avatar on non-home routes', async () => {
+	it('hides the avatar on the about route', async () => {
 		const { wrapper } = await mountSideNavAt('/about');
 
+		expect(wrapper.findComponent(AvatarPartial).exists()).toBe(false);
+
+		wrapper.unmount();
+	});
+
+	it('shows the avatar on other non-home routes', async () => {
+		const { wrapper } = await mountSideNavAt('/projects');
+
 		expect(wrapper.findComponent(AvatarPartial).exists()).toBe(true);
 
 		wrapper.unmount();
 	});
 
+	it('omits social links on the about route', async () => {
+		const { wrapper, fetchSocialMock } = await mountSideNavAt('/about');
+
+		await flushPromises();
+
+		expect(fetchSocialMock).toHaveBeenCalled();
+		expect(wrapper.find('div.mx-auto.h-px.w-8').exists()).toBe(false);
+		expect(wrapper.findAll('a[rel="noopener noreferrer"]').length).toBe(0);
+
+		wrapper.unmount();
+	});
+
+	it('applies extended nav padding on the about route', async () => {
+		const { wrapper } = await mountSideNavAt('/about');
+
+		const nav = wrapper.find('nav');
+
+		expect(nav.classes()).toContain('pt-28');
+		expect(nav.classes()).toContain('md:pt-32');
+
+		wrapper.unmount();
+	});
+
+	it('uses default nav padding on the home route', async () => {
+		const { wrapper } = await mountSideNavAt('/');
+
+		const nav = wrapper.find('nav');
+
+		expect(nav.classes()).toContain('pt-16');
+		expect(nav.classes()).not.toContain('pt-28');
+
+		wrapper.unmount();
+	});
+
 	it('renders social links after the primary navigation', async () => {
 		const { wrapper, fetchSocialMock } = await mountSideNavAt('/projects');
 

From 23727ab81ccb34a310ed036775fe0f37c5ece75a Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 11:18:12 +0800
Subject: [PATCH 3/5] Align side nav padding across routes

---
 src/partials/SideNavPartial.vue       | 17 ++++++++++++++++-
 tests/partials/SideNavPartial.test.ts | 26 ++++++++++++++++----------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index 1b4628c..09a9bde 100644
--- a/src/partials/SideNavPartial.vue
+++ b/src/partials/SideNavPartial.vue
@@ -120,7 +120,22 @@ const isHome = computed<boolean>(() => {
 
 const isAbout = computed<boolean>(() => currentRoute.path === '/about');
 
-const navPaddingTopClass = computed<string>(() => (isAbout.value ? 'pt-28 md:pt-32' : 'pt-16'));
+const CONTENT_ALIGNED_ROUTES = new Set(['/about', '/projects', '/resume']);
+const POST_ROUTE_PREFIX = '/post/';
+
+const navPaddingTopClass = computed<string>(() => {
+	const { path } = currentRoute;
+
+	if (path === '/') {
+		return 'pt-16';
+	}
+
+	if (path.startsWith(POST_ROUTE_PREFIX) || CONTENT_ALIGNED_ROUTES.has(path)) {
+		return 'pt-12 md:pt-16';
+	}
+
+	return 'pt-16';
+});
 
 function bindIconClassFor(isActive: boolean): string {
 	return isActive ? 'blog-side-nav-router-link-a-active' : 'blog-side-nav-router-link-a-resting';
diff --git a/tests/partials/SideNavPartial.test.ts b/tests/partials/SideNavPartial.test.ts
index f10f043..bc9217f 100644
--- a/tests/partials/SideNavPartial.test.ts
+++ b/tests/partials/SideNavPartial.test.ts
@@ -36,6 +36,7 @@ const routes = [
 	{ path: '/about', name: 'about', component: { template: '<div />' } },
 	{ path: '/projects', name: 'projects', component: { template: '<div />' } },
 	{ path: '/resume', name: 'resume', component: { template: '<div />' } },
+	{ path: '/post/:slug', name: 'post', component: { template: '<div />' } },
 ];
 
 function createTestRouter(initialPath: string): Router {
@@ -120,26 +121,31 @@ describe('SideNavPartial', () => {
 		wrapper.unmount();
 	});
 
-	it('applies extended nav padding on the about route', async () => {
-		const { wrapper } = await mountSideNavAt('/about');
+	it('uses default nav padding on the home route', async () => {
+		const { wrapper } = await mountSideNavAt('/');
 
 		const nav = wrapper.find('nav');
 
-		expect(nav.classes()).toContain('pt-28');
-		expect(nav.classes()).toContain('md:pt-32');
+		expect(nav.classes()).toContain('pt-16');
+		expect(nav.classes()).not.toContain('pt-12');
+		expect(nav.classes()).not.toContain('md:pt-16');
 
 		wrapper.unmount();
 	});
 
-	it('uses default nav padding on the home route', async () => {
-		const { wrapper } = await mountSideNavAt('/');
+	it('aligns nav padding with the main content on content-aligned routes', async () => {
+		const paths = ['/about', '/projects', '/resume', '/post/example-post'];
 
-		const nav = wrapper.find('nav');
+		for (const path of paths) {
+			const { wrapper } = await mountSideNavAt(path);
 
-		expect(nav.classes()).toContain('pt-16');
-		expect(nav.classes()).not.toContain('pt-28');
+			const nav = wrapper.find('nav');
 
-		wrapper.unmount();
+			expect(nav.classes()).toContain('pt-12');
+			expect(nav.classes()).toContain('md:pt-16');
+
+			wrapper.unmount();
+		}
 	});
 
 	it('renders social links after the primary navigation', async () => {

From 8de09f58c6b0f12c6ebfa863c522e054cbaf99c4 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 11:21:01 +0800
Subject: [PATCH 4/5] Add about route social links test

---
 tests/partials/SideNavPartial.test.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/tests/partials/SideNavPartial.test.ts b/tests/partials/SideNavPartial.test.ts
index bc9217f..44190c2 100644
--- a/tests/partials/SideNavPartial.test.ts
+++ b/tests/partials/SideNavPartial.test.ts
@@ -101,6 +101,16 @@ describe('SideNavPartial', () => {
 		wrapper.unmount();
 	});
 
+	it('does not render social links on the about route', async () => {
+		const { wrapper } = await mountSideNavAt('/about');
+
+		const socialLinks = wrapper.findAll('a[rel="noopener noreferrer"]');
+
+		expect(socialLinks).toHaveLength(0);
+
+		wrapper.unmount();
+	});
+
 	it('shows the avatar on other non-home routes', async () => {
 		const { wrapper } = await mountSideNavAt('/projects');
 

From 8518491c7ff348a131dada13beb4658406c49b16 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 11:24:20 +0800
Subject: [PATCH 5/5] Update SideNav avatar visibility tests

---
 tests/partials/SideNavPartial.test.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/tests/partials/SideNavPartial.test.ts b/tests/partials/SideNavPartial.test.ts
index 44190c2..c84ee11 100644
--- a/tests/partials/SideNavPartial.test.ts
+++ b/tests/partials/SideNavPartial.test.ts
@@ -112,11 +112,15 @@ describe('SideNavPartial', () => {
 	});
 
 	it('shows the avatar on other non-home routes', async () => {
-		const { wrapper } = await mountSideNavAt('/projects');
+		const paths = ['/projects', '/resume', '/post/example-post'];
 
-		expect(wrapper.findComponent(AvatarPartial).exists()).toBe(true);
+		for (const path of paths) {
+			const { wrapper } = await mountSideNavAt(path);
 
-		wrapper.unmount();
+			expect(wrapper.findComponent(AvatarPartial).exists()).toBe(true);
+
+			wrapper.unmount();
+		}
 	});
 
 	it('omits social links on the about route', async () => {