98 lines
2.0 KiB
JavaScript
98 lines
2.0 KiB
JavaScript
import paths from 'client/common/paths';
|
|
import Spinner from 'client/Components/Spinner';
|
|
import colors from 'client/UIKit/colors';
|
|
import { Box, Flex } from 'client/UIKit/grid';
|
|
import mq from 'client/UIKit/mq';
|
|
import React, { Suspense } from 'react';
|
|
import { Route, Switch } from 'react-router-dom';
|
|
import styled from 'styled-components';
|
|
import Logo from './Logo';
|
|
|
|
const HeaderContent = styled(Flex)`
|
|
background: ${`linear-gradient(90deg,
|
|
${colors.primaryColor} 0%,
|
|
${colors.secondaryColor} 50%,
|
|
${colors.tertiaryColor} 100%)`};
|
|
|
|
height: 45px;
|
|
${mq.tablet`
|
|
height: 55px;
|
|
`}
|
|
${mq.desktop`
|
|
height: 65px;
|
|
`}
|
|
padding: 10px 12px;
|
|
${mq.desktop`
|
|
paddingleft: 20px;
|
|
`}
|
|
`;
|
|
|
|
const LogoText = styled.h3`
|
|
margin: 0;
|
|
margin-bottom: 3%;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
font-size: 1rem;
|
|
${mq.desktop`
|
|
font-size: 1.2rem;
|
|
`}
|
|
font-weight: 300;
|
|
letter-spacing: 2px;
|
|
`;
|
|
|
|
const Header = () => (
|
|
<header style={styles.header}>
|
|
<HeaderContent style={styles.headerContent} alignItems="center">
|
|
<Flex alignItems="center">
|
|
<Logo />
|
|
<LogoText>Лизинговый Калькулятор</LogoText>
|
|
</Flex>
|
|
{/* {paths.map(
|
|
(path, i) =>
|
|
path.route && (
|
|
<Link to={path.route}>
|
|
<MenuButton key={i}>{path.name}</MenuButton>
|
|
</Link>
|
|
)
|
|
)} */}
|
|
</HeaderContent>
|
|
</header>
|
|
);
|
|
|
|
const Content = () => (
|
|
<Box style={styles.root}>
|
|
<Suspense fallback={<Spinner />}>
|
|
<Switch>
|
|
{paths.map((path, i) => (
|
|
<Route
|
|
key={i}
|
|
path={path.route}
|
|
exact={path.exact}
|
|
component={path.content}
|
|
/>
|
|
))}
|
|
</Switch>
|
|
</Suspense>
|
|
</Box>
|
|
);
|
|
|
|
const Layout = () => (
|
|
<Flex flexDirection="column">
|
|
<Header />
|
|
<Content />
|
|
</Flex>
|
|
);
|
|
|
|
const styles = {
|
|
root: {
|
|
height: '100%',
|
|
},
|
|
header: {
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 999999,
|
|
},
|
|
};
|
|
|
|
export default Layout;
|