From f43fb1af65d87b241dd8fe1b20cf34055572fbfc Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 13:27:31 +0800
Subject: [PATCH 1/3] Update SideNav avatar expectations

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

diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index 04cce3d..efaf59f 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 class="flex justify-center my-4">
+			<div v-if="showSidebarAvatar" class="flex justify-center my-4">
 				<router-link v-lazy-link to="/">
 					<AvatarPartial width="w-16" height="h-16" decoding="async" />
 				</router-link>
@@ -10,7 +10,7 @@
 
 			<!-- Sidebar menu-->
 			<div class="flex-1 grow flex items-start">
-				<nav :class="['w-full pb-10 mt-2', navPaddingTopClass]">
+				<nav :class="['w-full pb-10', navPaddingTopClass, { 'mt-2': !showSidebarAvatar }]">
 					<ul class="space-y-4">
 						<li class="py-2">
 							<!-- home -->
@@ -113,6 +113,7 @@ const navSocialLinks = useHeaderSocialLinks(social);
 const { tooltip, showTooltip, hideTooltip } = useTooltip();
 
 const isAbout = computed<boolean>(() => currentRoute.path === '/about');
+const showSidebarAvatar = computed<boolean>(() => currentRoute.path !== '/');
 
 const CONTENT_ALIGNED_ROUTES = new Set(['/about', '/projects', '/resume']);
 const POST_ROUTE_PREFIX = '/post/';
diff --git a/tests/partials/SideNavPartial.test.ts b/tests/partials/SideNavPartial.test.ts
index 369f230..7f7e40a 100644
--- a/tests/partials/SideNavPartial.test.ts
+++ b/tests/partials/SideNavPartial.test.ts
@@ -85,10 +85,10 @@ describe('SideNavPartial', () => {
 		debugErrorMock.mockClear();
 	});
 
-	it('shows the avatar on the home route', async () => {
+	it('hides the avatar on the home route', async () => {
 		const { wrapper } = await mountSideNavAt('/');
 
-		expect(wrapper.findComponent(AvatarPartial).exists()).toBe(true);
+		expect(wrapper.findComponent(AvatarPartial).exists()).toBe(false);
 
 		wrapper.unmount();
 	});
@@ -143,6 +143,17 @@ describe('SideNavPartial', () => {
 		expect(nav.classes()).toContain('pt-16');
 		expect(nav.classes()).not.toContain('pt-12');
 		expect(nav.classes()).not.toContain('md:pt-16');
+		expect(nav.classes()).toContain('mt-2');
+
+		wrapper.unmount();
+	});
+
+	it('does not apply additional top margin when the avatar is visible', async () => {
+		const { wrapper } = await mountSideNavAt('/about');
+
+		const nav = wrapper.find('nav');
+
+		expect(nav.classes()).not.toContain('mt-2');
 
 		wrapper.unmount();
 	});

From 83f5ed6d2c29019a726d4e258fd1246cfaac022f Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 13:39:46 +0800
Subject: [PATCH 2/3] Refactor side nav layout classes

---
 src/partials/SideNavPartial.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index efaf59f..88ac6aa 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 pb-10', navPaddingTopClass, { 'mt-2': !showSidebarAvatar }]">
+				<nav :class="['w-full pb-10', navLayoutClasses]">
 					<ul class="space-y-4">
 						<li class="py-2">
 							<!-- home -->
@@ -118,18 +118,19 @@ const showSidebarAvatar = computed<boolean>(() => currentRoute.path !== '/');
 const CONTENT_ALIGNED_ROUTES = new Set(['/about', '/projects', '/resume']);
 const POST_ROUTE_PREFIX = '/post/';
 
-const navPaddingTopClass = computed<string>(() => {
+const navLayoutClasses = computed<string>(() => {
 	const { path } = currentRoute;
+	const classes: string[] = [];
 
 	if (path === '/') {
-		return 'pt-16';
+		classes.push('pt-16', 'mt-2');
+	} else if (path.startsWith(POST_ROUTE_PREFIX) || CONTENT_ALIGNED_ROUTES.has(path)) {
+		classes.push('pt-12', 'md:pt-16');
+	} else {
+		classes.push('pt-16');
 	}
 
-	if (path.startsWith(POST_ROUTE_PREFIX) || CONTENT_ALIGNED_ROUTES.has(path)) {
-		return 'pt-12 md:pt-16';
-	}
-
-	return 'pt-16';
+	return classes.join(' ');
 });
 
 function bindIconClassFor(isActive: boolean): string {

From 3813204cef543fb74dffad9b330e2d85612774b7 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 17 Oct 2025 13:43:27 +0800
Subject: [PATCH 3/3] Reference home route by name

---
 src/partials/SideNavPartial.vue | 6 +++---
 src/router.ts                   | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index 88ac6aa..cfa3654 100644
--- a/src/partials/SideNavPartial.vue
+++ b/src/partials/SideNavPartial.vue
@@ -113,16 +113,16 @@ const navSocialLinks = useHeaderSocialLinks(social);
 const { tooltip, showTooltip, hideTooltip } = useTooltip();
 
 const isAbout = computed<boolean>(() => currentRoute.path === '/about');
-const showSidebarAvatar = computed<boolean>(() => currentRoute.path !== '/');
+const showSidebarAvatar = computed<boolean>(() => currentRoute.name !== 'home');
 
 const CONTENT_ALIGNED_ROUTES = new Set(['/about', '/projects', '/resume']);
 const POST_ROUTE_PREFIX = '/post/';
 
 const navLayoutClasses = computed<string>(() => {
-	const { path } = currentRoute;
+	const { name, path } = currentRoute;
 	const classes: string[] = [];
 
-	if (path === '/') {
+	if (name === 'home') {
 		classes.push('pt-16', 'mt-2');
 	} else if (path.startsWith(POST_ROUTE_PREFIX) || CONTENT_ALIGNED_ROUTES.has(path)) {
 		classes.push('pt-12', 'md:pt-16');
diff --git a/src/router.ts b/src/router.ts
index 1dab80b..c760d00 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -22,6 +22,7 @@ const router: Router = createRouter({
 	routes: [
 		{
 			path: '/',
+			name: 'home',
 			component: () => import('@pages/HomePage.vue'),
 		},
 		{