# useSidebar

The **useSidebar** hook is used inside the [Navbar](https://hartans-organization.gitbook.io/hartan-docs/components/navbar) component. This hook handles the sidebar logic, inside the navbar component shown on mobile devices.

{% hint style="warning" %}
This hook is an internal hook and is **not available** for the users since it's not exposed as a part of this library.
{% endhint %}

#### Code

{% code overflow="wrap" %}

```javascript
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];
}
```

{% endcode %}

#### Explanation

* As you can see above it uses the [useState](https://react.dev/reference/react/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.