Files: 7b71a25fdd6ca5a50f73babc4cd05edc82b9f086 / _components / index / NavBar.js
1513 bytesRaw
1 | // Packages |
2 | import React from 'react'; |
3 | import css from 'next/css'; |
4 | |
5 | // Components |
6 | import Anchor from '../common/Anchor'; |
7 | |
8 | export default () => ( |
9 | <nav className={navbarStyle}> |
10 | <ul className={listStyle}> |
11 | <li className={`${listItemStyle} ${noMarginLeft}`}> |
12 | <Anchor href="https://twitter.com/romuloalves" title="twitter"> |
13 | |
14 | </Anchor> |
15 | </li> |
16 | <li className={listItemStyle}> |
17 | <Anchor href="https://github.com/romuloalves" title="github"> |
18 | GitHub |
19 | </Anchor> |
20 | </li> |
21 | <li className={listItemStyle}> |
22 | <Anchor href="mailto:contact@romuloalv.es" title="e-mail"> |
23 | |
24 | </Anchor> |
25 | </li> |
26 | <li className={`${listItemStyle} ${noMarginRight}`}> |
27 | <Anchor href="https://medium.com/@romuloalves" title="medium"> |
28 | Medium |
29 | </Anchor> |
30 | </li> |
31 | </ul> |
32 | </nav> |
33 | ); |
34 | |
35 | const navbarStyle = css({ |
36 | margin: '0 auto', |
37 | padding: '30px 0', |
38 | width: '420px', |
39 | '@media (max-width: 500px)': { |
40 | width: '300px' |
41 | }, |
42 | '@media (max-width: 300px)': { |
43 | width: 'auto' |
44 | } |
45 | }); |
46 | |
47 | const listStyle = css({ |
48 | overflow: 'auto' |
49 | }); |
50 | |
51 | const listItemStyle = css({ |
52 | float: 'left', |
53 | listStyleType: 'none', |
54 | margin: '0 30px', |
55 | textAlign: 'center', |
56 | width: '60px', |
57 | '@media (max-width: 500px)': { |
58 | margin: '0 10px' |
59 | }, |
60 | '@media (max-width: 300px)': { |
61 | margin: '15px 0', |
62 | width: '100%' |
63 | } |
64 | }); |
65 | |
66 | const noMarginRight = css({ |
67 | marginRight: '0' |
68 | }); |
69 | |
70 | const noMarginLeft = css({ |
71 | marginLeft: '0' |
72 | }); |
73 |
Built with git-ssb-web