Mini Navigation
Change from permanent expanded navigation to the Mini Variant of the persistent navigation drawer.
Nav mini width: Max 100px
Nav expanded width: Max 300px
Use tooltips in default state
Desktop
-
Mini nav should clip under Toolbar
-
Add PSU Shield to left of Toolbar
-
Add LOGIN flat button to right of Toolbar
-
After login, show User's name in right of Toolbar
-
Add more_vert
icon with dropdown for additional options (logout, etc.)
-
Desktop Nav expands to push content
Mobile
-
Remove PSU Shield and replace with menu
icon
-
Add PSU Mark in Nav Bar at top
-
Navigation is hidden off-screen by default
-
Mobile nav opens as an overlay
Colors:
Toolbar: #1e407c
Page Background: #e5e6e7
Nav Background: #fafafa
Nav Active Tab: #1e407c
Footer: #001a4f
more_vert
icon: #96bee6
more_vert
icon focus/hover: #001a4f
Mobile nav PSU Mark background: #001a4f
See Firebase Console Navigation as example
See attached file for visual examples