Studiofru
Studiofru
WorksBlogDownload

Articles

Responsive Navbar with Chakra UI and Next.js

Blog
Studiofru

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;

What's On

How to Implement Smartlook to a Next.js Project

Blog

Smartlook is an analytics platform tool for web and mobile applications. Smartlook can also be installed on Next. js-based projects.

Studiofru

Website: Sistem Informasi Desa (SID) - Desa Kedungrejo

Work

Pada bulan Maret hingga Agustus 2022 lalu saya mendapat tugas proyek pemetaan dari Yayasan Wangsakerta yang bekerja sama dengan ISBS Surabaya dan Pemerintah Desa Kedungrejo Kecamatan Muncar Kabupaten Banyuwangi untuk bekerja sebagai Data Analyst.

Studiofru
Further information

studiofru.work@gmail.com

Argasunya, Harjamukti, Kota Cirebon, Jawa Barat 45145 - Indonesia

Contact form

Studiofru
Studiofru

Rural urban digital design art.

Profile

About

Contact

Activites

Works

Blog

© 2022 Studiofru. All rights reserved.