mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 21:58:37 +00:00
80 lines
2.2 KiB
Plaintext
80 lines
2.2 KiB
Plaintext
---
|
|
// 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>
|