✨ webapp: add header

cruzdanilo · Oct 7, 2023 · 1903081 · 1903081
1 parent 4975ea2
commit 1903081
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 0 deletions.
diff --git a/webapp/app/Header.tsx b/webapp/app/Header.tsx
@@ -0,0 +1,40 @@
+import NavLink from '../client/NavLink';
+
+function NavMenu({ className }: { className?: string }) {
+  return (
+    <ul tabIndex={0} className={className}>
+      <li>
+        <NavLink href="/">home</NavLink>
+      </li>
+      <li>
+        <NavLink href="/courier">courier</NavLink>
+      </li>
+    </ul>
+  );
+}
+
+export default function Header() {
+  return (
+    <div className="navbar bg-base-100">
+      <div className="navbar-start">
+        <div className="dropdown">
+          <label tabIndex={0} className="btn btn-ghost lg:hidden">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" />
+            </svg>
+          </label>
+          <NavMenu className="menu dropdown-content rounded-box menu-sm z-[1] mt-3 w-52 bg-base-100 p-2 shadow" />
+        </div>
+      </div>
+      <div className="navbar-center hidden lg:flex">
+        <NavMenu className="menu menu-horizontal px-1" />
+      </div>
+    </div>
+  );
+}
diff --git a/webapp/app/layout.tsx b/webapp/app/layout.tsx
@@ -1,6 +1,7 @@
 import './globals.css';
 import { type Metadata } from 'next';
 import React, { type ReactNode } from 'react';
+import Header from './Header';
 import '../server/wagmi';
 
 export const metadata: Metadata = {
@@ -11,6 +12,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <body>
+        <Header />
         {children}
       </body>
     </html>

diff --git a/webapp/client/NavLink.tsx b/webapp/client/NavLink.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <Link href={href} className={pathname === href ? 'active' : undefined}>
+      {children}
+    </Link>
+  );
+}