Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: adjust sizing of sidebar menu #1112

Closed
wants to merge 4 commits into from

Conversation

DonKoko
Copy link
Contributor

@DonKoko DonKoko commented Jun 28, 2024

@carlosvirreira @jurrejansen, so as we discussed before I was a bit triggered by our sidebar. I feel like the menu items are too huge and the icons are very big and bulky with very wide stroke. Also our icons have different color than the text so that also looks not so great. Especially when i compare it to some other sidebars that look so much cleaner.

Mintlify example:

Screenshot 2024-06-28 at 15 53 54
Screenshot 2024-06-28 at 15 53 50

I also really like how their close/open works.
Also this part is kinda messy in terms of code and I think it should be in general cleaned up and made easier to maintain and work with.

I would also like to consider the idea of using radix icons in the sidebar, as they just work. We dont need to export and do some shenanigans for each icon for it to work. https://www.radix-ui.com/icons

I have deployed this to testapp(https://github.com/Shelf-nu/shelf.nu/actions/runs/9713220465) so u can see it and lmk what u think. Its very experimental for now.

@DonKoko DonKoko changed the title more sizing adjustments refactor: adjust sizing of sidebar menu Jun 28, 2024
@jurrejansen
Copy link

jurrejansen commented Jul 1, 2024

@DonKoko is there a demo environment or something like this where I can check how the maximizing / minimizing works with the Mintlify sidebar component?

I agree let's make it more compact in general. The current implementation of what you pushed to testapp looks pretty good. However there are issues when sidebar is minimized and the stroke width of icons and text doesn't feel right. Spent a bit of time on design and basically looks like what you implemented but I would like to be very specific with paddings / spacings / stroke width, etc.

https://www.figma.com/design/ykvc0MhPeNLsrJ4tJsKosQ/Shelf-%7C-UX-Scenarios?node-id=6460-2198

Screenshot 2024-07-01 at 13 32 58
Screenshot 2024-07-01 at 13 33 08

https://github.com/Shelf-nu/shelf.nu/assets/76112272/bb92489c-ad4b-4266-a66c-912bac005e63
https://github.com/Shelf-nu/shelf.nu/assets/76112272/3ed33b91-a53a-4fe1-b198-8df3840a92a9

The slight color difference between icon and text is intentional. I personally like it but let's see.

Using the Radix Icons would drastically limit the amount of icons we can use. Would prefer to find a procedure that works for using the Untitled UI ones.

Screenshot 2024-07-01 at 13 42 02

The sidebar was the only place where they were looking good and contained actually. Besides the edited icon for scanning I provided and the the one for Calendar. Stroke width was too thin. But if we can figure out a procedure to make the icons look good and consistent for the elements down below we're good.

Screenshot 2024-07-01 at 13 45 35

@DonKoko
Copy link
Contributor Author

DonKoko commented Jul 2, 2024

@jurrejansen thanks man. I agree with most of the stuff you said. Once we finish the stuff I am busy with I will pick this up again.

@DonKoko DonKoko marked this pull request as draft July 12, 2024 09:53
@DonKoko DonKoko closed this Jul 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants