Swap to Material UI for Nav Bar

[maflaven]

Changes

• [x] use MUI components for nav bar (discussion here https://www.notion.so/ucsfdatascience/UI-tasks-f4629c9435df4a049490a5f79e0908ac)

Discussion

• thoughts about having either app descriptions and/or names in App Menu?
• current app is excluded in App Menu. should we show it? including follows google's pattern
• drop shadow for nav bar or leave as is?
• ignore responsiveness for now?

[dtm2451]

My own thoughts on the discussion points:

• thoughts about having either app descriptions and/or names in App Menu?

For cleanliness / space, I like having the descriptions only as the text. Seems fine to me to have the app names only show on hover, and that should be something we can do with MUI if you don't already have it that way!

• current app is excluded in App Menu. should we show it? including follows google's pattern

I think let's show it!

• drop shadow for nav bar or leave as is?

I can go either way on this, but if we do keep the drop shaddow, I think it needs to be on the left side as well and the bottom (looks to be only on the bottom currently)

• ignore responsiveness for now?

How unresponsive does it feel??? I don't think we want to release something that might feel like a downgrade, but I'll test when I get a chance to give a better answer!

[graft]

+1 to include current app, I often find the variable layout of the nav confusing, it would also make an even number of apps, so could be a 2x3 grid.

Re: names etc., I think names in the tooltip/title and descriptions as subtext is best; both are necessary but showing descriptions is more friendly to novices. I might limit descriptions to a single word, like Timur - Browse, Metis - Store, Janus - Auth, Polyphemus - Link, Vulcan - Analyze, Gnomon - Name. "Store" and "Auth" seem kind of weak but I can't think of a better pithy verb here.

A few nits:

• I would get rid of "Apps" to save screen realestate in the nav
• maybe see if the popup can emerge from below the icon rather than below the nav

[dtm2451]

Maybe "Files" for the Metis descriptor instead of "Store"?

[maflaven]

• I would get rid of "Apps" to save screen realestate in the nav

done

• maybe see if the popup can emerge from below the icon rather than below the nav

done

• switched to single word verb for now

• re: drop shadow, I meant for the nav bar itself. MUI default has one but I can go either way

[maflaven]

How unresponsive does it feel??? I don't think we want to release something that might feel like a downgrade, but I'll test when I get a chance to give a better answer!

I mean in the dynamic window size sense. it's actually pretty snappy!

[graft]

• re: drop shadow, I meant for the nav bar itself. MUI default has one but I can go either way

Oh yes - I would flatten this out for sure, the nav bar should integrate well with the rest of the page.

A few alignment tweaks:

• The height of the navbar should stay exactly 61px. There are a number of pages that use calc() to subtract this amount, which may cause strange issues if they deviate by a small amount (like stray scrollbars-within-scrollbars suddenly appearing)
• It looks like there is now some extra padding on left and right of the nav bar, might want to slim this back down

[maflaven]

@graft @dtm2451 any other checks before merge?

[dtm2451]

The spacing at the top still seems different?

Production:

Here:

[dtm2451]

Also I think "Browse" > "Model" for timur. @graft?

[maflaven]

The spacing at the top still seems different?

Should match *exactly now save for slightly more spacing next to the app menu button to account for its size.

*there's actually a 1 pixel difference that's probably down to housing non-MUI elements in the nav

[amadeovezz]

@maflaven I've just merged in the Makefile changes we were working on (re: your base branch)

[amadeovezz]

this is looking great!