Redesign nav bar, GlobalSearch, and dropdowns

[taneliang]

Summary

This PR redesigns our nav bar, global search, and all dropdowns throughout the app.

The design is inspired by FB5 (the recent facebook.com redesign) and @jiholim's NUSMods V4 mockups from 2018.

Because a huge number of things have been changed, it'll probably be easier to review this PR without looking at the existing code or behavior.

Fixes #3060 and resolves #1646 (no sidebar => no problem)

Thanks to @eugenood, @williamhutech, @chrisgzf, and @chuabingquan for the valuable input!

Redesigned nav bar

Why

We need space to put a lot more buttons in the future, including user account/info, and possibly an MPE button and planner button. The tab bar is full on mobile, and the top bar is full on desktop, leaving no good place to put auth info. This PR unifies both the mobile and desktop nav experience, and provides space on the right for logged-in user info + a dropdown menu for extra pages e.g. Contribute, Settings, MPE, etc.

Design Inspiration

FB5:

@jiholim's mockup:

GitHub:

What Changed

• Nav tabs on sm-width and above are moved to the nav bar.
• A nav dropdown has been added.
• AY week string has been moved into the dropdown, and an academic calendar link has been added.
• NUS Business link added.
• Global search is now always expanded, for simpler code and greater visibility.
• Centered page content, and tweak Today and Venues page layouts.

	Before	After
320px (xs)
1024px (sm)
1440px (xl)

Nav dropdown on xs

Redesigned dropdown

Why

The existing dropdown did not look particularly good, and would have been weird as a nav dropdown. As I had designed a new one for the nav dropdown based on FB5's design (but it's also pretty common elsewhere), I just moved that into our global styles for consistency throughout the whole app.

The new dropdown styles also include CSS classes for items with icons and right contents.

Design Inspiration

FB5

Screenshots

	Before	After
ExportMenu
DropdownListFilters
AddModuleDropdown

Redesigned global search

Why

Our GlobalSearch design was a little inconsistent with the rest of NUSMods, and was extremely awkward when used with the new nav bar design, and felt dated and out of place when placed beside the new dropdown.

Design Inspiration

@jiholim's mockup:

What Changed

• Dropdown now uses the global dropdown-menu styles instead of its own custom stuff.
• The section headers (i.e. Modules and Venues) are now sticky, though this is broken on iOS. I don't know why sticky is broken on iOS, but we can fix that in a future PR as the existing design doesn't have sticky at all so we've already improved on it 😆.
• The section headers are no longer clickable; only the View All buttons are.
• The dropdown no longer expands as wide as it used to.

	Before	After
Both modules and venues present
Only modules
View All hover
sm viewport

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

nusmods-website – ./website

🔍 Inspect: https://vercel.com/nusmodifications/nusmods-website/2a280s2q6
✅ Preview: https://nusmods-website-git-eliang-new-nav.nusmodifications.vercel.app

nusmods-export – ./export

🔍 Inspect: https://vercel.com/nusmodifications/nusmods-export/6m3yujq77
✅ Preview: https://nusmods-export-git-eliang-new-nav.nusmodifications.vercel.app

[chrisgzf]

I like the idea of this! Could possibly be a fresh new change with some tweaks! How many buttons are you expecting for the mobile version of this. Might be a little cramped (espc for 320px viewports).

[chrisgzf]

Toyed around with smth like this for Hack&Roll. For 1 row-nav, it felt a bit cramped already.

On 320px

Are we sticking with the 2-row nav like we currently have for mobile?

[vercel[bot]]

Deployment failed with the following error:

Resource is limited - try again after in 9 minutes (more than 100, code: "api-deployments-free-per-day").

[vercel[bot]]

Deployment failed with the following error:

Resource is limited - try again after in 6 minutes (more than 100, code: "api-deployments-free-per-day").

[taneliang]

Hey @chrisgzf! Sorry I didn't notice that you commented on this haha.

For 1 row-nav, it felt a bit cramped already.

Yeah we're definitely not gonna do a 1-row nav on mobile. I'm doing something similar to the current 2-row nav.

[codecov[bot]]

Codecov Report

Merging #3155 (27ec54c) into master (886c3c2) will increase coverage by 0.15%. The diff coverage is 84.00%.

@@            Coverage Diff             @@
##           master    #3155      +/-   ##
==========================================
+ Coverage   55.44%   55.59%   +0.15%     
==========================================
  Files         254      256       +2     
  Lines        5317     5324       +7     
  Branches     1227     1226       -1     
==========================================
+ Hits         2948     2960      +12     
+ Misses       2369     2364       -5     

Impacted Files	Coverage Δ
website/src/views/AppShell.tsx	0.00% <ø> (ø)
website/src/views/components/LinkModuleCodes.tsx	100.00% <ø> (ø)
...c/views/components/filters/DropdownListFilters.tsx	41.37% <ø> (ø)
...views/components/module-info/AddModuleDropdown.tsx	100.00% <ø> (ø)
website/src/views/layout/Navtabs.tsx	100.00% <ø> (ø)
website/src/views/planner/ModuleMenu.tsx	0.00% <ø> (ø)
website/src/views/timetable/ExportMenu.tsx	78.26% <ø> (ø)
website/src/views/layout/GlobalSearch.tsx	68.42% <80.00%> (+2.29%)	:arrow_up:
website/src/views/layout/NavDropdown.tsx	84.61% <84.61%> (ø)
website/src/views/layout/Navbar.tsx	100.00% <100.00%> (ø)
... and 4 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 886c3c2...27ec54c. Read the comment docs.

[nusmods-deploy-bot[bot]]

Deployment preview for 27ec54cd ready at http://60112d671872b4de76389fab--nusmods-deploy-preview.netlify.app

[bnjmnt4n]

I quite like the look of the new components, and the removal of the sidebar, but one area that bugged me was the centered links in the navbar, especially on larger viewports. I think there's a distinct feeling of the navbar being unbalanced, when the links are in the center and the large-ish search field on the right. I think a good solution would simply be to shift the navigation links to the left, next to the NUSMods logo. Will send a PR with screenshots later for reference/comparison.