DocsSidebar.astro

---
import { docsNav } from '../data/docs-nav';
import type { NavItem } from '../data/docs-nav';
import DocsSearch from './DocsSearch.astro';

interface Props {
  currentPath: string;
}

const { currentPath } = Astro.props;

function isActive(href: string): boolean {
  return currentPath === href || currentPath === href + '/';
}

function isParentActive(item: NavItem): boolean {
  if (isActive(item.href)) return true;
  return item.children?.some((child) => isActive(child.href)) ?? false;
}
---

<aside id="docs-sidebar" class="docs-sidebar hidden lg:block w-60 shrink-0">
  <div class="sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto py-8 pr-4 pl-2">
    <div class="mb-6">
      <DocsSearch />
    </div>
    <nav aria-label="Documentation sidebar">
      {docsNav.map((group) => (
        <div class="mb-8">
          <h4 class="text-[10px] font-headline font-bold uppercase tracking-[0.15em] text-primary/60 mb-3 px-3">
            {group.title}
          </h4>
          <ul>
            {group.items.map((item) => {
              const active = isActive(item.href);
              const parentActive = isParentActive(item);
              const hasChildren = item.children && item.children.length > 0;

              return (
                <li>
                  <a
                    href={item.href}
                    class:list={[
                      'flex items-center justify-between px-3 py-1.5 text-[13px] transition-colors',
                      active
                        ? 'text-primary font-medium border-l-2 border-primary bg-primary/5'
                        : 'text-on-surface-variant hover:text-on-surface border-l-2 border-transparent hover:border-outline-variant',
                    ]}
                  >
                    {item.title}
                    {hasChildren && (
                      <svg
                        class:list={[
                          'w-3 h-3 shrink-0 transition-transform duration-150',
                          parentActive ? 'rotate-90 text-primary/60' : 'text-on-surface-variant/40',
                        ]}
                        fill="none" stroke="currentColor" viewBox="0 0 24 24"
                      >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                      </svg>
                    )}
                  </a>

                  {hasChildren && parentActive && (
                    <ul class="mt-0.5 mb-2">
                      {item.children!.map((child) => {
                        const childActive = isActive(child.href);
                        return (
                          <li>
                            <a
                              href={child.href}
                              class:list={[
                                'block pl-6 pr-3 py-1 text-[12px] transition-colors',
                                childActive
                                  ? 'text-primary font-medium border-l-2 border-primary bg-primary/5'
                                  : 'text-on-surface-variant/80 hover:text-on-surface border-l-2 border-outline-variant/30 hover:border-outline-variant',
                              ]}
                            >
                              {child.title}
                            </a>
                          </li>
                        );
                      })}
                    </ul>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </nav>
  </div>
</aside>

<!-- Mobile sidebar overlay -->
<div id="sidebar-overlay" class="fixed inset-0 z-40 bg-black/50 hidden lg:hidden" aria-hidden="true"></div>

<!-- Mobile sidebar drawer -->
<aside id="docs-sidebar-mobile" class="fixed top-16 left-0 bottom-14 md:bottom-0 z-50 w-72 bg-surface-container-lowest border-r border-outline-variant transform -translate-x-full transition-transform duration-200 lg:hidden overflow-y-auto">
  <nav class="py-6 px-4" aria-label="Documentation sidebar mobile">
    {docsNav.map((group) => (
      <div class="mb-8">
        <h4 class="text-[10px] font-headline font-bold uppercase tracking-[0.15em] text-primary/60 mb-3 px-3">
          {group.title}
        </h4>
        <ul>
          {group.items.map((item) => {
            const active = isActive(item.href);
            const parentActive = isParentActive(item);
            const hasChildren = item.children && item.children.length > 0;

            return (
              <li>
                <a
                  href={item.href}
                  class:list={[
                    'flex items-center justify-between px-3 py-2 text-sm transition-colors',
                    active
                      ? 'text-primary font-medium border-l-2 border-primary bg-primary/5'
                      : 'text-on-surface-variant hover:text-on-surface border-l-2 border-transparent hover:border-outline-variant',
                  ]}
                >
                  {item.title}
                  {hasChildren && (
                    <svg
                      class:list={[
                        'w-3 h-3 shrink-0 transition-transform duration-150',
                        parentActive ? 'rotate-90 text-primary/60' : 'text-on-surface-variant/40',
                      ]}
                      fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                  )}
                </a>

                {hasChildren && parentActive && (
                  <ul class="mt-0.5 mb-2">
                    {item.children!.map((child) => {
                      const childActive = isActive(child.href);
                      return (
                        <li>
                          <a
                            href={child.href}
                            class:list={[
                              'block pl-6 pr-3 py-1.5 text-[13px] transition-colors',
                              childActive
                                ? 'text-primary font-medium border-l-2 border-primary bg-primary/5'
                                : 'text-on-surface-variant/80 hover:text-on-surface border-l-2 border-outline-variant/30 hover:border-outline-variant',
                              ]}
                          >
                            {child.title}
                          </a>
                        </li>
                      );
                    })}
                  </ul>
                )}
              </li>
            );
          })}
        </ul>
      </div>
    ))}

    <!-- Site navigation -->
    <div class="mt-4 pt-4 border-t border-outline-variant">
      <h4 class="text-[10px] font-headline font-bold uppercase tracking-[0.15em] text-on-surface-variant/60 mb-3 px-3">
        Site
      </h4>
      <ul>
        <li>
          <a href="/" class="flex items-center gap-2 px-3 py-2 text-sm text-on-surface-variant hover:text-on-surface transition-colors">
            Home
          </a>
        </li>
        <li>
          <a href="https://github.com/dvflw/mantle" class="flex items-center gap-2 px-3 py-2 text-sm text-on-surface-variant hover:text-on-surface transition-colors">
            GitHub
          </a>
        </li>
      </ul>
    </div>
  </nav>
</aside>

<script is:inline>
function initSidebar() {
  var mobileSidebar = document.getElementById('docs-sidebar-mobile');
  if (!mobileSidebar) return;

  function closeSidebar() {
    mobileSidebar.classList.add('-translate-x-full');
    var overlay = document.getElementById('sidebar-overlay');
    if (overlay) overlay.classList.add('hidden');
  }

  var overlay = document.getElementById('sidebar-overlay');
  if (overlay) overlay.onclick = closeSidebar;

  mobileSidebar.querySelectorAll('a').forEach(function(a) {
    a.onclick = closeSidebar;
  });
}
initSidebar();
document.addEventListener('astro:after-swap', initSidebar);
</script>