This repository has been archived by the owner on Oct 22, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.js
85 lines (77 loc) · 2.29 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Box, Flex } from 'grid-styled'
import { th } from '@pubsweet/ui-toolkit'
import ErrorBoundary from '../../global/ErrorBoundary'
import media from '../../global/layout/media'
import NavLink from '../../ui/atoms/NavLink'
const TopNavContainer = styled.div`
margin-bottom: ${th('space.3')};
${media.tabletPortraitUp`display: none;`};
`
const SideNavContainer = styled(Box)`
display: none;
${media.tabletPortraitUp`display: block;`};
`
const MainContainer = styled(Box)``
const SideNavLink = styled(NavLink)`
display: block;
padding: ${th('space.1')} 0 ${th('space.1')} 0;
&:first-child {
padding-top: 0;
}
`
const StaticPage = ({ navList }) => (
<div>
<ErrorBoundary>
<TopNavContainer>{/* TODO: dropdown goes here */}</TopNavContainer>
<Flex>
<SideNavContainer
ml={[0, 0, '8.33%']} // 1 column's worth of spacing (in a 12 column grid)
pr={3}
pt={18} // To match the top padding on the H1 in the 'main' component
width={[0, 3 / 12, 3 / 12, 2 / 12]}
>
<Box is="nav">
{navList &&
navList.map(navItem => (
<SideNavLink
data-test-id="side-nav-link"
key={navItem.link}
to={navItem.link}
>
{navItem.label}
</SideNavLink>
))}
</Box>
</SideNavContainer>
<MainContainer width={[1, 1, 7 / 12, 7 / 12, 8 / 12]}>
<Switch>
{navList &&
navList.map(navItem => (
<Route
component={navItem.component}
exact
key={navItem.link}
path={navItem.link}
/>
))}
<Redirect to={navList[0].link} />
</Switch>
</MainContainer>
</Flex>
</ErrorBoundary>
</div>
)
StaticPage.propTypes = {
navList: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
component: PropTypes.func.isRequired,
}),
).isRequired,
}
export default StaticPage