Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksHeader Block

Header 001
View fullscreen

How to use this block

1. Copy the block source code and place it in a src/components/header-001.jsx file.

Block (JavaScript)
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}

2. Copy the example code below and add it to your page.

Usage (JavaScript)
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}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter