feat: working topnav

2 files changed, 17 insertions, 5 deletions

diff --git a/components/layout.tsx b/components/layout.tsx
index 64f87b7..296f4ac 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -5,7 +5,7 @@ export default function Layout({ children }) {
     <>
       <TopNav/>
       <Container maxW="lg">
-        <Box as="main">
+        <Box as="main" pt="20">
           {children}
         </Box>
       </Container>
diff --git a/components/topnav.tsx b/components/topnav.tsx
index 7d25c9b..8213b71 100644
--- a/components/topnav.tsx
+++ b/components/topnav.tsx
@@ -14,6 +14,7 @@ import {
   MenuOptionGroup,
   MenuDivider,
   useMediaQuery,
+  Container
 } from '@chakra-ui/react'
 import { GiHamburgerMenu } from "react-icons/gi"
 import { DiGithubBadge } from "react-icons/di"
@@ -58,10 +59,21 @@ function Navigation() {
 
 export default function Navbar() {
   
-  return <HStack>
-    <Heading>Michal </Heading>
-    <Navigation/>
-  </HStack>
+  return <Box
+    as="header"
+    position="fixed"
+    backdropFilter="auto" 
+    backdropBlur="6px"
+    width="100%"
+    pt="5px"
+  >
+    <Container maxW="xl">
+      <HStack>
+        <Heading flex={[1,1,0,0]}>Michal </Heading>
+        <Navigation/>
+      </HStack>
+    </Container>
+  </Box>
 }