This repository has been archived by the owner on May 22, 2024. It is now read-only.
New nav structure #157
Merged
New nav structure #157
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
and allow configuration from the Header level (via an array for now & possibly Contentful at a future date)
… 'Navbar' as SideNav only therefore altered all media queries in the existing Navbar file to correspond to 959px (not quite tablet)
…stead of the Grid
…tyling on font colours
we only have a story for the TopNavbar, since the SideNav is still not to spec
…ccommodate 8th link this is only temporary and will be replaced as soon as the dropdowns are incorporated into the TopNav
…ropdown component expects
…nchor components are written & change TopNav to accept the same props
by forcing 'overflow: visible' onto Row & Col wrapping the header
…differently styled components
…d maring+padding styles together
| background: ${props => props.theme.colors.white}; | ||
| color: ${props => props.theme.colors.text}; | ||
| opacity: 1; | ||
| ` | ||
|
|
||
| export const hoverLightStyles = css` | ||
| const hoverLight = css` | ||
| background: ${props => props.theme.colors.greyBG}; | ||
| color: ${props => props.theme.colors.text}; | ||
| opacity: 1; |
There was a problem hiding this comment.
It seems that since the opacity: 1 is on the default state, some of these opacity: 1 rule can be remove, or am I wrong?
| if (props.themeVariation === 'light') { | ||
| return css` | ||
| ${defaultLightStyles} | ||
| ${props => props.states.default} |
There was a problem hiding this comment.
this turned out pretty elegant 💅
| import { lightStates, darkStates } from './outerItemStates' | ||
|
|
||
| const DropdownContainer = styled.li.attrs(props => ({ | ||
| states: props.themeVariation === 'dark' ? darkStates : lightStates |
antoniocapelo
approved these changes
Mar 18, 2019
jsms90
force-pushed
the
new-nav-structure
branch
from
63e42f0
to
2d2ff3b
Compare
and remove specific pixel width restriction on CustomisedBulletpoint - instead allow this to span width of container
jsms90
force-pushed
the
new-nav-structure
branch
from
a00833d
to
1ad9f69
Compare
jsms90
force-pushed
the
new-nav-structure
branch
from
9ce8f4b
to
86144b6
Compare
jsms90
force-pushed
the
new-nav-structure
branch
from
86144b6
to
6112ad3
Compare
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implement new navbar structure, including dropdowns - Trello ticket
Navbar:
TopNav&SideNav& pass in an object of links as a prop to bothDesktopDropdowninto 2 versionsouterItemStyles.js, for re-use across anchors & the dropdown namesnavItemSpacing.jsfiles to share spacing values between outer & inner list items - done via a combination of padding and margin, in order to make room for the outline styles on focus960pxagain, as the breakpoint width forTopNavturning intoSideNavRefactor, during build:
outlinefrom theme & usevibranteverywhere in codebase. Also update thevibrantcolour to "Neon green" from ZeplinactiveClassNameprop through toExternalLink(fixes console log error)Review template