zebflow 0.11.14

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { useState, useRouter, Link } from "zeb/react";

interface NavbarProps { currentPath?: string; }

export default function Navbar({ currentPath = "/" }: NavbarProps) {
  const navigate = useRouter().push;
  const [open, setOpen] = useState(false);

  return (
    <nav data-testid="navbar">
      <Link href="/" class={currentPath === "/" ? "active" : ""}>Home</Link>
      <Link href="/about" class={currentPath === "/about" ? "active" : ""}>About</Link>
      <button data-testid="hamburger" onClick={() => setOpen(!open)}>
        {open ? "Close" : "Menu"}
      </button>
      {open && (
        <ul data-testid="mobile-menu">
          <li><Link href="/">Home</Link></li>
          <li onClick={() => navigate("/contact")}>Contact</li>
        </ul>
      )}
    </nav>
  );
}