1---
2// import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
3import * as CONFIG from '../../config';
4// import AstroLogo from './AstroLogo.astro';
5// import LanguageSelect from './LanguageSelect';
6import Search from './Search';
7import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
8import MobileNav from '../../docs/MobileNav';
9import { SIDEBAR } from '../../config';
10
11type Props = {
12  currentPage?: string;
13};
14
15const { currentPage } = Astro.props as Props;
16// const lang = getLanguageFromURL(currentPage);
17const langCode = 'en'; // getLanguageFromURL(currentPage);
18const sidebar = SIDEBAR[langCode];
19
20const { BASE_URL } = import.meta.env;
21const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
22---
23
24<nav
25  class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-lineHighlight text-foreground"
26  title="Top Navigation"
27>
28  <div class="flex overflow-visible items-center grow" style="overflow:visible">
29    <div class="flex items-center text-2xl space-x-2">
30      <h1 class="font-bold flex space-x-2 items-baseline text-xl">
31        <span class="block rotate-90 text-blue-500">꩜</span>
32        <div class="flex space-x-2 items-baseline">
33          <span class="">strudel</span>
34          <span class="text-sm font-medium">DOCS</span>
35        </div>
36      </h1>
37    </div>
38  </div>
39  {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
40  <div class="search-item h-10">
41    <Search client:idle />
42  </div>
43  <a href={`${baseNoTrailing}/strudel/`} class="hidden md:flex cursor-pointer items-center space-x-1"
44    ><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
45  </a>
46  <div class="md:hidden">
47    <MobileNav sidebar={sidebar} client:idle />
48  </div>
49</nav>
50
51<style>
52  /** Style Algolia */
53  :root {
54    --docsearch-primary-color: var(--lineHighlight);
55    --docsearch-logo-color: var(--foreground);
56  }
57
58  .search-item {
59    display: none;
60    position: relative;
61    z-index: 10;
62    flex-grow: 1;
63    padding-right: 0.7rem;
64    display: flex;
65    max-width: 200px;
66  }
67
68  @media (min-width: 50em) {
69    .search-item {
70      max-width: 400px;
71    }
72  }
73</style>
74
75<style is:global>
76  .search-item > * {
77    flex-grow: 1;
78  }
79</style>