54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
import { MoonIcon, SunIcon } from '@chakra-ui/icons'
|
|
import { Box, Button, Flex, Heading, Spacer, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
|
|
import { Link } from '@chakra-ui/next-js'
|
|
|
|
export default function Header({ menu, globals }) {
|
|
const { colorMode, toggleColorMode } = useColorMode()
|
|
|
|
return (
|
|
<>
|
|
<Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
|
|
<Flex h={16} alignItems={'center'}>
|
|
<Heading size="md">{globals.site_name}</Heading>
|
|
|
|
<MainMenu items={menu.items} />
|
|
<Spacer />
|
|
|
|
<Flex alignItems={'center'}>
|
|
<Stack direction={'row'} spacing={7}>
|
|
<Button onClick={toggleColorMode}>{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}</Button>
|
|
</Stack>
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const MainMenu = ({ items }) => {
|
|
const linkColor = useColorModeValue('gray.600', 'gray.200')
|
|
const linkHoverColor = useColorModeValue('gray.800', 'white')
|
|
|
|
return (
|
|
<Stack direction={'row'} spacing={4} pl="4">
|
|
{items.map((navItem) => (
|
|
<Box key={navItem.label}>
|
|
<Link
|
|
p={2}
|
|
href={navItem.url ?? '#'}
|
|
fontSize={'sm'}
|
|
fontWeight={500}
|
|
color={linkColor}
|
|
_hover={{
|
|
textDecoration: 'none',
|
|
color: linkHoverColor,
|
|
}}
|
|
>
|
|
{navItem.label}
|
|
</Link>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
)
|
|
}
|