65 lines
1.3 KiB
JavaScript
65 lines
1.3 KiB
JavaScript
import paths from 'client/common/paths';
|
|
import { LogoText } from 'client/Elements/Text';
|
|
import colors from 'client/UIKit/colors';
|
|
import { Box, Flex } from 'client/UIKit/grid';
|
|
import React from 'react';
|
|
import { Route, Switch } from 'react-router-dom';
|
|
|
|
const Header = () => (
|
|
<Flex style={styles.header}>
|
|
{/* {paths.map(
|
|
(path, i) =>
|
|
path.route && (
|
|
<Link to={path.route}>
|
|
<MenuButton key={i}>{path.name}</MenuButton>
|
|
</Link>
|
|
)
|
|
)} */}
|
|
<LogoText>EVO Calculator</LogoText>
|
|
</Flex>
|
|
);
|
|
|
|
const Content = () => (
|
|
<Box style={styles.root}>
|
|
<Switch>
|
|
{paths.map((path, i) => (
|
|
<Route
|
|
key={i}
|
|
path={path.route}
|
|
exact={path.exact}
|
|
component={path.content}
|
|
/>
|
|
))}
|
|
</Switch>
|
|
</Box>
|
|
);
|
|
|
|
const Layout = () => (
|
|
<Flex flexDirection="column" style={styles.flex}>
|
|
<Header />
|
|
<Content />
|
|
</Flex>
|
|
);
|
|
|
|
const styles = {
|
|
root: {
|
|
height: '100%'
|
|
},
|
|
flex: { width: '100%' },
|
|
header: {
|
|
position: 'sticky',
|
|
top: 0,
|
|
background: `linear-gradient(90deg,
|
|
${colors.blueTemp[0]} 0%,
|
|
${colors.blueTemp[300]} 50%,
|
|
${colors.blueTemp[600]} 100%)`,
|
|
height: '65px',
|
|
padding: '10px 12px',
|
|
paddingLeft: '20px',
|
|
// borderRadius: "0 0 10px 10px",
|
|
zIndex: 999999
|
|
}
|
|
};
|
|
|
|
export default Layout;
|