Foldable sidebar about shelf.nu HOT 6 CLOSED

Yes will implement that with tailwind only.
also, as of now we will be opening the hidden part of sidebar only on hovering on it?

from shelf.nu.

Yes please check the comment/video from @jurrejansen above. He explained how it should behave.

from shelf.nu.

Hi @DonKoko

I was thinking about taking a similar approach as Mailchimp

How does the user open the folded sidebar?

By hovering over the sidebar -> sidebar expands absolute -> with top right icon the user would be able to keep the sidebar in an open state (when clicked sidebar pushes the main content to the right)

How does the user log-out when sidebar is folded?

When hovered, the sidebar would always be in an open state

As you can see in the screen recording Mailchimp is not using an animation. I would be happy to prototype one or we can skip (for MVP).

The behaviour described above is a bit different than what I had in mind when doing the designs. Let me know if you're down with this or not. Then I'll update / expand the design where needed.

from shelf.nu.

Okey i see. I personally find this very annoying functionality with this thing popping in and out the whole time, It just feels not so smooth, but I am open for giving it a test. Thanks for clarifying.

from shelf.nu.

What are your views on this example of foldable sidebar @DonKoko ?

Demo: https://www.cssscript.com/demo/smooth-collapsible-sidebar-navigation/
Code: https://www.cssscript.com/smooth-collapsible-sidebar-navigation/

should we follow the same approach?

from shelf.nu.

@hunar1312 yes, i like that its just a bunch of css. We do have already existing tooling to implement this tho using tailwind. So tailwind has all the classes to manage the folding and twMerge can help you dynamically merge classes.

Here is an example how you can dynamically merge tailwind classes based on a condition: https://github.com/Shelf-nu/shelf.nu/blob/dev/app/components/shared/button.tsx#L46-L48

from shelf.nu.