https://github.com/PiquinX/toggle-sidebar
### Installation
Using npm.
```CMD
npm install toggle-nav
```
Using yarn.
```CMD
yarn add toggle-nav
```
#### How to import.
```typescript
import { SideBarContainer, SideBar, CloseButton } from 'toggle-navbar'
```
#### How to use it.
This component allows you to create a customizable desplegable navbar, which is great for responsive designs.
What you may add/customize:
* An Array of values so that when they change the SideBar will be opened or closed.
* Styles to the SideBar.
* Styles to the opener button.
* From Which side will the Sidebar appear.
```typescript
function Root (): JSX.Element {
const location = useLocation()
const [counter, setCounter] = useState(0)
return (
{/* These dependency arrays allow you to add any dependency
so that when it changes, the SideBar will be opened or closed.
In this case, I used location to close the
SideBar each time the path changes. */}
{/* The button is the element that will be displayed in your
app by default and the one that will open the SideBar.
The rest are style only props. */}
}
navClass='bg-green-500'
side='left'
>
{/* The CloseButton will close the SideBar. */}
x
Home
Info
{counter}
{ setCounter(counter + 1) }}
>
+
)
}
export default Root
```
##### Here is the Link to the Github repo.
https://github.com/PiquinX/toggle-sidebar