Merge pull request #6 from CNAG-Biomedical-Informatics/codex/add-headerbar-similar-to-mkdocs

Add header bar

Author: IvoLeist

src/App.svelte

@@ -13,6 +13,7 @@
   import { onMount } from "svelte";
   import { Sheet, FileJson2 } from "lucide-svelte";
   import { CodeJar } from "@novacbn/svelte-codejar";
+  import Header from "./Header.svelte";
 
   import { createDbWorker } from "sql.js-httpvfs";
 
@@ -235,27 +236,24 @@
   }
 </script>
 
+<Header />
+
 <main class="pt-8 pb-12 lg:pt-12 lg:pb-12 bg-white">
   <div class=" px-4 mx-auto max-w-screen-xl">
-    <div class="p-8">
-      <Heading tag="h2" customeSize="text-4xl font-extrabold "
-        >Pheno-Ranker Use Cases Playground</Heading
-      >
-    </div>
-
     {#if sqliteFiles.length}
       <div class="border-b mb-4">
         <nav class="flex space-x-4" aria-label="Tabs">
           {#each sqliteFiles as f}
             <button
               class={`py-2 px-4 text-sm font-medium border-b-2 ${
-                activeFile === f.name
+                activeTable.replace(/\_table$/, "") ===
+                f.name.replace(/\.db$/, "")
                   ? "border-blue-600 text-blue-600"
                   : "border-transparent text-gray-500"
               }`}
               on:click={() => loadDb(f)}
             >
-              {f.name}
+              {f.name.replace(/\.db$/, "").toUpperCase()}
             </button>
           {/each}
         </nav>

src/Header.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { onMount } from "svelte";
+  import { Sun, Moon, Github } from "lucide-svelte";
+  let dark = false;
+
+  onMount(() => {
+    dark =
+      document.documentElement.classList.contains("dark") ||
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (dark) document.documentElement.classList.add("dark");
+  });
+
+  function toggleTheme() {
+    dark = !dark;
+    document.documentElement.classList.toggle("dark", dark);
+  }
+</script>
+
+<header class="bg-white border-b dark:bg-gray-800">
+  <div class="max-w-screen-xl mx-auto flex items-center justify-between p-4">
+    <span class="flex items-center space-x-2">
+      <img src="/pheno-ranker-favicon-2x.png" alt="logo" class="h-8 w-8" />
+      <span class="text-lg font-semibold whitespace-nowrap"
+        >Pheno-Ranker Use Cases Playground</span
+      >
+    </span>
+    <div class="flex items-center space-x-4">
+      <button
+        on:click={toggleTheme}
+        aria-label="Toggle dark mode"
+        class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+      >
+        {#if dark}
+          <Sun class="w-5 h-5" />
+        {:else}
+          <Moon class="w-5 h-5" />
+        {/if}
+      </button>
+      <a
+        href="https://github.com/CNAG-Biomedical-Informatics/sql.js-httpvfs-playground"
+        target="_blank"
+        aria-label="Go to repository"
+        class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+      >
+        <Github class="w-5 h-5" />
+      </a>
+    </div>
+  </div>
+</header>