diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 17:47:48 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 17:47:48 +0800 |
commit | 0a05ef36a6ba5989945f2eb99bee52647826cd85 (patch) | |
tree | cf18909b14778720fc0d9eabfc2b0eb6976ab74b /packages/website/ts/@next | |
parent | 11c864e20d15d4181057628c1f695684332a7365 (diff) | |
download | dexon-sol-tools-0a05ef36a6ba5989945f2eb99bee52647826cd85.tar dexon-sol-tools-0a05ef36a6ba5989945f2eb99bee52647826cd85.tar.gz dexon-sol-tools-0a05ef36a6ba5989945f2eb99bee52647826cd85.tar.bz2 dexon-sol-tools-0a05ef36a6ba5989945f2eb99bee52647826cd85.tar.lz dexon-sol-tools-0a05ef36a6ba5989945f2eb99bee52647826cd85.tar.xz dexon-sol-tools-0a05ef36a6ba5989945f2eb99bee52647826cd85.tar.zst dexon-sol-tools-0a05ef36a6ba5989945f2eb99bee52647826cd85.zip |
Cleanup header
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 93 |
1 files changed, 38 insertions, 55 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 6444a1b97..9298014f3 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -25,10 +25,6 @@ interface HeaderState { isOpen: boolean; } -interface HeaderState { - isOpen: boolean; -} - interface NavItem { url?: string; id?: string; @@ -47,12 +43,14 @@ const navItems: NavItem[] = [ url: '/next/0x-instant', text: 'Products', dropdownComponent: DropdownProducts, + dropdownWidth: 280, }, { id: 'developers', url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, + dropdownWidth: 420, }, { id: 'about', url: '/next/about/mission', text: 'About' }, { id: 'blog', url: '#', text: 'Blog' }, @@ -63,6 +61,36 @@ export class Header extends React.Component<HeaderProps, HeaderState> { isOpen: false, }; + public onMenuButtonClick = (): void => { + this.setState({ + isOpen: !this.state.isOpen, + }); + } + + public getNavItem = (link: NavItem, index: number): React.ReactNode => { + const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; + const Subnav = link.dropdownComponent; + + return ( + <Wrapper> + <Link + key={`nav-${index}`} + href={link.url} + isTransparent={true} + isNoBorder={true} + > + {link.text} + </Link> + + {link.dropdownComponent && + <DropdownWrap width={link.dropdownWidth}> + <Subnav /> + </DropdownWrap> + } + </Wrapper> + ); + } + public render(): React.ReactNode { return ( <Headroom> @@ -72,7 +100,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> { <Logo/> </ReactRouterLink> - <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/> + <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/> <Nav> <MobileProductLinksWrap> @@ -89,7 +117,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> { </MobileProductLinksWrap> <StyledButtonWrap> - {_.map(navItems, (link, index) => this._getNavItem(link, index))} + {_.map(navItems, (link, index) => this.getNavItem(link, index))} </StyledButtonWrap> </Nav> <TradeButton href="#">Trade on 0x</TradeButton> @@ -98,45 +126,13 @@ export class Header extends React.Component<HeaderProps, HeaderState> { </Headroom> ); } - private _onMenuButtonClick(): void { - this.setState({ - isOpen: !this.state.isOpen, - }); - } - private _getNavItem(link: NavItem, index: number): React.ReactNode { - const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; - const Subnav = link.dropdownComponent; - - return ( - <Wrapper> - <StyledLink - key={`nav-${index}`} - href={link.url} - isTransparent={true} - isNoBorder={true} - > - {link.text} - </StyledLink> - - {link.dropdownComponent && - <DropdownWrap> - <Subnav /> - </DropdownWrap> - } - </Wrapper> - ); - } } const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` @media (max-width: 768px) { - overflow: hidden; min-height: ${props => props.isOpen ? '385px' : '70px'}; position: relative; transition: min-height 0.25s ease-in-out; - :root & { - padding: 20px 20px 0 !important; - } } @media (min-width: 768px) { @@ -157,6 +153,7 @@ const HeaderWrap = styled(Wrap)` const StyledButtonWrap = styled(ButtonWrap)` display: flex; + @media (max-width: 768px) { background-color: #022924; display: flex; @@ -166,17 +163,7 @@ const StyledButtonWrap = styled(ButtonWrap)` a { text-align: left; padding-left: 0; - } - } - - button + button, - a + a, - a + button, - button + a { - margin-left: 0; - - @media (min-width: 768px) { - margin-left: 10px; + margin: 0 !important; } } `; @@ -213,13 +200,13 @@ const LinkWrap = styled.div` `; const DropdownWrap = styled.div` - width: 420px; + width: ${props => props.width || 280}px; padding: 15px 0; background-color: #ffffff; color: #000000; position: absolute; top: 100%; - left: calc(50% - 210px); + left: calc(50% - ${props => (props.width || 280) / 2}px); visibility: hidden; opacity: 0; transform: translate3d(0, -10px, 0); @@ -241,10 +228,6 @@ const DropdownWrap = styled.div` } `; -const StyledLink = styled(Link)` - -`; - const Nav = styled.div` @media (max-width: 768px) { background-color: ${colors.brandDark}; |