feat: responsive nav

Taken from https://dev.to/dmuraco3/responsive-global-navbar-in-nextjs-with-tailwindcss-45p4

1 files changed, 47 insertions, 14 deletions

diff --git a/components/topnav.tsx b/components/topnav.tsx
index 70814b3..7daeeb5 100644
--- a/components/topnav.tsx
+++ b/components/topnav.tsx
@@ -1,17 +1,50 @@
-export default function TopNav() {
-  return(
-    <>
-      <header className="flex flex-row mx-auto max-w-screen-lg px-3 py-6">
-        <div className="basis-1/4">
-          Michal Sapka
+import { useState } from 'react'
+
+function NavLink({to, children}) {
+    return <a href={to} className={`mx-4`}>
+        {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>
-        <nav className="basis-3/4 flex flex-row">
-          <a clasName="basis-1/2" href="publications">Publications</a>
-          <a clasName="basis-1/2" rel="noreferrer" href="https://github.com/michalsapka/michal-sapka-pl" target="_blank">
-            Code
-          </a>
+    )
+}
+
+export default function Navbar() {
+
+    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>
-      </header>
-    </>
-  )
+    )
 }
+