Working menu button with open and closed state.

components/common/Navbar/MenuButton.module.css

@@ -23,3 +23,11 @@
 .menuButton::before {
   transform: translateY(-5px);
 }
+
+.menuButton.isOpen::before {
+  transform: rotate(45deg);
+}
+
+.menuButton.isOpen::after {
+  transform: rotate(-45deg);
+}

components/common/Navbar/MenuButton.tsx

@@ -1,17 +1,18 @@
 import { FC } from 'react'
 import PropTypes from 'prop-types'
 import s from './MenuButton.module.css'
+import cn from 'classnames'
 
 interface MenuButtonProps {
-    isOpen: boolean
-    onClick: any
+  isOpen: boolean
+  onClick: any
 }
 
 const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
   return (
     <div
       onClick={onClick}
-      className={s.menuButton}
+      className={cn(s.menuButton, { [s.isOpen]: isOpen })}
     />
   )
 }

components/common/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
@@ -14,43 +14,49 @@ interface NavbarProps {
   links?: Link[]
 }
 
-const Navbar: FC<NavbarProps> = ({ links }) => (
-  <NavbarRoot>
-    <div className={s.navContainer}>
-      <Container>
-        <div className={s.nav}>
-          <div className="flex items-center flex-1">
-            <Link href="/">
-              <a className={s.logo} aria-label="Logo">
-                <Logo />
-              </a>
-            </Link>
-            <nav className={s.navMenu}>
-              <Link href="/search">
-                <a className={s.link}>All</a>
-              </Link>
-              {links?.map((l) => (
-                <Link href={l.href} key={l.href}>
-                  <a className={s.link}>{l.label}</a>
-                </Link>
-              ))}
-            </nav>
-          </div>
-          <MenuButton isOpen onClick={() => {}} />
-          <div className="flex items-center justify-end flex-1 space-x-8">
-            <UserNav />
-          </div>
-        </div>
-      </Container>
-    </div>
-    {process.env.COMMERCE_SEARCH_ENABLED && (
-      <div className={s.searchContainer}>
+const Navbar: FC<NavbarProps> = ({ links }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  return (
+    <NavbarRoot>
+      <div className={s.navContainer}>
         <Container>
-          <Searchbar />
+          <div className={s.nav}>
+            <div className="flex items-center flex-1">
+              <Link href="/">
+                <a className={s.logo} aria-label="Logo">
+                  <Logo />
+                </a>
+              </Link>
+              <nav className={s.navMenu}>
+                <Link href="/search">
+                  <a className={s.link}>All</a>
+                </Link>
+                {links?.map((l) => (
+                  <Link href={l.href} key={l.href}>
+                    <a className={s.link}>{l.label}</a>
+                  </Link>
+                ))}
+              </nav>
+            </div>
+            <MenuButton
+              isOpen={isMenuOpen}
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            />
+            <div className="flex items-center justify-end flex-1 space-x-8">
+              <UserNav />
+            </div>
+          </div>
         </Container>
       </div>
-    )}
-  </NavbarRoot>
-)
+      {process.env.COMMERCE_SEARCH_ENABLED && (
+        <div className={s.searchContainer}>
+          <Container>
+            <Searchbar />
+          </Container>
+        </div>
+      )}
+    </NavbarRoot>
+  )
+}
 
 export default Navbar