feature: add Header component
This commit is contained in:
parent
9228e053be
commit
70e1385568
|
@ -0,0 +1,67 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { ZCashLogo } from './zcash-logo';
|
||||||
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
height: ${props => props.theme.headerHeight};
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
background-color: ${props => props.theme.colors.background};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LogoWrapper = styled.div`
|
||||||
|
height: ${props => props.theme.headerHeight};
|
||||||
|
width: ${props => props.theme.sidebarWidth};
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
${props => props.theme.colors.sidebarLogoGradientBegin},
|
||||||
|
${props => props.theme.colors.sidebarLogoGradientEnd}
|
||||||
|
);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TitleWrapper = styled.div`
|
||||||
|
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||||
|
height: ${props => props.theme.headerHeight};
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-left: ${props => props.theme.layoutPaddingLeft};
|
||||||
|
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Title = styled(TextComponent)`
|
||||||
|
font-size: ${props => `${props.theme.fontSize.title}em`};
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Divider = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
background-color: ${props => props.theme.colors.text};
|
||||||
|
height: 1px;
|
||||||
|
opacity: 0.1;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title: string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const HeaderComponent = ({ title }: Props) => (
|
||||||
|
<Wrapper>
|
||||||
|
<LogoWrapper>
|
||||||
|
<ZCashLogo />
|
||||||
|
</LogoWrapper>
|
||||||
|
<TitleWrapper>
|
||||||
|
<Title value={title} />
|
||||||
|
<Divider />
|
||||||
|
</TitleWrapper>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
|
@ -13,32 +13,42 @@ import { SettingsView } from '../views/settings';
|
||||||
import { NotFoundView } from '../views/not-found';
|
import { NotFoundView } from '../views/not-found';
|
||||||
import { ConsoleView } from '../views/console';
|
import { ConsoleView } from '../views/console';
|
||||||
import { LayoutComponent } from '../components/layout';
|
import { LayoutComponent } from '../components/layout';
|
||||||
|
import { HeaderComponent } from '../components/header';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
DASHBOARD_ROUTE, SEND_ROUTE, RECEIVE_ROUTE, SETTINGS_ROUTE, CONSOLE_ROUTE,
|
DASHBOARD_ROUTE, SEND_ROUTE, RECEIVE_ROUTE, SETTINGS_ROUTE, CONSOLE_ROUTE,
|
||||||
} from '../constants/routes';
|
} from '../constants/routes';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const FullWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ContentWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const RouterComponent = ({ location }: { location: Location }) => (
|
export const RouterComponent = ({ location }: { location: Location }) => (
|
||||||
<Wrapper>
|
<FullWrapper>
|
||||||
<SidebarContainer location={location} />
|
<HeaderComponent title='Dashboard' />
|
||||||
<ScrollTopComponent>
|
<ContentWrapper>
|
||||||
{/* $FlowFixMe */}
|
<SidebarContainer location={location} />
|
||||||
<LayoutComponent>
|
<ScrollTopComponent>
|
||||||
<Switch>
|
{/* $FlowFixMe */}
|
||||||
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
|
<LayoutComponent>
|
||||||
<Route path={SEND_ROUTE} component={SendView} />
|
<Switch>
|
||||||
<Route path={RECEIVE_ROUTE} component={ReceiveView} />
|
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
|
||||||
<Route path={SETTINGS_ROUTE} component={SettingsView} />
|
<Route path={SEND_ROUTE} component={SendView} />
|
||||||
<Route path={CONSOLE_ROUTE} component={ConsoleView} />
|
<Route path={RECEIVE_ROUTE} component={ReceiveView} />
|
||||||
<Route component={NotFoundView} />
|
<Route path={SETTINGS_ROUTE} component={SettingsView} />
|
||||||
</Switch>
|
<Route path={CONSOLE_ROUTE} component={ConsoleView} />
|
||||||
</LayoutComponent>
|
<Route component={NotFoundView} />
|
||||||
</ScrollTopComponent>
|
</Switch>
|
||||||
</Wrapper>
|
</LayoutComponent>
|
||||||
|
</ScrollTopComponent>
|
||||||
|
</ContentWrapper>
|
||||||
|
</FullWrapper>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue