lots of styling

src/components/SidebarLink.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import NotchedBox from './NotchedBox.astro';
+
+type Props = HTMLAttributes<'a'>;
+
+const { href, class: className, ...props } = Astro.props;
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
+const subpath = pathname.match(/[^\/]+/g);
+const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
+---
+
+<NotchedBox fillNotches={ isActive ? "right" : "none" }>
+  <a href={href} class:list={[className, { active: isActive }]} {...props}>
+    <slot />
+  </a>
+</NotchedBox>
+<style>
+	a {
+		display: inline-block;
+		text-decoration: none;
+	}
+	a.active {
+		font-weight: bolder;
+		text-decoration: underline;
+	}
+</style>