make repl and doc styles more similar

website/src/components/Header/Header.astro

@@ -5,6 +5,7 @@ import * as CONFIG from '../../config';
 import SidebarToggle from './SidebarToggle';
 // import LanguageSelect from './LanguageSelect';
 import Search from './Search';
+import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
 
 type Props = {
   currentPage: string;
@@ -14,21 +15,28 @@ const { currentPage } = Astro.props as Props;
 // const lang = getLanguageFromURL(currentPage);
 ---
 
-<nav class="flex justify-between py-2 items-center h-full" title="Top Navigation">
+<nav class="flex justify-between py-2 px-4 items-center h-25 bg-header" title="Top Navigation">
   <!--     <div class="menu-toggle">
       <SidebarToggle client:idle />
     </div> -->
-  <div class="flex overflow-visible items-center" style="overflow:visible">
+  <div class="flex overflow-visible items-center grow" style="overflow:visible">
     <a href="/" class="flex items-center text-2xl space-x-2">
-      <div>🌀</div>
-      <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
+      <h1 class="text-white font-bold flex space-x-2 items-baseline text-xl">
+        <span>🌀</span>
+        <div class="flex space-x-1 items-baseline">
+          <span class="">strudel</span>
+          <span class="text-sm">DOCS</span>
+        </div>
+      </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>
+  <a href=".." class="cursor-pointer items-center flex space-x-1"
+    ><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
+  </a>
 </nav>
 
 <style>