fix: Hide SideNav avatar and socials on about page

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 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>
 			</div>
 
 			<!-- 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 -->
@@ -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,25 @@ const isHome = computed<boolean>(() => {
 	return currentRoute.path === '/';
 });
 
+const isAbout = computed<boolean>(() => currentRoute.path === '/about');
+
+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';
 }

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 {
@@ -92,14 +93,75 @@ 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(true);
+		expect(wrapper.findComponent(AvatarPartial).exists()).toBe(false);
+
+		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 paths = ['/projects', '/resume', '/post/example-post'];
+
+		for (const path of paths) {
+			const { wrapper } = await mountSideNavAt(path);
+
+			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('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-12');
+		expect(nav.classes()).not.toContain('md:pt-16');
 
 		wrapper.unmount();
 	});
 
+	it('aligns nav padding with the main content on content-aligned routes', async () => {
+		const paths = ['/about', '/projects', '/resume', '/post/example-post'];
+
+		for (const path of paths) {
+			const { wrapper } = await mountSideNavAt(path);
+
+			const nav = wrapper.find('nav');
+
+			expect(nav.classes()).toContain('pt-12');
+			expect(nav.classes()).toContain('md:pt-16');
+
+			wrapper.unmount();
+		}
+	});
+
 	it('renders social links after the primary navigation', async () => {
 		const { wrapper, fetchSocialMock } = await mountSideNavAt('/projects');