From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:01:53 -0800 Subject: feat: move all @next files to non @next directory --- packages/website/ts/components/header.tsx | 252 ++++++++++++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 packages/website/ts/components/header.tsx (limited to 'packages/website/ts/components/header.tsx') diff --git a/packages/website/ts/components/header.tsx b/packages/website/ts/components/header.tsx new file mode 100644 index 000000000..e886923df --- /dev/null +++ b/packages/website/ts/components/header.tsx @@ -0,0 +1,252 @@ +import { Link } from '@0x/react-shared'; +import _ from 'lodash'; +import * as React from 'react'; +import MediaQuery from 'react-responsive'; +import styled, { css, withTheme } from 'styled-components'; + +import Headroom from 'react-headroom'; + +import { Button } from 'ts/@next/components/button'; +import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; +import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; +import { Hamburger } from 'ts/@next/components/hamburger'; +import { Logo } from 'ts/@next/components/logo'; +import { MobileNav } from 'ts/@next/components/mobileNav'; +import { FlexWrap } from 'ts/@next/components/newLayout'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; +import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; + +interface HeaderProps { + location?: Location; + isNavToggled?: boolean; + toggleMobileNav?: () => void; + theme: ThemeValuesInterface; +} + +interface NavItemProps { + url?: string; + id?: string; + text?: string; + dropdownWidth?: number; + dropdownComponent?: React.FunctionComponent; + shouldOpenInNewTab?: boolean; +} + +interface DropdownWrapInterface { + width?: number; +} + +const navItems: NavItemProps[] = [ + { + id: 'why', + url: WebsitePaths.Why, + text: 'Why 0x', + }, + { + id: 'products', + text: 'Products', + dropdownComponent: DropdownProducts, + dropdownWidth: 280, + }, + { + id: 'developers', + text: 'Developers', + dropdownComponent: DropdownDevelopers, + dropdownWidth: 480, + }, + { + id: 'about', + url: WebsitePaths.AboutMission, + text: 'About', + }, + { + id: 'blog', + url: constants.URL_BLOG, + shouldOpenInNewTab: true, + text: 'Blog', + }, +]; + +class HeaderBase extends React.Component { + public onUnpin = () => { + if (this.props.isNavToggled) { + this.props.toggleMobileNav(); + } + }; + + public render(): React.ReactNode { + const { isNavToggled, toggleMobileNav, theme } = this.props; + + return ( + + + + + + + + + {_.map(navItems, (link, index) => )} + + + + + Trade on 0x + + + + + + + + + ); + } +} + +export const Header = withTheme(HeaderBase); + +const NavItem = (props: { link: NavItemProps; key: string }) => { + const { link } = props; + const Subnav = link.dropdownComponent; + const linkElement = _.isUndefined(link.url) ? ( + {link.text} + ) : ( + + {link.text} + + ); + return ( + + {linkElement} + + {link.dropdownComponent && ( + + + + )} + + ); +}; + +const StyledHeader = + styled.header < + HeaderProps > + ` + padding: 30px; + background-color: ${props => props.theme.bgColor}; +`; + +const LinkWrap = styled.li` + position: relative; + + a { + display: block; + } + + @media (min-width: 800px) { + &:hover > div { + display: block; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0, 0); + transition: opacity 0.35s, transform 0.35s, visibility 0s; + } + } +`; + +const linkStyles = css` + color: ${props => props.theme.textColor}; + opacity: 0.5; + transition: opacity 0.35s; + padding: 15px 0; + margin: 0 30px; + + &:hover { + opacity: 1; + } +`; + +const StyledNavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + ${linkStyles}; +`; + +const StyledAnchor = styled.a` + ${linkStyles}; + cursor: default; +`; + +const HeaderWrap = styled(FlexWrap)` + justify-content: space-between; + align-items: center; + + @media (max-width: 800px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } +`; + +const NavLinks = styled.ul` + display: flex; + align-items: center; + justify-content: space-between; + + @media (max-width: 800px) { + display: none; + } +`; + +const DropdownWrap = + styled.div < + DropdownWrapInterface > + ` + width: ${props => props.width || 280}px; + padding: 15px 0; + border: 1px solid transparent; + border-color: ${props => props.theme.dropdownBorderColor}; + background-color: ${props => props.theme.dropdownBg}; + color: ${props => props.theme.dropdownColor}; + position: absolute; + top: 100%; + left: calc(50% - ${props => (props.width || 280) / 2}px); + visibility: hidden; + opacity: 0; + transform: translate3d(0, -10px, 0); + transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s; + z-index: 20; + + &:after, &:before { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + &:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: ${props => props.theme.dropdownBg}; + border-width: 10px; + margin-left: -10px; + } + &:before { + border-color: rgba(255, 0, 0, 0); + border-bottom-color: ${props => props.theme.dropdownBorderColor}; + border-width: 11px; + margin-left: -11px; + } + + @media (max-width: 768px) { + display: none; + } +`; + +const TradeButton = styled(Button)` + padding: 14px 22px !important; +`; -- cgit v1.2.3 From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:03:06 -0800 Subject: feat: remove @next directory from all imports --- packages/website/ts/components/header.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'packages/website/ts/components/header.tsx') diff --git a/packages/website/ts/components/header.tsx b/packages/website/ts/components/header.tsx index e886923df..90e097070 100644 --- a/packages/website/ts/components/header.tsx +++ b/packages/website/ts/components/header.tsx @@ -6,14 +6,14 @@ import styled, { css, withTheme } from 'styled-components'; import Headroom from 'react-headroom'; -import { Button } from 'ts/@next/components/button'; -import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; -import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; -import { Hamburger } from 'ts/@next/components/hamburger'; -import { Logo } from 'ts/@next/components/logo'; -import { MobileNav } from 'ts/@next/components/mobileNav'; -import { FlexWrap } from 'ts/@next/components/newLayout'; -import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; +import { Button } from 'ts/components/button'; +import { DropdownDevelopers } from 'ts/components/dropdowns/dropdown_developers'; +import { DropdownProducts } from 'ts/components/dropdowns/dropdown_products'; +import { Hamburger } from 'ts/components/hamburger'; +import { Logo } from 'ts/components/logo'; +import { MobileNav } from 'ts/components/mobileNav'; +import { FlexWrap } from 'ts/components/newLayout'; +import { ThemeValuesInterface } from 'ts/components/siteWrap'; import { WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; -- cgit v1.2.3