Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit f8cb13c

Browse files
elevenpassinelevenpassin
committed
Navbar is now responsive
1 parent 4722e6c commit f8cb13c

File tree

2 files changed

+174
-138
lines changed

2 files changed

+174
-138
lines changed

‎components/header.js‎

Lines changed: 174 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Headroom from 'react-headroom';
33
import NProgress from 'nprogress';
44
import Router from 'next/router';
55
import Link from 'next/link';
6+
import FaEllipsisV from 'react-icons/lib/fa/ellipsis-v';
67

78
import GlobalStyles from './global-styles';
89
import Head from './head';
@@ -19,146 +20,182 @@ Router.onRouteChangeError = () => {
1920
NProgress.done();
2021
};
2122

22-
export default props => {
23-
const title =
24-
props.url.pathname === '/'
25-
? 'Home'
26-
: props.url.pathname.split('/')[1].toUpperCase();
27-
const navItems = [
28-
{
29-
title: 'Home',
30-
path: '/',
31-
external: false,
32-
},
33-
{
34-
title: 'Learn',
35-
path: '/learn',
36-
external: false,
37-
},
38-
{
39-
title: 'Space',
40-
path: '/space',
41-
external: false,
42-
},
43-
{
44-
title: 'Events',
45-
path: '/events',
46-
external: false,
47-
},
48-
{
49-
title: 'Blog',
50-
path: 'https://medium.com/coderplex',
51-
external: true,
52-
},
53-
];
54-
return (
55-
<Headroom>
56-
<header>
57-
<Head title={`${title} | Coderplex`} />
58-
<GlobalStyles />
59-
<div className="header__container">
60-
<nav>
61-
<div className="nav__logo">
62-
<img src="/static/favicons/android-chrome-192x192.png" alt="" />
63-
</div>
64-
<ul className="nav__links">
65-
{navItems.map(item => {
66-
return (
67-
<li key={item.title} className="nav__linkItem">
68-
<Link href={item.path}>
69-
<a
70-
className={`nav__link ${props.url.pathname === item.path
71-
? 'nav__link--active'
72-
: ''}`}
73-
target={item.external ? '_blank' : '_self'}
74-
>
75-
{item.title}
76-
</a>
77-
</Link>
78-
</li>
79-
);
80-
})}
81-
</ul>
82-
</nav>
83-
</div>
84-
</header>
85-
<style jsx>{`
86-
header {
87-
padding: 5px 20px;
88-
width: 100%;
89-
background: #fff;
90-
z-index: 1000;
91-
}
92-
.header__container {
93-
max-width: 1280px;
94-
margin: 0 auto;
95-
}
96-
nav {
97-
display: flex;
98-
height: 70px;
99-
align-items: center;
100-
}
101-
.nav__logo {
102-
flex: 1;
103-
display: flex;
104-
align-items: center;
105-
}
106-
.nav__logo img {
107-
width: 50px;
108-
height: 50px;
109-
margin-right: 5px;
110-
}
111-
.nav__links {
112-
margin: 0;
113-
padding: 0;
114-
list-style: none;
115-
flex: 2;
116-
display: flex;
117-
align-items: center;
118-
}
119-
.nav__linkItem {
120-
flex: 1;
121-
text-align: center;
122-
display: flex;
123-
justify-content: center;
124-
}
125-
.nav__linkItem :global(.dropdown__linkItem) {
126-
display: flex;
127-
justify-content: center;
128-
align-items: center;
129-
}
130-
.nav__linkItem img {
131-
width: 30px;
132-
height: 30px;
133-
border-radius: 50%;
134-
margin-right: 5px;
135-
}
136-
.nav__link {
137-
text-decoration: none;
138-
color: #666;
139-
font-size: 14px;
140-
padding-bottom: 4px;
141-
}
142-
.nav__link:hover {
143-
color: #444;
144-
}
145-
.nav__link--active {
146-
color: #444;
147-
border-bottom: 2px solid #314159;
148-
pointer-events: none;
149-
}
150-
@media (max-width: 700px) {
23+
export default class Header extends React.Component {
24+
constructor(props) {
25+
super(props);
26+
this.state = {
27+
navToggled: false,
28+
};
29+
30+
this.title =
31+
props.url.pathname === '/'
32+
? 'Home'
33+
: props.url.pathname.split('/')[1].toUpperCase();
34+
35+
this.navItems = [
36+
{
37+
title: 'Home',
38+
path: '/',
39+
external: false,
40+
},
41+
{
42+
title: 'Learn',
43+
path: '/learn',
44+
external: false,
45+
},
46+
{
47+
title: 'Space',
48+
path: '/space',
49+
external: false,
50+
},
51+
{
52+
title: 'Events',
53+
path: '/events',
54+
external: false,
55+
},
56+
{
57+
title: 'Blog',
58+
path: 'https://medium.com/coderplex',
59+
external: true,
60+
},
61+
];
62+
}
63+
64+
render() {
65+
return (
66+
<Headroom>
67+
<header>
68+
<Head title={`${this.title} | Coderplex`} />
69+
<GlobalStyles />
70+
<div className="header__container">
71+
<nav>
72+
<div className="nav__logo">
73+
<img src="/static/favicons/android-chrome-192x192.png" alt="" />
74+
<p className="nav__toggle">
75+
<FaEllipsisV
76+
size={20}
77+
onClick={() =>
78+
this.setState({ navToggled: !this.state.navToggled })}
79+
/>
80+
</p>
81+
</div>
82+
<ul className="nav__links">
83+
{this.navItems.map(item => {
84+
return (
85+
<li key={item.title} className="nav__linkItem">
86+
<Link href={item.path}>
87+
<a
88+
className={`nav__link ${this.props.url.pathname ===
89+
item.path
90+
? 'nav__link--active'
91+
: ''}`}
92+
target={item.external ? '_blank' : '_self'}
93+
>
94+
{item.title}
95+
</a>
96+
</Link>
97+
</li>
98+
);
99+
})}
100+
</ul>
101+
</nav>
102+
</div>
103+
</header>
104+
<style jsx>{`
105+
header {
106+
padding: 5px 20px; /* buoyantair: avoid using padding as it is unstable and not predictable */
107+
width: 100%;
108+
background: #fff;
109+
z-index: 1000;
110+
}
111+
.header__container {
112+
max-width: 1280px;
113+
margin: 0 auto;
114+
}
151115
nav {
152-
justify-content: center;
116+
display: flex;
117+
min-height: 70px;
118+
align-items: center;
153119
}
154120
.nav__logo {
155-
flex: initial;
121+
flex: 1;
122+
display: flex;
123+
align-items: center;
156124
}
157-
.nav__links {
125+
.nav__logo img {
126+
width: 50px;
127+
height: 50px;
128+
margin-right: 5px;
129+
}
130+
.nav__toggle {
158131
display: none;
159132
}
160-
}
161-
`}</style>
162-
</Headroom>
163-
);
164-
};
133+
.nav__links {
134+
margin: 0;
135+
padding: 0;
136+
list-style: none;
137+
flex: 2;
138+
display: flex;
139+
align-items: center;
140+
}
141+
.nav__linkItem {
142+
flex: 1;
143+
text-align: center;
144+
display: flex;
145+
justify-content: center;
146+
}
147+
.nav__linkItem :global(.dropdown__linkItem) {
148+
display: flex;
149+
justify-content: center;
150+
align-items: center;
151+
}
152+
.nav__linkItem img {
153+
width: 30px;
154+
height: 30px;
155+
border-radius: 50%;
156+
margin-right: 5px;
157+
}
158+
.nav__link {
159+
text-decoration: none;
160+
color: #666;
161+
font-size: 14px;
162+
padding-bottom: 4px;
163+
}
164+
.nav__link:hover {
165+
color: #444;
166+
}
167+
.nav__link--active {
168+
color: #444;
169+
border-bottom: 2px solid #314159;
170+
pointer-events: none;
171+
}
172+
@media (max-width: 700px) {
173+
nav {
174+
${this.state.navToggled
175+
? `
176+
display: flex;
177+
flex-flow: column wrap;
178+
`
179+
: null};
180+
}
181+
.nav__logo {
182+
width: 100%;
183+
display: flex;
184+
flex-flow: row wrap;
185+
justify-content: space-between;
186+
}
187+
.nav__toggle {
188+
display: flex;
189+
z-index: 1000;
190+
}
191+
.nav__links {
192+
display: ${this.state.navToggled ? 'flex' : 'none'};
193+
flex-flow: column;
194+
justify-content: center;
195+
}
196+
}
197+
`}</style>
198+
</Headroom>
199+
);
200+
}
201+
}

‎package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)