Foldable sidebar

[DonKoko]

We need to implement the functionality to make the sidebar foldable.

Design

Open state:

Closed state:

@jurrejansen @carlosvirreira
We are missing some designs related to this, or at least I cannot find them

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

Functionality

1. The sidebar closes when clicking the icon on the right of the logo
   
2. The sidebar opens ( we are still waiting for designs for that)
3. The sidebar opening/closing should be animated. I guess we can just do it with css, however we use Framer motion(https://www.framer.com/motion/) maybe that's easier?
4. We should implement a cookie that remembers the user's last state of the sidebar, as we don't want them to have to close it every time. This can also be saved in the DB but for now a cookie is fine.

[jurrejansen]

Hi @DonKoko

I was thinking about taking a similar approach as Mailchimp

Screen.Recording.2023-04-03.at.11.59.10.mov

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.

[DonKoko]

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.

[hunar1312]

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?

[DonKoko]

@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

[hunar1312]

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?

[DonKoko]

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