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,6 +1,7 @@
 import { FC } from 'react'
 import PropTypes from 'prop-types'
 import s from './MenuButton.module.css'
+import cn from 'classnames'
 
 interface MenuButtonProps {
   isOpen: boolean
@@ -11,7 +12,7 @@ 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,7 +14,9 @@ interface NavbarProps {
   links?: Link[]
 }
 
-const Navbar: FC<NavbarProps> = ({ links }) => (
+const Navbar: FC<NavbarProps> = ({ links }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  return (
     <NavbarRoot>
       <div className={s.navContainer}>
         <Container>
@@ -36,7 +38,10 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
                 ))}
               </nav>
             </div>
-          <MenuButton isOpen onClick={() => {}} />
+            <MenuButton
+              isOpen={isMenuOpen}
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            />
             <div className="flex items-center justify-end flex-1 space-x-8">
               <UserNav />
             </div>
@@ -51,6 +56,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
         </div>
       )}
     </NavbarRoot>
-)
+  )
+}
 
 export default Navbar