summaryrefslogtreecommitdiff
path: root/components/topnav.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/topnav.tsx')
-rw-r--r--components/topnav.tsx43
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>