UnlockedLabs / UnlockEdv2

UnlockedLabs' WIP education portal for capturing meaningful progress of incarcerated learners in external providers, to help earn good time credits
5 stars 17 forks source link

Remove Left Hand Sidebar #340

Closed calisio closed 3 weeks ago

calisio commented 1 month ago

The left-hand sidebar and the drop-down profile menu in the upper-right hand corner are essentially redundant. To free up more screen space, remove the left-hand sidebar from all views.

calisio commented 1 month ago

Is there an idea of what else would want to live in this page? Personally I feel as though the left hand side bar is more easily navigable than the top right drop down, and gives the ability for us to add more pages in the future. If this existed in the top right drop down, this list would get long and complicated in such a compact space. I feel like the concept of an easily accessible Navbar is necessary. As an alternative, we could have this left hand as a hamburger type menu that is collapsed by default. Something like this https://daisyui.com/components/drawer/#drawer (click open drawer). Thoughts @chrissantillan @pd3000 ?

chrissantillan commented 1 month ago

@calisio I have no problem with using a left-hand drawer, or even a left-hand menu that collapses to just the icons in a narrow sidebar (v1 had that feature. The sidebar would collapse to just the icons, including the logo, which reduced in size as well. Whatever we can do to reclaim some of that real estate on the left-hand side (for what TBD, perhaps to show more Pick Up Where You Left Off courses, for example)

calisio commented 1 month ago

Amazing. I'll look into a collapsable option then!

chrissantillan commented 1 month ago

Per our discussion @calisio and @jtucholski, left-hand sidebar should, similar to Notion's sidebar, should have collapsible functionality. The left-hand sidebar will be in the open (locked) position by default. A user should be able to:

  1. toggle the sidebar closed via clicking a << icon or hamburger icon at the top of the sidebar (perhaps appearing only when user hovers on sidebar like in Notion?). Doing so would collapse sidebar and reduce the logo to an icon in the upper left-hand corner of view with hamburger icon to the right of that
  2. Hovering on the hamburger icon would reveal sidebar as a flyout. Hamburger icon replaced with >> icon
  3. Hovering on the flyout sidebar would keep the sidebar in place
  4. Clicking on the >> icon would lock the sidebar in place