@chakra-ui/react#useBreakpoint JavaScript Examples
The following examples show how to use
@chakra-ui/react#useBreakpoint.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Header.js From interspace.chat with GNU General Public License v3.0 | 4 votes |
export function SiteHeader() {
const { isOpen, onOpen, onClose } = useDisclosure();
const ref = useRef(null);
const linkRef = useRef(null);
const onScreen = useOnScreen(ref);
const linkOnScreen = useOnScreen(linkRef)
const disabledGenNotify = useDisabledGeneralNotify();
const handleToggle = () => (isOpen ? onClose() : onOpen());
const screenSize = useBreakpoint()
console.log('s',screenSize);
const NavLink = ({ href, children, offset }) => (
<Link
ref={linkRef}
fontWeight={{ base: 500, lg: 700 }}
px={2}
py={1}
rounded={"md"}
textShadow="0 0 10px rgba(0, 0, 0, 0.8)"
opacity={!linkOnScreen ? 1 : 0}
transform={`translate3d(${!linkOnScreen ? 0 : -200}, 0, 0)`}
transition={`all 0.2s ${0.6 + offset}s ease`}
_hover={{
textDecoration: "none",
background: "linear-gradient(-90deg, #FF61E6 -29.22%, #7C56FF 107.53%)",
backgroundClip: "text",
WebkitTextFillColor: "transparent",
}}
href={href}
onClick={handleToggle}
color="white"
>
{children}
</Link>
);
return (
<>
<Box
ref={ref}
as="header"
bg="transparent"
position="fixed"
top={0}
px={4}
w="100%"
maxW="100vw"
h={{base: '75px', md: "100px"}}
// transform={`translate3d(0, ${onScreen ? 0 : "-70px"}, 0)`}
opacity={onScreen ? 1 : 0}
transition="transform 0.3s 1s ease-in-out, opacity 0.6s 0.8s ease-in"
zIndex={2000}
sx={{
a: {
color: "white",
},
}}
>
<Flex
h={{base: '75px', md: "100px"}}
alignItems={"center"}
justifyContent={"space-between"}
>
<Box width={{ base: "25%" }} h="2.5rem" overflow="visible" sx={{
d: {base: 'inline-flex', md: 'none'},
}}>
<Button
onClick={handleToggle}
sx={{
alignSelf: "center",
justifySelf: "right",
position: "relative",
flexDirection: "column",
justifyContent: "space-around",
overflow: 'visible',
w: { base: "2.25rem" },
h: { base: "2.25rem" },
background: "transparent",
border: "none",
cursor: "pointer",
padding: 0,
mx: 0,
zIndex: 2003,
"&:hover, &:focus, &[data-hover]": {
outline: "none",
background: "transparent",
boxShadow: "none",
},
div: {
w: "100%",
h: "100%",
p: 0,
transition: "all 0.3s linear",
position: "relative",
transformOrigin: "1px",
},
"path, circle": {
fill: isOpen ? "transparent" : "transparent",
transition: "all 0.2s 0.2s ease",
stroke: isOpen ? "#7C56FF" : "#927CFF",
},
".top-line": {
transition: "all 0.6s ease",
transform: isOpen
? "rotate(-405deg) translate3d(1px, 3px, 0)"
: "rotate(0)",
transformOrigin: "center",
},
".bottom-line": {
transition: "all 0.6s ease",
transform: isOpen
? "rotate(405deg) translate3d(0px, -4px, 0)"
: "rotate(0)",
transformOrigin: "center",
},
}}
>
<MenuIcon2SVG toggle={isOpen} />
</Button>
</Box>
<HStack spacing={8} alignItems={"center"}>
<Link href="#home" flex={{base: 1}}>
<Image
src={MF2Logo}
alt="MetaGame Logo"
boxSize={{ base: "65px", md: "95px" }}
objectFit="cover"
transform={{ md: "translateY(15px) translateX(10px)" }}
sx={{
transition: 'all 0.2s 0.1s ease',
filter: "drop-shadow(0 0 15px rgba(0,0,0,0.6))",
_hover: {
filter: "drop-shadow(0 0 15px #FF61E696)",
}
}}
/>
</Link>
<HStack
as={"nav"}
spacing={4}
display={{ base: "none", md: "flex" }}
>
{Links.map((link, i) => (
<NavLink key={`desktop-${link.name}`} href={link.href}>
{link.name}
</NavLink>
))}
</HStack>
</HStack>
<Flex alignItems="center" justifyContent="end" width={{ base: "25%", md: 'auto' }}>
{screenSize !== 'base' ? (
<Button
variant={"solid"}
colorScheme={"purple"}
bg="#927CFF"
boxShadow="0 0 10px rgba(0, 0, 0, 0.6)"
size="sm"
mr={0}
onClick={disabledGenNotify}
>
Connect
</Button>
) : (
<IconButton
icon={<BiWalletAlt />}
aria-label="Connect Web3 wallet"
flex={0}
fontSize={{base: '12vmin', lg: "2vmax"}}
colorScheme="ghost"
color="#927CFF"
onClick={disabledGenNotify}
alignSelf="center"
// filter="drop-shadow(0 0 15px #FF61E6)"
/>
)}
</Flex>
</Flex>
{/* {isOpen ? ( */}
<Box
display={{ base: "flex", md: "none" }}
position="fixed"
top={0}
left={0}
w="100%"
minW="100%"
minH="100vh"
alignItems="center"
justifyContent="center"
p={5}
pt="100px"
bg="linear-gradient(0deg, rgba(41,2,80,0.1) 0%, rgba(25,0,50,0.5) 40%)"
backdropFilter="blur(7px)"
transition="transform 0.3s 0.1s ease, opacity 0.3s 0.2s"
boxShadow="0 0 15px #00000070"
opacity={isOpen ? 1 : 0}
transform={`translate3d(0, ${isOpen ? 0 : '-100vh'}, 0)`}
zIndex={-1}
>
<Stack as={"nav"} spacing={4} height="auto">
{Links.map((link) => (
<NavLink key={`mobile-${link.name}`} href={link.href}>
{link.name}
</NavLink>
))}
</Stack>
</Box>
{/* ) : null} */}
</Box>
</>
);
}