forked from mirrors/thatmattlove-hyperglass
45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import { Flex, IconButton, useColorMode, useTheme } from "@chakra-ui/core";
|
|
import { motion } from "framer-motion";
|
|
|
|
const AnimatedFlex = motion.custom(Flex);
|
|
|
|
export default () => {
|
|
const theme = useTheme();
|
|
const { colorMode, toggleColorMode } = useColorMode();
|
|
const bg = { light: theme.colors.white, dark: theme.colors.black };
|
|
const icon = { light: "moon", dark: "sun" };
|
|
return (
|
|
<Flex
|
|
position="fixed"
|
|
as="header"
|
|
top="0"
|
|
zIndex="4"
|
|
bg={bg[colorMode]}
|
|
color={theme.colors.gray[500]}
|
|
left="0"
|
|
right="0"
|
|
width="full"
|
|
height="4rem"
|
|
>
|
|
<Flex w="100%" mx="auto" px={6} justifyContent="flex-end">
|
|
<AnimatedFlex
|
|
align="center"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<IconButton
|
|
aria-label={`Switch to ${colorMode === "light" ? "dark" : "light"} mode`}
|
|
variant="ghost"
|
|
color="current"
|
|
ml="2"
|
|
fontSize="20px"
|
|
onClick={toggleColorMode}
|
|
icon={icon[colorMode]}
|
|
/>
|
|
</AnimatedFlex>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|