From 596340f811d144fcef3237003ac84798614bc3b4 Mon Sep 17 00:00:00 2001
From: Michal Sapka <michal@sapka.me>
Date: Tue, 6 Sep 2022 22:42:59 +0200
Subject: feat: theme switcher button

---
 .gitignore                         |  2 ++
 components/toggle_theme_button.tsx | 28 +++++++++++++++++++++++++
 components/topnav.tsx              | 43 +++++++++++---------------------------
 lib/theme.tsx                      |  6 +++---
 4 files changed, 45 insertions(+), 34 deletions(-)
 create mode 100644 components/toggle_theme_button.tsx

diff --git a/.gitignore b/.gitignore
index 737d872..cd80d96 100644
--- a/.gitignore
+++ b/.gitignore
@@ -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);
     }
   }
 }
-- 
cgit v1.2.3