Defect: Fix Mobile Sidebar

[willcbelcher]

Topic
Current sidebar formatting in mobile is clunky, as there are two hamburger buttons. They should ideally be collapsed into one.

Service
Frontend

Steps

[jdhaines]

It's clunky to have two? The top one is for the header and navigation buttons. The second is for the sidebar to show filters and such. Not every page will have a sidebar, but I think functionally they're two unrelated things. I don't think you should have to open the sidebar if you want to go to "About" or another page. What would you like to see instead?

[willcbelcher]

Personally i think it is very clunky to have two. I see that not all pages might have headers, so we might not need to collapse them into one, but we need to find a better way than two hamburger buttons. Not a very good UI in my opinion. Maybe just give the users raw dropdown configurations for the mobile version? Not sure, but ill see if i can play around with some styles or some existing examples.

[jdhaines]

All pages will have the header and you'll need access to those top links on every page. Other pages may or may not have sidebars. Maybe we have a filters button like the DigCap I built that drags out the sidebar slider. Hamburger buttons are the standard UI tool that lets someone know there is a collapsed menu.

[jdhaines]

Can this one be closed or did you think of another way to do it?

[willcbelcher]

I personally still think having two hamburger buttons on the mobile page is bad UX design. It's not clear which menu does what. Since we currently only have one dropdown selector (project), and I don't think (?) we will have any more, I think getting rid of the second hamburger button in the mobile view is the right move. We can replace the "line" it is on with a simple selector for the project dropdown instead. That way, it is super clear which project you are looking at on mobile and you don't have to make an extra click just to select the project. Something similar to this but with the selector in the line where the second hamburger button was.