fix: Update SideNavPartial tests for hidden home avatar

src/partials/SideNavPartial.vue

@@ -2,15 +2,15 @@
 	<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>
 			</div>
 
 			<!-- 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', navLayoutClasses]">
 					<ul class="space-y-4">
 						<li class="py-2">
 							<!-- home -->
@@ -113,22 +113,24 @@ const navSocialLinks = useHeaderSocialLinks(social);
 const { tooltip, showTooltip, hideTooltip } = useTooltip();
 
 const isAbout = computed<boolean>(() => currentRoute.path === '/about');
+const showSidebarAvatar = computed<boolean>(() => currentRoute.name !== 'home');
 
 const CONTENT_ALIGNED_ROUTES = new Set(['/about', '/projects', '/resume']);
 const POST_ROUTE_PREFIX = '/post/';
 
-const navPaddingTopClass = computed<string>(() => {
-	const { path } = currentRoute;
+const navLayoutClasses = computed<string>(() => {
+	const { name, path } = currentRoute;
+	const classes: string[] = [];
 
-	if (path === '/') {
-		return 'pt-16';
+	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');
+	} 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 {

src/router.ts

@@ -22,6 +22,7 @@ const router: Router = createRouter({
 	routes: [
 		{
 			path: '/',
+			name: 'home',
 			component: () => import('@pages/HomePage.vue'),
 		},
 		{

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();
 	});