diff options
Diffstat (limited to 'components/topnav.tsx')
-rw-r--r-- | components/topnav.tsx | 43 |
1 files changed, 12 insertions, 31 deletions
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> |