useResponsive

First of all you will need to import the useResponsive hook.

import { useResponsive } from 'toggle-navbar'

useResponsive uses the resize event to check whether the page is big or not, based on the criteria passed. The default value is 1024. In this case we used it to check wheter we will display a Desktop or mobile nav bar.

1export function NavBar () {
2    const { isBigScreen } = useResponsive(768)
3  
4    return (
5      <>
6        {
7          isBigScreen
8            ? <DesktopNavBar />
9            : <MobileNavBar />
10        }
11      </>
12    )
13}