feat: basic responsive nav

4 files changed, 77 insertions, 44 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>
+}
+
+
diff --git a/package-lock.json b/package-lock.json
index 4277c36..ff68039 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
         "framer-motion": "^7.0.0",
         "next": "12.2.3",
         "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "react-dom": "18.2.0",
+        "react-icons": "^4.4.0"
       },
       "devDependencies": {
         "@types/node": "18.6.3",
@@ -4567,6 +4568,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -8570,6 +8579,12 @@
         "use-sidecar": "^1.1.2"
       }
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index c91325b..8bf31c6 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "framer-motion": "^7.0.0",
     "next": "12.2.3",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "18.6.3",