Toggle-navbar

https://github.com/PiquinX/toggle-sidebar

$3

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. */}

              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) }}

    >

      +

    

  

  )

}



export default Root

``

##### Here is the Link to the Github repo.

https://github.com/PiquinX/toggle-sidebar

Toggle-navbar

https://github.com/PiquinX/toggle-sidebar

$3

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. */}

              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) }}

    >

      +

    

  

  )

}



export default Root

``

##### Here is the Link to the Github repo.

https://github.com/PiquinX/toggle-sidebar