utsa-handbook/src/components/Sidebar.astro

---
import get from '@/content/sidebar';
import type { Link } from '@/content/sidebar';
import clsx from 'clsx';
const { currentPage } = Astro.props;
const currentPageMatch = currentPage.slice(1);

const getLinkClasses = (link: Link) => {
	const baseClasses = "block py-2 px-6 my-1 transition-colors border-l hover:border-zinc-400 hover:text-slate-900"
	const isCurrent = link.link !== undefined ? link.link.includes(currentPageMatch) : false;

	return clsx(baseClasses, {
		// Classes for when the link is not the current page
		"dark:border-l-zinc-600 text-zinc-500 dark:hover:text-zinc-300 dark:text-zinc-400": !isCurrent,
		// Classes for when the link is the current page
		"dark:border-l-zinc-500 text-zinc-900 dark:text-zinc-200": isCurrent,
	});
}

const sidebar = await get();
---
<aside title="Site Navigation" class="h-full">
	<nav aria-labelledby="grid-left" class="h-full w-64 p-4 border-r dark:border-r-zinc-500">
		<ul>
			{sidebar.map(item => (item.header ? 
				<h2 class="text-lg mt-4 font-semibold text-zinc-700 dark:text-zinc-300">{item.text}</h2> : 
				<li class={getLinkClasses(item)}>
					<a href={item.link}>{item.text}</a>
				</li>))}
		</ul>
	</nav>
</aside>

<script is:inline>
	window.addEventListener('DOMContentLoaded', () => {
		var target = document.querySelector('[aria-current="page"]');
		if (target && target.offsetTop > window.innerHeight - 100) {
			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
		}
	});
</script>