ChrisVilches/poller-ui

Layout and sidebar

Opened this issue · 0 comments

ChrisVilches commented

Layout & Sidebar

Completed Tasks ✅

Menu should close when the user clicks some buttons.

Menu should close after doing some operations, but not all.

  1. Changing page should close it.
  2. Interacting with the tag creation form should not close it.

OK: Implemented using the useLocation hook.

The break-point for the menu should be different.

It gets full-width too soon. I'd like to have the custom half-width sidebar I made for a larger range of width values. But if you change the break points, make sure the sidebar width (which I think is fixed) fits correctly. Note: this can be done without altering Tailwind default values. Simply add a custom class with a media query and add the class to the sidebar, that's all that's needed.

OK: media query with custom CSS class added.

Sidebar TODO

  • It may be better to use the Menu component from Headless UI instead of the Transition one. (But that one may not work, so in that case just use Transition). DONE: Used Dialog component.
  • Menu should close when the user clicks outside.
  • When the sidebar is active, the scrollbar should disappear from the main content, and it should enable on the sidebar (assuming I fix how the tags are shown, since for now it's not designed to support a huge list of tags).
  • The sidebar toggle button is very basic (but functional). It could have better UX, like become sticky when the user scrolls down, and add a colored background when the user has scrolled a bit.
  • I'm not sure about accessibility as well. It's probably not very good, but it's not a high priority task anyway. Try to improve or research good practices.
  • SEO is also a low priority concern, but I should research a bit.
  • The layout for desktop screens was made using fixed and a padding. Is that robust enough? I was thinking of using flex and keeping one column static (without scroll) but it wasn't possible when I tried.
  • Sidebar must be tested on an actual smartphone. Currently it doesn't work perfectly. (Don't just use the Chrome mobile view).

Idea

Use a Headless UI modal as a sidebar? I think if I set the transition correctly, it'll work exactly as a sidebar. For example it will handle the scrolling issue, the clicking outside to close it, etc. It's probably better than the transition component I used, but I should test to see if it works or not.

Implemented here: #4

Prefabricated Solutions

There are many requirements, so maybe the best way would be to remake it from scratch with a library
or something, but I think it's possible to do it manually.

Also, is it OK to implement it manually without a library? It seems like a hard task, and many things can
go wrong with this. Research how other people are implementing sidebar menus.

Sidebar tutorial:
https://www.youtube.com/watch?v=-I5P0J_Tv80

A React library (not headless). It requires SASS in order to customize it:

https://github.com/azouaoui-med/react-pro-sidebar

Make sure custom elements (like the tag creation form) can be added as well.