feat: basic responsive nav

2 files changed, 59 insertions, 42 deletions

diff --git a/components/layout.tsx b/components/layout.tsx
index baf62dd..b99ba34 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -1,12 +1,12 @@
 import TopNav from '../components/topnav.tsx'
-
+import { VStack, Box } from '@chakra-ui/react'
 export default function Layout({ children }) {
   return (
-    <>
+    <VStack>
       <TopNav/>
-      <main className="mx-auto max-w-screen-lg px-3 py-6">
+      <Box as="main">
         {children}
-      </main>
-    </>
+      </Box>
+    </VStack>
   )
 }
diff --git a/components/topnav.tsx b/components/topnav.tsx
index 7daeeb5..e67f603 100644
--- a/components/topnav.tsx
+++ b/components/topnav.tsx
@@ -1,4 +1,22 @@
 import { useState } from 'react'
+import { 
+  Link,
+  Box, 
+  HStack, 
+  IconButton,
+  Menu,
+  Heading,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuItemOption,
+  MenuGroup,
+  MenuOptionGroup,
+  MenuDivider,
+  useMediaQuery,
+} from '@chakra-ui/react'
+import { GiHamburgerMenu } from "react-icons/gi"
+import { DiGithubBadge } from "react-icons/di"
 
 function NavLink({to, children}) {
     return <a href={to} className={`mx-4`}>
@@ -6,45 +24,44 @@ function NavLink({to, children}) {
     </a>
 }
 
-function MobileNav({open, setOpen}) {
-    return (
-        <div className={`absolute top-0 left-0 h-screen w-screen bg-white transform ${open ? "-translate-x-0" : "-translate-x-full"} `}>
-            <div className="flex flex-col ml-4">
-                <a onClick={() => setTimeout(() => {setOpen(!open)}, 100)}>
-                    About
-                </a>
-                <a onClick={() => setTimeout(() => {setOpen(!open)}, 100)}>
-                    Contact
-                </a>
-            </div>  
-        </div>
-    )
+function MobileNav() {
+  return <Menu>
+    <MenuButton as={IconButton} icon={<GiHamburgerMenu/>}>
+      Action
+    </MenuButton>
+    <MenuList>
+      <MenuItem>Publications</MenuItem>
+      <MenuItem icon={<DiGithubBadge/>}>View source</MenuItem>
+    </MenuList>
+  </Menu>
 }
 
-export default function Navbar() {
+function DesktopNav() {
+  return <HStack>
+    <Box>
+      <Link>Publications</Link>
+    </Box>
+    <Box>
+      <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
 
-    const [open, setOpen] = useState(false)
-    return (
-        <nav>
-            <MobileNav open={open} setOpen={setOpen}/>
-            <div className="w-3/12 flex items-center">Michal</div>
-            <div className="w-9/12 flex justify-end items-center">
-
-                <div className="z-50 flex relative w-8 h-8 flex-col justify-between items-center md:hidden" onClick={() => {
-                    setOpen(!open)
-                }}>
-                    {/* hamburger button */}
-                    <span className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${open ? "rotate-45 translate-y-3.5" : ""}`} />
-                    <span className={`h-1 w-full bg-black rounded-lg transition-all duration-300 ease-in-out ${open ? "w-0" : "w-full"}`} />
-                    <span className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${open ? "-rotate-45 -translate-y-3.5" : ""}`} />
-                </div>
-
-                <div className="hidden md:flex">
-                    <NavLink to="/contact">CONTACT</NavLink>
-                    <NavLink to="/about">ABOUT</NavLink>
-                </div>
-            </div>
-        </nav>
-    )
+  
+  return <HStack as="nav">{navigationComponent()}</HStack>
 }
 
+export default function Navbar() {
+  
+  return <HStack backgroundColor="red" width="900px" maxWidth="100%">
+    <Heading>Michal </Heading>
+    <Navigation/>
+  </HStack>
+}
+
+