Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,

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)
import * as React from "react"
import { Icon } from "reflexjs"
export default function Block({ branding, links, ...props }) {
const [showMenu, setShowMenu] = React.useState(false)
return (
<header py="6" {...props}>
<div variant="container">
<div display="flex" alignItems="center">
{branding && (
<a
href="/"
display="flex"
alignItems="center"
_hover={{
color: "primary",
}}
>
{branding.icon && <Icon name={branding.icon} size="5" mr="2" />}
<span fontWeight="semibold" fontSize="3xl|2xl">
{branding.name}
</span>
</a>
)}
<NavLinks links={links} display="none|grid" />
<button
display="flex|none"
p="2"
size="14"
ml="auto"
onClick={() => setShowMenu(!showMenu)}
>
<Icon name="menu-alt" size="10" />
</button>
</div>
</div>
<div
position="absolute"
zIndex="1000"
bg="background"
top="24"
left="4"
right="4"
px="4"
rounded="xl"
overflow="scroll"
boxShadow="3xl"
border="1px solid"
borderColor="border"
transform={`scale(${showMenu ? 1 : 0.95})`}
visibility={showMenu ? "visible" : "hidden"}
opacity={showMenu ? 1 : 0}
transition="all .25s ease-in"
transformOrigin="100% 0"
maxHeight="95vh"
display="block|none"
>
<NavLinks links={links} py="8" />
</div>
</header>
)
}
export function NavLinks({ links, ...props }) {
return links.length ? (
<div
display="grid"
col={`1|repeat(${links.length}, auto)`}
gap="8|10|12"
ml="auto"
{...props}
>
{links.map((link, index) => (
<a
key={index}
variant="text"
href={link.href}
textAlign="left|center"
fontSize="xl|md"
px="4|0"
_hover={{
color: "primary",
}}
>
{link.title}
</a>
))}
</div>
) : null
}

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

Usage (JavaScript)
import * as React from "react"
import Block from "../src/components/header-001"
export default function Example() {
return (
<Block
minH="500|0"
branding={{
name: "Reflex",
}}
links={[
{
title: "Features",
href: "#",
},
{
title: "Pricing",
href: "#",
},
{
title: "Learn",
href: "#",
},
{
title: "Support",
href: "#",
},
]}
/>
)
}

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub