michal-sapka-me

commit 35f65bb23e56f5b01f5b2efc0c0859da66108061
parent 656639d9caac54db1a2160e529e06077829fa447
Author: Michal Sapka <michal@sapka.me>
Date:   Wed,  7 Sep 2022 21:59:21 +0200

feat: add brightness to topnav

Diffstat:
M
components/topnav.tsx
 | 
4
+++-
M
lib/theme.tsx
 | 
4
++++
M
pages/index.tsx
 | 
4
++--

3 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/components/topnav.tsx b/components/topnav.tsx
@@ -9,8 +9,9 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
+  Container,
   useMediaQuery,
-  Container
+  useColorModeValue
 } from '@chakra-ui/react'
 import { GiHamburgerMenu } from "react-icons/gi"
 import { DiGithubBadge } from "react-icons/di"
@@ -45,6 +46,7 @@ export default function Navbar() {
     position="fixed"
     backdropFilter="auto" 
     backdropBlur="6px"
+    backdropBrightness={useColorModeValue("1.1", "1")}
     width="100%"
     pt="5px"
   >
diff --git a/lib/theme.tsx b/lib/theme.tsx
@@ -22,6 +22,10 @@ const components = {
       'topnav-link': (props : StyleFunctionProps) => ({
         color: mode('#282a36', '#f8f8f2')(props),
         textDecoration: "none"
+      }),
+      'list-link': (props : StyleFunctionProps) => ({
+        color: mode('#282a36', '#f8f8f2')(props),
+        textDecoration: "none"
       })
     }
   },
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -97,10 +97,10 @@ const Home: NextPage = () => {
           <Heading variant="section-title" as="h3">On the web</Heading>
           <VStack spacing="1" alignItems="start">
             <Box>
-              <Link href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link>
+              <Link variant="list-link" href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link>
             </Box>
             <Box>
-              <Link href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link>
+              <Link variant="list-link" href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link>
             </Box>
           </VStack>