Header Container

1import { HeaderContainer } from "passport-ui";
2import { Button } from "passport-ui";
3import { ThemeToggle } from "passport-ui";

1<HeaderContainer
2  sticky={true}
3  blurred={true}
4  variant="full"
5>
6  <div className="flex justify-between items-center">
7    <div className="flex items-center gap-3">
8      <h2>My Application</h2>
9    </div>
10 
11    <div className="flex items-center gap-3">
12      <nav className="flex items-center gap-2">
13        <Button variant="ghost" asChild>
14          <Link href="/home">Home</Link>
15        </Button>
16        <Button variant="ghost" asChild>
17          <Link href="/about">About</Link>
18        </Button>
19        <Button variant="ghost" asChild>
20          <Link href="/contact">Contact</Link>
21        </Button>
22      </nav>
23      <ThemeToggle />
24    </div>
25  </div>
26</HeaderContainer>
27 
28{/* With reveal on scroll */}
29<HeaderContainer
30  sticky={true}
31  blurred={true}
32  revealStylesOnScroll={true}
33  variant="broad"
34>
35  <div className="flex justify-between items-center">
36    <h2>Reveal Header</h2>
37    <Button>Action</Button>
38  </div>
39</HeaderContainer>