flowbite-react
flowbite-react copied to clipboard
themesberg
Navbar + Sidenav: Connecting the Navbar.Toggle to Sidenav collapsed
Is your feature request related to a problem? Please describe. I am trying to connect the Navbar.Toggle to the Sidenav.collapsed, but it doesn't appear as if the necessary Navbar.Toggle context is exported publicly.
Describe the solution you'd like I'm presuming an easy way to do this would be to import the Navbar.Toggle context into a page using Sidenav, and sync it with the Navbar collapsed state, but I can't see an easy way to do this as the Navbar.Toggle context is not exported publicly.
Describe alternatives you've considered Creating my own toggle component, mostly a copy of the official one with the context exported. Using an even handler on the toggle component, but it does not appear one is available.
Additional context None
NOTE: I'm happy to put a PR in for this, however I'm not sure if I'm missing an established solution so want to make sure what the correct resolution would be first.
Well, we do have the context helper function defined here but it seems to be true that isn't exported.
I guess that we need to make it exposed so, users can import like:
import { useNavbarContext } from 'flowbite-react';
Right? Any other options/idea/suggestions?
Note: I added the bug tag, but I'm not sure if it is a bug or a enhancement :)
That seems like the ticket to me. It seems several components have currently non-exported contexts to control their state - so it might be a broader effort. Happy to take a crack if you like.
I can add a proof of concept illustrating how I created a toggle button for Sidebars to my flowbite-react starters. I added my own context though, and there may be a more efficient way to do this if you use the context provided by flowbite-react itself like you are looking into.
BTW, @PlasticLizard I guess that what @tulup-conner mean by not being necessary is that you can create your own context to handle the collapsed property of the Navbar. Right?
This would be definitely the easiest way. So, yeah, I don't think that we need to export the context... But we could... So, the question is do we want to? What are the benefits? Pros and Cons?
IMO it should be implemented by us since the flowbite website itself implements this behavior. Also If you tap outside the Sidebar on mobile for example that closes the Sidebar. I created my own Context to do that but I dont see why it shouldnt be baked in
Well... I have no strong opinion about it. I just need to understand what it would look like. If someone want to provide a PoC/PR it would be nice.
@PlasticLizard Sorry for taking a month to do this, but here's an example of how you can create your own React Context to toggle a Sidebar from inside a Header: https://github.com/tulupinc/flowbite-next-starter/commit/c515b414e502df379ec2e7ad2043155fff8950ad