---

// import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';

import * as CONFIG from '../../config';

// import AstroLogo from './AstroLogo.astro';

// import LanguageSelect from './LanguageSelect';

import Search from './Search';

import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';

import MobileNav from '../../docs/MobileNav';

import { SIDEBAR } from '../../config';

type Props = {

  currentPage?: string;

};

const { currentPage } = Astro.props as Props;

// const lang = getLanguageFromURL(currentPage);

const langCode = 'en'; // getLanguageFromURL(currentPage);

const sidebar = SIDEBAR[langCode];

const { BASE_URL } = import.meta.env;

const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;

---

<nav

  class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-lineHighlight text-foreground"

  title="Top Navigation"

>

  <div class="flex overflow-visible items-center grow" style="overflow:visible">

    <div class="flex items-center text-2xl space-x-2">

      <h1 class="font-bold flex space-x-2 items-baseline text-xl">

        <span class="block rotate-90 text-blue-500">꩜</span>

        <div class="flex space-x-2 items-baseline">

          <span class="">strudel</span>

          <span class="text-sm font-medium">DOCS</span>

        </div>

      </h1>

    </div>

  </div>

  {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}

  <div class="search-item h-10">

    <Search client:idle />

  </div>

  <a href={`${baseNoTrailing}/`} class="hidden md:flex cursor-pointer items-center space-x-1"

    ><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>

  </a>

  <div class="md:hidden">

    <MobileNav sidebar={sidebar} client:idle />

  </div>

</nav>

<style>

  /** Style Algolia */

  :root {

    --docsearch-primary-color: var(--lineHighlight);

    --docsearch-logo-color: var(--foreground);

  }

  .search-item {

    display: none;

    position: relative;

    z-index: 10;

    flex-grow: 1;

    padding-right: 0.7rem;

    display: flex;

    max-width: 200px;

  }

  @media (min-width: 50em) {

    .search-item {

      max-width: 400px;

    }

  }

</style>

<style is:global>

  .search-item > * {

    flex-grow: 1;

  }

</style>