diff options
| -rw-r--r-- | .gitignore | 2 | ||||
| -rw-r--r-- | components/toggle_theme_button.tsx | 28 | ||||
| -rw-r--r-- | components/topnav.tsx | 43 | ||||
| -rw-r--r-- | lib/theme.tsx | 6 |
4 files changed, 45 insertions, 34 deletions
@@ -33,3 +33,5 @@ yarn-error.log* # typescript *.tsbuildinfo + +public/rss diff --git a/components/toggle_theme_button.tsx b/components/toggle_theme_button.tsx new file mode 100644 index 0000000..de16397 --- /dev/null +++ b/components/toggle_theme_button.tsx @@ -0,0 +1,28 @@ +import { AnimatePresence, motion } from 'framer-motion' +import { IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react' +import { BsFillSunFill, BsMoonFill } from "react-icons/bs"; +const ThemeToggleButton = () => { + const { toggleColorMode } = useColorMode() + + return ( + <AnimatePresence exitBeforeEnter initial={false}> + <motion.div + style={{ display: 'inline-block' }} + key={useColorModeValue('light', 'dark')} + initial={{ y: -20, opacity: 0 }} + animate={{ y: 0, opacity: 1 }} + exit={{ y: 20, opacity: 0 }} + transition={{ duration: 0.2 }} + > + <IconButton + aria-label="Toggle theme" + colorScheme={useColorModeValue('purple', 'orange')} + icon={useColorModeValue(<BsMoonFill />, <BsFillSunFill />)} + onClick={toggleColorMode} + ></IconButton> + </motion.div> + </AnimatePresence> + ) +} + +export default ThemeToggleButton diff --git a/components/topnav.tsx b/components/topnav.tsx index 083471d..0364f40 100644 --- a/components/topnav.tsx +++ b/components/topnav.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react' import { Link, Box, @@ -9,29 +8,16 @@ import { MenuButton, MenuList, MenuItem, - MenuItemOption, - MenuGroup, - MenuOptionGroup, - MenuDivider, useMediaQuery, Container } from '@chakra-ui/react' import { GiHamburgerMenu } from "react-icons/gi" import { DiGithubBadge } from "react-icons/di" - -type NavLinkType = { - to: string, - children: any, -} - -function NavLink({to, children} : NavLinkType) { - return <a href={to} className={`mx-4`}> - {children} - </a> -} +import ThemeToggleButton from "../components/toggle_theme_button" function MobileNav() { - return <Menu> + return <> + <Menu> <MenuButton as={IconButton} icon={<GiHamburgerMenu/>}> Action </MenuButton> @@ -39,29 +25,20 @@ function MobileNav() { <MenuItem icon={<DiGithubBadge/>}>View source</MenuItem> </MenuList> </Menu> + </> } function DesktopNav() { return <HStack> - <Box> - </Box> - <Box> + <Box flex="1"> <Link href="https://github.com/michalsapka/michal-sapka-pl">Source code</Link> </Box> </HStack> } -function Navigation() { - const [isMobile] = useMediaQuery("(max-width: 768px)") - - let navigationComponent = isMobile ? MobileNav : DesktopNav - - - return <HStack as="nav">{navigationComponent()}</HStack> -} export default function Navbar() { - + const [isMobile] = useMediaQuery("(max-width: 768px)") return <Box as="header" position="fixed" @@ -76,8 +53,12 @@ export default function Navbar() { mb="1" > <HStack> - <Heading flex={[1,1,0,0]}>Michal </Heading> - <Navigation/> + <Heading flex="0">Michal </Heading> + <Box flex="1"> + {isMobile ? null : <DesktopNav/>} + </Box> + <ThemeToggleButton/> + {isMobile ? <MobileNav/> : null} </HStack> </Container> </Box> diff --git a/lib/theme.tsx b/lib/theme.tsx index 5e2c0b6..ad9e6dc 100644 --- a/lib/theme.tsx +++ b/lib/theme.tsx @@ -4,10 +4,10 @@ import { mode } from '@chakra-ui/theme-tools' type propsType = any const styles = { - global: (_props : propsType) => { + global: (props : propsType) => { body: { - //bg: mode('#d5d6db', '#24283b')(props), - //color: mode('#0f4b6e', '#7dcfff')(props), + bg: mode('#d5d6db', '#24283b')(props); + color: mode('#0f4b6e', '#7dcfff')(props); } } } |