useSidebar

The useSidebar hook is used inside the Navbar component. This hook handles the sidebar logic, inside the navbar component shown on mobile devices.

This hook is an internal hook and is not available for the users since it's not exposed as a part of this library.

Code

import { useState } from "react"

export default function useSidebar(initialValue) {
    const [sidebarStatus, setSidebarStatus] = useState(initialValue);

    function openSidebar(){
        setSidebarStatus(true);
    }

    function closeSidebar(){
        setSidebarStatus(false);
    }

    return [sidebarStatus, openSidebar, closeSidebar];
}

Explanation

• As you can see above it uses the useState hook of the React internally for handling the sidebar shown on mobile devices.
• It accepts a single parameter, initialValue, a boolean value (default false).

• It returns the following:

  • sidebarStatus - the current state of the sidebar,

  • openSidebar - a function for opening the sidebar and

  • closeSideBar - a function for closing the sidebar.