---
import { removeLeadingSlash, removeTrailingSlash } from "../util";

export interface Props {
  currentPage: string;
}

const { currentPage } = Astro.props as Props;
const currentPageMatch = removeLeadingSlash(removeTrailingSlash(currentPage));

const content = [
  {
    title: "Setup",
    children: [
      {
        title: "Getting Started",
        url: "/getting_started",
      },
    ],
  },
  {
    title: "Guides",
    children: [],
  },
  {
    title: "Classes",
    children: [],
  },
];
---

<nav>
  <ul class={`nav-groups`}>
    {
      content.map((section) => (
        <li class:list={["nav-group"]}>
          <details open>
            <summary class="nav-group-title">
              <h2>
                {section.title}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 1 16 16"
                  width="16"
                  height="16"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
                  />
                </svg>
              </h2>
            </summary>
            <ul>
              {section.children.map((child) => (
                <li class="nav-link">
                  <a
                    href={child.url}
                    aria-current={`${
                      currentPageMatch.endsWith(child.url) ? "page" : "false"
                    }`}
                  />
                </li>
              ))}
            </ul>
          </details>
        </li>
      ))
    }
  </ul>
</nav>

<!-- Preserve sidebar scroll across page loads -->
<script is:inline>
{
	const leftSidebar = document.querySelector(".nav-groups");
	const leftSidebarScroll = localStorage.getItem("sidebar-scroll");
	if (leftSidebarScroll !== null) {
		leftSidebar.scrollTop = parseInt(leftSidebarScroll, 10);
	}
	window.addEventListener("beforeunload", () => {
		localStorage.setItem("sidebar-scroll", leftSidebar.scrollTop);
	});
}
</script>

<style>
  nav {
    width: 100%;
    height: 100%;
    font-size: var(--theme-text-sm);
  }
  .nav-groups {
    padding-top: 1rem;
    max-height: 100%;
    overflow-x: visible;
    overflow-y: auto;
  }

  @media (min-width: 50em) {
    .nav-groups {
      position: fixed;
      top: calc(var(--theme-navbar-height) + 3rem);
      bottom: 0;
      width: calc(
        var(--theme-left-sidebar-width) - var(--min-spacing-inline) * 1.6
      );
    }
  }

  @media not screen and (min-width: 50em) {
    nav :global(.TabGroup) {
      display: none;
    }
  }

  .nav-group {
    margin-bottom: 1rem;
  }
  .nav-group .placeholder {
    opacity: 0.6;
    text-align: center;
    display: block;
  }
  @media (max-width: 50em) {
    .sm-hidden {
      display: none !important;
    }
  }
  @media (min-width: 50em) {
    .nav-group {
      display: none;
      margin-bottom: 1.75rem;
    }
  }
  .nav-group.active {
    display: block;
  }
  .nav-group-title {
    font-size: 1em;
    font-weight: 600;
    padding: 0.3rem 2rem;
  }

  .nav-link a {
    margin: 1px;
    padding: 0.3rem 2rem;
    font: inherit;
    color: var(--theme-text-lighter);
    text-decoration: none;
    display: block;

    &:hover,
    &:focus {
      background-color: var(--theme-bg-hover);
    }

    &[aria-current="page"],
    &[data-current-parent="true"] {
      color: var(--theme-text);
      background-color: var(--theme-bg-accent);
      font-weight: 500;
      /* Indicates the current page for forced colors users in older browsers */
      outline: 1px solid transparent;

      &:focus {
        outline: 2px solid;
      }
    }

    @media (forced-colors: active) {
      &[aria-current="page"],
      &[data-current-parent="true"] {
        border: 1px solid LinkText;
      }
    }
  }

  @media (min-width: 50em) {
    .nav-group-title,
    .nav-link a {
      padding: 0.2rem 1rem;
    }
  }

  :global(:root.theme-dark) .nav-link a[aria-current="page"],
  :global(:root.theme-dark) .nav-link a[data-current-parent="true"] {
    color: hsla(var(--color-base-white), 100%, 1);
  }

  .fallback {
    font-size: 0.75em;
    line-height: 1;
    font-weight: bold;
    color: var(--theme-text-light);
  }

  details > summary {
    list-style: none;
  }

  details > summary::marker,
  details > summary::-webkit-details-marker {
    display: none;
  }

  details[open] > summary svg {
    transform: rotate(90deg);
  }

  summary {
    cursor: pointer;
  }

  summary h2 {
    all: inherit;
    margin: 0;
    padding: 0;
  }

  svg {
    transform: rotate(0);
    transition: 0.15s transform ease;
    vertical-align: middle;
  }

  :global([dir="rtl"]) svg {
    transform: rotate(180deg);
  }

  svg path {
    fill: currentColor;
  }
</style>
