Targeting tablets, for example, let’s say we want to have a panel collapse to icons. (something like this: Sidebar - shadcn/ui)
What would be a good way to go about this (without having to implement my own custom panel component)?
just f.y.i. I’m using framework7-react.
I did this recently, using framework7-vanilla - didn’t take long at all to implement it.
I approached creating a left sidebar in the same way the bottom toolbar is implemented - Toolbar / Tabbar | Framework7 Documentation -
Note: it must be a direct child of Views element and be BEFORE all views.
But then instead of a bottom toolbar, make it a left sidebar. I didn’t use panel, as I didn’t want it to be an overlay.
Use CSS for a smooth sliding transition, and CSS to hide it when viewport is narrow.
Most likely you don’t want to use the master/detail, it’s not really appropriate for this, I wasted some time trying to use master/detail before fully understanding it’s use case.
There’s probably better ways to do it, but am happy with the result. Hope that is at least a little bit helpful!