Navigation improvements #563

jerelmiller · 2020-08-07T20:41:23Z

Closes #505

Description

Tweaks to the sidebar navigation to tighten it up a bit and improve some of the UX. Specifically:

Reduces the size of the logo to reduce its vertical footprint
Fixes the logo + search box to the top of the scrollable container to allow the links to scroll underneath it
Reduce space between each top-level link to reduce vertical footprint
Better define space between sections of links
Add a different "current page" treatment to avoid the text from jumping from a single line to 2 when selected
Moves the open/closed chevrons to the right of the link
Closes the top-level links when on the home page

Screenshots

…the link is matched

zstix

Oooh this looks super good!

nr-opensource-bot · 2020-08-11T18:23:49Z

🎉 This PR is included in version 1.10.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

jerelmiller added 21 commits August 6, 2020 23:36

chore: use emotion to style sidebar

c635331

chore: fix prop type warning

799b78c

refactor: use location to determine if page has changed

b17e01c

refactor: use location.pathname to determine if on current page

688861a

refactor: use location to determine current page

58bf88d

style: add curlys around if condition

b0b24b0

fix: some tightening of the sidebar

3f61d5c

refactor: move ul to NavigationItems component

61c9896

refactor(NavigationItems): use divs as wrapper instead of ul

9af0f49

refactor: only apply breadcrumb/current page styles depending on how …

9e0147b

…the link is matched

chore: rename className

c798f13

fix: add background for current page

c76c91a

fix: better alignment of background with its parent

34c5fd4

fix: always render hover color + only change text on dark mode

32ac1ae

chore: remove unused variables

5f03ee8

chore: shorten margin on sidebar

3e44395

refactor: extract common variables

6e473ea

refactor: extract condition for determining when to render nav item

ddd6107

fix: move chevrons to right of the link

91c2854

fix: thinner chevrons

e626b1e

fix: show chevrons for top level nav items

c8a69b6

jerelmiller added enhancement New feature or request work in progress This is work that is not yet ready for review labels Aug 7, 2020

jerelmiller added 7 commits August 8, 2020 20:35

fix: ensure header covers up selected nav item

71d309f

chore: move MobileHeader styles to emotion

ff98df6

fix: use HamburgerMenu from the theme

48b65ff

fix: better mobile menu

5c46e39

fix: close mobile nav after navigating to a new page

641f057

fix: dont open links on home page

de74639

fix: match font weight on selected top-level nav item

e7fc9ad

jerelmiller added 4 commits August 8, 2020 23:09

chore: remove partial link match styling

2c62bd3

fix: only toggle current page if active

d00e2df

chore: use useMatch to determine current page

3b9ba0c

fix: use SearchInput from gatsby theme in nav

04f402d

jerelmiller marked this pull request as ready for review August 10, 2020 17:46

zstix approved these changes Aug 11, 2020

View reviewed changes

jerelmiller merged commit 25be620 into main Aug 11, 2020

jerelmiller deleted the jerel/tighten-nav branch August 11, 2020 18:17

nr-opensource-bot added the released label Aug 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navigation improvements #563

Navigation improvements #563

jerelmiller commented Aug 7, 2020 •

edited

Loading

zstix left a comment

nr-opensource-bot commented Aug 11, 2020

Navigation improvements #563

Navigation improvements #563

Conversation

jerelmiller commented Aug 7, 2020 • edited Loading

Description

Screenshots

zstix left a comment

Choose a reason for hiding this comment

nr-opensource-bot commented Aug 11, 2020

jerelmiller commented Aug 7, 2020 •

edited

Loading