Simple navbar

src/app/globals.css

@@ -48,6 +48,8 @@
 }
 
 :root {
+  --radius: 0.325rem;
+
   /* Base surfaces */
   --background: oklch(0.13 0.01 260);          /* deep charcoal */
   --foreground: oklch(0.98 0 0);
@@ -110,4 +112,17 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+body {
+  @apply bg-background text-foreground;
+}
+
+
+@font-face {
+  font-family: 'Researcher';
+  src: url('/font/researcher-regular-400.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }

src/app/markets/page.tsx

@@ -5,7 +5,7 @@ import Statusbar from "@/components/layout/Statusbar";
 
 export default function Markets() {
   return (
-    <main>
+    <main className="h-svh">
       <Navbar />
       <Statusbar />
     </main>

src/components/layout/Navbar.tsx

@@ -1,7 +1,38 @@
+import Link from "next/link";
+import { Button } from "../ui/button";
+
+const links = [
+  {
+    path: "/markets",
+    name: "Markets",
+  },
+  {
+    path: "/trackers",
+    name: "Trackers",
+  },
+];
+
 export default function Navbar() {
-    return (
-        <header>
-            
-        </header>
-    )
-}
+  return (
+    <nav className="border-b-2 border-b-border py-4 px-5 flex gap-5 items-center">
+      <a href="/markets" className="flex gap-1 items-center">
+        <img src="/nexa.svg" alt="Nexa" className="h-7" />
+        <img src="/nexa-text.svg" alt="NEXA" className="h-5" />
+      </a>
+      <div>
+        <ul className="flex">
+          {links.map((l) => (
+            <li key={l.path}>
+              <Link
+                href={l.path}
+                className="px-3 py-2 rounded-sm hover:bg-primary/20 hover:text-primary transition-colors duration-300"
+              >
+                {l.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+}

src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }