A React toggle-navbar component for creating amazing responsive designs.
npm install toggle-navbar
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. */}
openDependency={[counter]}
closeDependency={[location]}
>
{/* 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. */}
buttonClass='w-8 h-8'
buttonContent={
}
navClass='bg-green-500'
side='left'
>
{/ The CloseButton will close the SideBar. /}
x
Home
Info
{counter}
className='text-2xl'
onClick={() => { setCounter(counter + 1) }}
>
+