Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksHeader Block

Header 002
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({ branding, links, buttonLink, ...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 {buttonLink && (
28 <a
29 href={buttonLink.href}
30 variant="button.accent.sm"
31 ml="auto"
32 display="none|flex"
33 >
34 {buttonLink.title}
35 </a>
36 )}
37 <button
38 display="flex|none"
39 p="2"
40 size="14"
41 ml="auto"
42 onClick={() => setShowMenu(!showMenu)}
43 >
44 <Icon name="menu-alt" size="10" />
45 </button>
46 </div>
47 </div>
48 <div
49 position="absolute"
50 zIndex="1000"
51 bg="background"
52 top="24"
53 left="4"
54 right="4"
55 rounded="xl"
56 overflow="scroll"
57 boxShadow="3xl"
58 border="1px solid"
59 borderColor="border"
60 transform={`scale(${showMenu ? 1 : 0.95})`}
61 visibility={showMenu ? "visible" : "hidden"}
62 opacity={showMenu ? 1 : 0}
63 transition="all .25s ease-in"
64 transformOrigin="100% 0"
65 maxHeight="95vh"
66 display="block|none"
67 >
68 <NavLinks links={links} py="8" px="2" />
69 {buttonLink && (
70 <div p="4" bg="muted">
71 <a
72 href={buttonLink.href}
73 variant="button.accent"
74 ml="auto"
75 w="full"
76 >
77 {buttonLink.title}
78 </a>
79 </div>
80 )}
81 </div>
82 </header>
83 )
84}
85
86export function NavLinks({ links, ...props }) {
87 return links.length ? (
88 <div
89 display="grid"
90 col={`1|repeat(${links.length}, auto)`}
91 gap="8|10|12"
92 ml="0|10"
93 {...props}
94 >
95 {links.map((link, index) => (
96 <a
97 key={index}
98 variant="text"
99 href={link.href}
100 textAlign="left|center"
101 fontSize="xl|md"
102 px="4|0"
103 _hover={{
104 color: "primary",
105 }}
106 >
107 {link.title}
108 </a>
109 ))}
110 </div>
111 ) : null
112}

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-002"
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 buttonLink={{
30 title: "Get Started",
31 href: "#",
32 }}
33 />
34 )
35}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter