{{ define "SideNav" }}
<nav class="p-6 w-full flex flex-col flex-wrap" x-data="{ currentItem: window.location.pathname.split('/')[2] ?? '' }"
    x-init="window.addEventListener('htmx:pushedIntoHistory', () => { currentItem = window.location.pathname.split('/')[2] ?? '' })">
    <ul class="space-y-1.5" hx-boost="true">
        {{range .MenuItems }}
            {{ $pathList := split "/" .Path }}
            {{ $item := $pathList._2 }}
        <li>
            <a :class="{ 'bg-fuchsia-50': '{{ $item }}' === c