{% from "sidebar.njk" import sidebar %}
{% from "popover.njk" import popover %}

{% set footer %}
{% set trigger %}
<img src="https://github.com/hunvreus.png" class="rounded-lg shrink-0 size-8" alt="Ronan Berder">
<div class="grid flex-1 text-left text-sm leading-tight">
  <span class="truncate font-medium">Ronan Berder</span>
  <span class="truncate text-xs">@hunvreus</span>
</div>
{% lucide "chevrons-up-down" %}
{% endset %}
{% call popover(
  trigger=trigger,
  trigger_attrs={
    "class": "btn-ghost p-2 h-12 w-full flex items-center justify-start",
    "data-keep-mobile-sidebar-open": ""
  },
  popover_attrs={
    "data-side": "top",
    "class": "w-[271px] md:w-[239px]"
  }
) %}
<div class="grid gap-4">
  <header class="grid gap-1.5">
    <h2 class="font-semibold">I hope you like Basecoat...</h2>
    <p class="text-muted-foreground text-sm">My name is <a href="https://ronanberder.com" target="_blank" rel="noopener">Ronan</a> and I made this. If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
  </header>
  <footer class="grid gap-2">
    <a href="https://github.com/sponsors/hunvreus" class="btn-sm" target="_blank" rel="noopener">Sponsor me on GitHub</a>
    <a href="https://x.com/hunvreus" class="btn-sm-outline" target="_blank" rel="noopener">Follow me on X</a>
  </footer>
</div>
{% endcall %}
{% endset %}

{% set header %}
<a href="/" class="btn-ghost p-2 h-12 w-full justify-start">
  <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
    {% if site.logo and site.logo.svg %}
      {{ site.logo.svg | safe }}
    {% else %}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
    {% endif %}
  </div>
  <div class="grid flex-1 text-left text-sm leading-tight">
    <span class="truncate font-semibold">{{ site.title }}</span>
    <span class="truncate text-xs text-muted-foreground">v{{ pkg.version }}</span>
  </div>
</a>
{% endset %}

{% set docsMenu = docs.menu if docs and docs.menu else menu %}

{{ sidebar(
  id="sidebar",
  label="Sidebar navigation",
  header=header,
  footer=footer,
  content_attrs={ "class": "scrollbar" },
  menu=docsMenu | sidebarMenu(collections)
) }}