Responsive Navbar with Chakra UI and Next.js

While Chakra UI doesn't really provide the code for the responsive navbar component we can use a trick to solve this issue. Below is the code that I have written that is using Next.js and Chakra UI.

Demo: https://desakedungrejo-sid.vercel.app/

Header:

import React, { useState } from 'react'
import styles from "../styles/Header.module.css";
import Image from "next/image";
import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";

import {
  Link,
  Box,
  Flex,
  Spacer,
  Button,
  Text,
  useDisclosure,
  useColorMode,
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  Divider
} from '@chakra-ui/react'

import { HamburgerIcon, ArrowForwardIcon } from '@chakra-ui/icons'
import { ColorModeSwitcher } from '../styles/ColorModeSwitcher';

const Header = (props) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = React.useRef()
  const handleToggle = () => (isOpen ? onClose() : onOpen());
  const { colorMode, toggleColorMode } = useColorMode()
 
  return (
    <Flex boxShadow='base' as="nav" {...props}>
    <Box p='3'>
    <Link href="/">
    <a className={styles.logo}>
      <Image src="/Logo SID.svg" width="32" height="32" alt="Logo" />
        <span className={styles.appName}>Desa Kedungrejo</span>
    </a>
    </Link>
    </Box>

    <Spacer />

    <Box  p='3' display={{ base: isOpen ? "none" : "none", md: "block" }}>
      <SignedOut>
      <Button leftIcon={<ArrowForwardIcon />} colorScheme= 'blue' variant='outline' size='md' height='32px' fontSize='14px' mr={5}>
        <Link href='/sign-in'>
          Masuk
        </Link>
      </Button>
      </SignedOut>
       <SignedIn>
      <Button colorScheme= 'blue' variant='outline' size='md' height='32px' fontSize='14px' mr={5}>
        <UserButton userProfileURL="/user" afterSignOutAll="/" />
      </Button>
      </SignedIn>
    </Box>


    <Box display={{ base: "block", md: "none" }} onClick={handleToggle} p='3'>
      <Button ref={btnRef} colorScheme= 'blue' 
      variant='outline' size='md' height='32px' width='60px' fontSize='14px'>
           <HamburgerIcon />
            </Button>
    </Box>


    <Box p='3'>
      <ColorModeSwitcher variant="outline" colorScheme= 'blue' height='32px' justifySelf="flex-end" />
    </Box>

      <Drawer
              isOpen={isOpen}
              placement='top'
              onClose={onClose}
              finalFocusRef={btnRef}
            >
              <DrawerOverlay />
              <DrawerContent>
                <DrawerCloseButton />
                <DrawerHeader>Desa Kedungrejo</DrawerHeader>

                <DrawerBody>
                   <Text as='sub'>
                    Aplikasi SID
                   </Text>
                   <Divider mb={5}/>
                  <SignedOut>
                    <Button leftIcon={<ArrowForwardIcon />} colorScheme= 'blue' variant='outline' size='md' height='32px' fontSize='14px' mr={5}>
                      <Link href='/sign-in'>
                        Masuk
                      </Link></Button>
                  </SignedOut>
                  <SignedIn>
                    <Sidebar />
                    <Button colorScheme= 'blue' variant='outline' size='md' height='32px' fontSize='14px' mr={5}>
                      <UserButton userProfileURL="/user" afterSignOutAll="/" />
                    </Button>
                  </SignedIn>         
                </DrawerBody>
                <DrawerFooter>
                  <Button colorScheme= 'blue' variant='outline' size='md' height='32px' width='120px' fontSize='14px' mr={3} onClick={toggleColorMode}>
                    {colorMode === 'light' ? 'Dark' : 'Light'}
                  </Button>
                </DrawerFooter>
              </DrawerContent>
    </Drawer>
  </Flex>
  )
  }

export default Header;