Polish side navigation styling #155
Conversation
caylahamann
added
the
work in progress
|
A couple things to note looking at the PR preview:
|
Removed the underline, the homepage is now expanded, and made the headings of each sections as links (except for the developer section) |
| display: none; | ||
| } | ||
|
|
||
| .isDisplay { |
There was a problem hiding this comment.
Would it be better to call this class name expanded? It took me a bit to realize the isDisplay was for expanding a section of the nav.
| @@ -0,0 +1,3 @@ | |||
| import React from 'react'; | |||
|
|
|||
| export const BreadcrumbContext = React.createContext([]); | |||
There was a problem hiding this comment.
[nit] You can make this the default export since this is the "main" thing exported from this file.
| ); | ||
| <div | ||
| role="button" | ||
| onClick={() => setIsDisplay(!isDisplay)} |
There was a problem hiding this comment.
Out of curiosity, if you do have a section that is collapsed and can be expanded because it doesn't include a url, will this collapse other sections or leave them open?
|
|
||
| const Sidebar = ({ className, pages, isOpen, toggle }) => ( | ||
| if (page.children) { | ||
| subNav = renderNav(page.children, depthLevel + 1); |
There was a problem hiding this comment.
[nit] Since this subnav variable isn't used elsewhere, you can move this inline:
<ul {/* ... */}>
{page.children && renderNav(page.children, depthLevel + 1)}
<ul>Totally your call on what you find more readable.
| key={index} | ||
| > | ||
| {display} | ||
| <ul className={cx(styles.nestedNav, { [styles.isDisplay]: isDisplay })}> |
There was a problem hiding this comment.
If there are no children for the page, does this ul render with empty content? Should this ul render at all if there are no links to render inside of it?
| className={cx(styles[`navDepth${depthLevel}`], { | ||
| [styles.isCurrentPage]: isCurrentPage, | ||
| })} | ||
| key={index} |
There was a problem hiding this comment.
Since the URLs should all be unique, I think it would be better to use that url as the key here. This will be more efficient for React since it won't need to destroy/recreate the DOM nodes if the links re-order themselves (like if a section is collapsed, or we add filtering to the nav).
| font-weight: bold; | ||
| text-transform: uppercase; | ||
| color: var(--color-neutrals-600); | ||
| font-size: 14px; |
There was a problem hiding this comment.
[style] Prefer rems instead of px for font sizes. Can you change this to 0.875rem?
There was a problem hiding this comment.
I see that the .sidebar class already includes this font size. Is there a need for this declaration here?
|
Will merge this PR and address some of these things in a future PR that addresses more general layout polish. |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
sidenav.jsonReviewer Notes
This is a WIP but I just wanted to open a PR in case anybody had a free moment to look at it or give feedback. I'm planning on changing the nested sass once I refactor the recursive function (I'm going to keep track of levels and dynamically add classes that way) and also styling according to the designs
Related Issue(s) / Ticket(s)
If there are any related GitHub Issues or JIRA tickets, add links to them here.
Screenshot(s)