BlocksHeader Block

1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({ branding, links, ...props }) {
5  const [showMenu, setShowMenu] = React.useState(false)
6
7  return (
8    <header py="6" {...props}>
9      <div variant="container">
10        <div display="flex" alignItems="center">
11          {branding && (
12            <a
13              href="/"
14              display="flex"
15              alignItems="center"
16              _hover={{
17                color: "primary",
18              }}
19            >
20              {branding.icon && <Icon name={branding.icon} size="5" mr="2" />}
21              <span fontWeight="semibold" fontSize="3xl|2xl">
22                {branding.name}
23              </span>
24            </a>
25          )}
26          <NavLinks links={links} display="none|grid" />
27          <button
28            display="flex|none"
29            p="2"
30            size="14"
31            ml="auto"
32            onClick={() => setShowMenu(!showMenu)}
33          >
34            <Icon name="menu-alt" size="10" />
35          </button>
36        </div>
37      </div>
38      <div
39        position="absolute"
40        zIndex="1000"
41        bg="background"
42        top="24"
43        left="4"
44        right="4"
45        px="4"
46        rounded="xl"
47        overflow="scroll"
48        boxShadow="3xl"
49        border="1px solid"
50        borderColor="border"
51        transform={`scale(${showMenu ? 1 : 0.95})`}
52        visibility={showMenu ? "visible" : "hidden"}
53        opacity={showMenu ? 1 : 0}
54        transition="all .25s ease-in"
55        transformOrigin="100% 0"
56        maxHeight="95vh"
57        display="block|none"
58      >
59        <NavLinks links={links} py="8" />
60      </div>
61    </header>
62  )
63}
64
65export function NavLinks({ links, ...props }) {
66  return links.length ? (
67    <div
68      display="grid"
69      col={`1|repeat(${links.length}, auto)`}
70      gap="8|10|12"
71      ml="auto"
72      {...props}
73    >
74      {links.map((link, index) => (
75        <a
76          key={index}
77          variant="text"
78          href={link.href}
79          textAlign="left|center"
80          fontSize="xl|md"
81          px="4|0"
82          _hover={{
83            color: "primary",
84          }}
85        >
86          {link.title}
87        </a>
88      ))}
89    </div>
90  ) : null
91}

1import * as React from "react"
2import Block from "../src/components/header-001"
3
4export default function Example() {
5  return (
6    <Block
7      minH="500|0"
8      branding={{
9        name: "Reflex",
10      }}
11      links={[
12        {
13          title: "Features",
14          href: "#",
15        },
16        {
17          title: "Pricing",
18          href: "#",
19        },
20        {
21          title: "Learn",
22          href: "#",
23        },
24        {
25          title: "Support",
26          href: "#",
27        },
28      ]}
29    />
30  )
31}