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;