Skip to content

Commit 1489b60

Browse files
johnojohno
committed
Spike out a nav layout
1 parent af565af commit 1489b60

File tree

8 files changed

+251
-21
lines changed

8 files changed

+251
-21
lines changed

‎src/components/layout.js‎

Lines changed: 191 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,199 @@
11
/** @jsx jsx */
22
import { jsx, Styled } from 'theme-ui'
3-
import { Container } from '@theme-ui/components'
3+
import { Global } from '@emotion/core'
4+
import { Container, Box } from '@theme-ui/components'
45
import { Link } from 'gatsby'
6+
import { Twitter, GitHub } from 'react-feather'
57

6-
export default ({ children }) => (
8+
import Nav from '../nav.mdx'
9+
10+
export default ({ children, title }) => (
711
<Styled.root>
8-
<title>Blocks UI</title>
9-
<Container as="main" mb={[3, 4, 5]}>
10-
<Link to="/">
11-
<img
12-
src="https://user-images.githubusercontent.com/1424573/61592179-e0fda080-ab8c-11e9-9109-166cc7c86b43.png"
13-
alt="blocks logo"
14-
width="80"
15-
style={{
16-
marginTop: 128,
17-
marginLeft: -5,
18-
marginBottom: 8
12+
<title>{title ? title + ' / ' : null} Blocks UI</title>
13+
<Global
14+
styles={{
15+
'*': {
16+
boxSizing: 'border-box'
17+
},
18+
body: {
19+
margin: 0
20+
}
21+
}}
22+
/>
23+
<Box
24+
sx={{
25+
display: 'grid',
26+
minHeight: '100vh',
27+
gridTemplateAreas: [
28+
'"header" "nav" "main" "toc" "footer"',
29+
'"header header header" "nav main toc" "footer footer footer"'
30+
],
31+
gridTemplateColumns: ['1fr', '240px 1fr 240px'],
32+
gridTemplateRows: [
33+
'min-content min-content 1fr min-content min-content',
34+
'min-content 1fr min-content'
35+
]
36+
}}
37+
>
38+
<Box
39+
sx={{
40+
gridArea: 'header',
41+
borderBottom: 'thin solid #e1e6eb',
42+
py: 2,
43+
px: 3,
44+
display: 'flex',
45+
aligntItems: 'center',
46+
justifyContent: 'space-between'
47+
}}
48+
>
49+
<Link
50+
to="/"
51+
sx={{
52+
textDecoration: 'none',
53+
color: 'inherit',
54+
display: 'flex',
55+
alignItems: 'center'
56+
}}
57+
>
58+
<img
59+
src="https://user-images.githubusercontent.com/1424573/61592179-e0fda080-ab8c-11e9-9109-166cc7c86b43.png"
60+
alt="blocks logo"
61+
width="32"
62+
sx={{
63+
verticalAlign: 'middle',
64+
ml: '-4px',
65+
mr: 2
66+
}}
67+
/>
68+
Blocks
69+
</Link>
70+
<div
71+
sx={{
72+
display: 'flex',
73+
alignItems: 'center',
74+
verticalAlign: 'middle'
75+
}}
76+
>
77+
<a
78+
href="https://github.com/blocks/blocks"
79+
sx={{
80+
mt: '5px',
81+
color: 'inherit'
82+
}}
83+
>
84+
<GitHub size={18} />
85+
</a>
86+
<a
87+
href="https://github.com/blocks/blocks"
88+
sx={{
89+
mt: '5px',
90+
color: 'inherit',
91+
ml: 3
92+
}}
93+
>
94+
<Twitter size={18} />
95+
</a>
96+
</div>
97+
</Box>
98+
<Box
99+
sx={{
100+
gridArea: 'main'
101+
}}
102+
>
103+
<Container sx={{ px: 3, py: [3, 4, 4] }}>{children}</Container>
104+
</Box>
105+
<Box
106+
sx={{
107+
gridArea: 'nav',
108+
px: 3,
109+
py: [3, 4, 4],
110+
mt: '10px',
111+
ul: {
112+
listStyle: 'none',
113+
p: 0
114+
},
115+
li: {
116+
mb: 1,
117+
fontSize: 1,
118+
ul: {
119+
li: {
120+
mb: 0
121+
},
122+
pl: 2,
123+
a: {
124+
fontWeight: 400,
125+
color: '#2f353b'
126+
}
127+
},
128+
a: {
129+
color: 'black',
130+
fontWeight: 500,
131+
textDecoration: 'none',
132+
'&:hover': {
133+
color: 'black'
134+
}
135+
}
136+
}
137+
}}
138+
>
139+
<Nav />
140+
</Box>
141+
<Box
142+
sx={{
143+
gridArea: 'toc'
144+
}}
145+
></Box>
146+
<Box
147+
as="footer"
148+
sx={{
149+
gridArea: 'footer',
150+
py: [3, 5, 6],
151+
mt: [3, 4, 5],
152+
backgroundColor: 'text',
153+
color: 'background'
154+
}}
155+
>
156+
<Container
157+
sx={{
158+
px: 3,
159+
display: 'flex',
160+
alignItems: 'center',
161+
verticalAlign: 'middle'
19162
}}
20-
/>
21-
</Link>
22-
{children}
23-
</Container>
163+
>
164+
<Link to="/">
165+
<img
166+
src="https://user-images.githubusercontent.com/1424573/61592179-e0fda080-ab8c-11e9-9109-166cc7c86b43.png"
167+
alt="blocks logo"
168+
width="32"
169+
sx={{
170+
verticalAlign: 'middle',
171+
mr: 4
172+
}}
173+
/>
174+
</Link>
175+
<a
176+
href="https://github.com/blocks/blocks"
177+
sx={{
178+
mt: '5px',
179+
ml: 'auto',
180+
color: 'inherit'
181+
}}
182+
>
183+
<GitHub size={18} />
184+
</a>
185+
<a
186+
href="https://github.com/blocks/blocks"
187+
sx={{
188+
mt: '5px',
189+
color: 'inherit',
190+
ml: 3
191+
}}
192+
>
193+
<Twitter size={18} />
194+
</a>
195+
</Container>
196+
</Box>
197+
</Box>
24198
</Styled.root>
25199
)

‎src/components/minimal-layout.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/** @jsx jsx */
2+
import { jsx, Styled } from 'theme-ui'
3+
import { Container } from '@theme-ui/components'
4+
import { Link } from 'gatsby'
5+
6+
export default ({ children, title }) => (
7+
<Styled.root>
8+
<title>{title ? title + ' / ' : null} Blocks UI</title>
9+
<Container as="main" mb={[3, 4, 5]}>
10+
<Link to="/">
11+
<img
12+
src="https://user-images.githubusercontent.com/1424573/61592179-e0fda080-ab8c-11e9-9109-166cc7c86b43.png"
13+
alt="blocks logo"
14+
width="80"
15+
style={{
16+
marginTop: 128,
17+
marginLeft: -5,
18+
marginBottom: 8
19+
}}
20+
/>
21+
</Link>
22+
{children}
23+
</Container>
24+
</Styled.root>
25+
)

‎src/nav.mdx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
- [Getting started](/getting-started)
2+
- [Blocks library](/blocks)
13
- [Controls](/docs/controls)
2-
- [Block Definitions](/docs/definitions/block)
3-
- [Blocks](/blocks)
4-
- Advanced
4+
- [Guides](/guides)
5+
- [Custom blocks](/guides/writing-a-custom-block)
6+
- [About](/about)
7+
- [Vision](/vision)
8+
- [Advanced](/advanced)
59
- [How it works](/docs/advanced/how-it-works)
10+
- [Transforms](/docs/advanced/transforms)
11+
- [Queries](/docs/advanced/queries)
12+
- [Blocks docs generation](/docs/advanced/blocks-docs-generation)

‎src/pages/docs/advanced/blocks-docs-generation.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Layout from '../../../components/layout'
2+
export default Layout
3+
4+
# Blocks docs generation

‎src/pages/docs/advanced/index.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Layout from '../../../components/layout'
2+
export default Layout
3+
4+
# Advanced
5+
6+
If you're a contributor and want to begin learning about
7+
the interals, you're in the right place.
8+
9+
- [How it works](/docs/advanced/how-it-works)
10+
- [Transforms](/docs/advanced/transforms)
11+
- [Queries](/docs/advanced/queries)
12+
- [Blocks docs generation](/docs/advanced/blocks-docs-generation)

‎src/pages/docs/advanced/queries.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Layout from '../../../components/layout'
2+
export default Layout
3+
4+
# Queries

‎src/pages/docs/advanced/transforms.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Layout from '../../../components/layout'
2+
export default Layout
3+
4+
# Transforms

‎src/pages/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Layout from '../components/layout'
1+
import Layout from '../components/minimal-layout'
22
export default Layout
33

44
# Blocks UI

0 commit comments

Comments
 (0)