2 files changed, 40 insertions, 31 deletions
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>