basic astro docs

website/src/components/Header/Header.astro

@@ -0,0 +1,64 @@
+---
+// import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
+import * as CONFIG from '../../config';
+// import AstroLogo from './AstroLogo.astro';
+import SkipToContent from './SkipToContent.astro';
+import SidebarToggle from './SidebarToggle';
+// import LanguageSelect from './LanguageSelect';
+import Search from './Search';
+
+type Props = {
+  currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
+// const lang = getLanguageFromURL(currentPage);
+---
+
+<SkipToContent />
+<nav class="flex justify-between py-2" title="Top Navigation">
+  <!--     <div class="menu-toggle">
+      <SidebarToggle client:idle />
+    </div> -->
+  <div class="flex overflow-visible" style="overflow:visible">
+    <a href="/" class="flex items-center text-2xl space-x-2">
+      <div>🌀</div>
+      <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
+    </a>
+  </div>
+  <div style="flex-grow: 1;"></div>
+  {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
+  <div class="search-item h-10">
+    <Search client:idle />
+  </div>
+</nav>
+
+<style>
+  /** Style Algolia */
+  :root {
+    --docsearch-primary-color: var(--theme-accent);
+    --docsearch-logo-color: var(--theme-text);
+  }
+
+  .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>