use hamburger menu to show/hide drawer in mobile

Author: Roshanjossey

src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useState } from 'react'
 import Navbar from './navbar/Navbar'
 
 type LayoutProps = {
@@ -12,10 +12,20 @@ export default function Layout({
   children,
   sidebarContentRight,
 }: LayoutProps) {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   return (
     <div className="mx-auto bg-gray-200 dark:bg-dark-800 min-h-screen">
-      <Navbar />
-      <div className="grid grid-cols-9 gap-10 mt-10 px-4 md:px-60 md:pt-10 ">
+      <Navbar isDrawerOpen={isDrawerOpen} setIsDrawerOpen={setIsDrawerOpen} />
+      {sidebarContentLeft && (
+        <aside
+          className={`col-span-2 md:hidden mt-16 ${
+            isDrawerOpen ? 'block' : 'hidden'
+          }`}
+        >
+          {sidebarContentLeft}
+        </aside>
+      )}
+      <div className="grid grid-cols-9 gap-10 mt-10 px-4 md:px-10 xl:px-60 md:pt-10 ">
         {sidebarContentLeft && (
           <aside className="col-span-2 hidden md:block">
             {sidebarContentLeft}

src/components/navbar/HamburgerButton.tsx

@@ -1,12 +1,21 @@
 import { useState } from 'react'
 
-const HamburgerMenu = () => {
-  const [isOpen, setIsOpen] = useState(false)
+type HamburgerMenuProps = {
+  className?: string
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}
+
+const HamburgerMenu = ({
+  className,
+  isOpen,
+  setIsOpen,
+}: HamburgerMenuProps) => {
   const genericHamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300`
 
   return (
     <button
-      className="flex flex-col h-10 w-10 rounded justify-center items-center group"
+      className={`flex flex-col h-10 w-10 rounded justify-center items-center group ${className}`}
       onClick={() => setIsOpen(!isOpen)}
     >
       <div

src/components/navbar/Navbar.tsx

@@ -8,7 +8,12 @@ const ThemeButton = dynamic(() => import('./ThemeButton'), {
   ssr: false,
 })
 
-export default function Navbar() {
+type NavbarProps = {
+  isDrawerOpen: boolean
+  setIsDrawerOpen: (isOpen: boolean) => void
+}
+
+export default function Navbar({ isDrawerOpen, setIsDrawerOpen }: NavbarProps) {
   const router = useRouter()
   const { pathname } = router
   return (
@@ -28,7 +33,11 @@ export default function Navbar() {
               </Link>
             </Button>
           )}
-          <HamburgerMenu />
+          <HamburgerMenu
+            className="lg:hidden"
+            isOpen={isDrawerOpen}
+            setIsOpen={setIsDrawerOpen}
+          />
         </div>
       </div>
       <style jsx>{`