feat: add and integrate Header component

Author: xendarboh

src/App.tsx

@@ -3,8 +3,8 @@ import { MemoryRouter, Route, Routes } from "react-router";
 import * as app from "@tauri-apps/api/app";
 import * as log from "@tauri-apps/plugin-log";
 import { arch, platform } from "@tauri-apps/plugin-os";
-import { Footer, Message } from "./components";
 import { Networks } from "./pages";
+import { Footer, Header, Message } from "./components";
 import { useStore } from "./store";
 import { getNetworks, getPlatformArch } from "./utils";
 import "./App.css";
@@ -38,7 +38,8 @@ function App() {
   return (
     <MemoryRouter>
       <div className="flex flex-col min-h-screen">
-        <main className="flex-grow">
+        <Header />
+        <main className="flex-grow mt-10">
           <Routes>
             <Route path="/" element={<Networks />} />
           </Routes>

src/components/Header.tsx

@@ -0,0 +1,45 @@
+import { Link } from "react-router";
+import { IconBars3 } from ".";
+
+export function Header() {
+  // https://v5.daisyui.com/components/drawer/#drawer-that-opens-from-right-side-of-page
+  const SideBar = () => (
+    <div className="drawer">
+      <input id="my-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer-content">
+        <label
+          htmlFor="my-drawer"
+          tabIndex={0}
+          className="btn btn-ghost btn-circle drawer-button"
+        >
+          <IconBars3 />
+        </label>
+      </div>
+      <div className="drawer-side">
+        <label
+          htmlFor="my-drawer"
+          aria-label="close sidebar"
+          className="drawer-overlay"
+        ></label>
+        <ul className="menu bg-base-200 text-base-content min-h-full w-40 p-4">
+          <li>
+            <Link to="/">Networks</Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+
+  // https://v5.daisyui.com/components/navbar/#navbar-with-dropdown-center-logo-and-icon
+  return (
+    <div className="navbar bg-base-200 shadow-sm">
+      <div className="navbar-start">
+        <SideBar />
+      </div>
+      <div className="navbar-center">
+        <span className="text-2xl font-bold">Zero Knowledge Network</span>
+      </div>
+      <div className="navbar-end"></div>
+    </div>
+  );
+}

src/components/index.ts

@@ -1,4 +1,5 @@
 export { Footer } from "./Footer";
+export { Header } from "./Header";
 export { Message } from "./Message";
 
 export * from "./icons.tsx";

src/pages/Networks.tsx

@@ -162,9 +162,7 @@ export function Networks() {
   }
 
   return (
-    <div className="flex flex-col items-center justify-center gap-5 mt-10">
-      <h1 className="text-3xl font-extrabold">Zero Knowledge Network</h1>
-
+    <div className="flex flex-col items-center justify-center gap-5">
       <img
         src="/zkn.svg"
         alt="ZKN"