Skip to content

Commit 554f3b3

Browse files
skipjackskipjack
committed
refactor: fix formatting, tweak styling, and patch a few other issues with the new dropdown
For some reason editorconfig wasn't honored and tabs snuck in. Also tweaked the logic in the language dropdown and moved it to the right side of the navigation bar. Made some other minor styling and logic tweaks for easier maintenance.
1 parent cd51f54 commit 554f3b3

File tree

4 files changed

+110
-109
lines changed

4 files changed

+110
-109
lines changed

‎components/dropdown/dropdown-style.scss

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,66 @@
1+
@import 'functions';
12

23
.dropdown {
3-
position: relative;
4-
color: #fff;
5-
cursor: pointer;
6-
4+
position: relative;
5+
color: #fff;
6+
cursor: pointer;
77
}
88

9-
.dropdown-language {
10-
width: 20px;
11-
height: 20px;
12-
vertical-align: middle;
9+
.dropdown__language {
10+
width: 20px;
11+
height: 20px;
12+
vertical-align: middle;
1313
}
1414

15-
.dropdown-arrow {
16-
vertical-align: middle;
15+
.dropdown__arrow {
16+
margin-left: 5px;
1717

18-
&:before {
19-
display: inline-block;
20-
margin-left: 5px;
21-
content: "\25be";
22-
}
18+
&:before {
19+
content: "\25be";
20+
}
2321
}
2422

25-
.dropdown-list {
26-
display: none;
27-
position: absolute;
28-
width: 100%;
29-
top: 45px;
30-
left: -12px;
31-
right: 0;
32-
margin: auto;
33-
background-color: #2B3A42;
34-
z-index: 1;
35-
text-align: center;
36-
37-
ul li {
38-
list-style: none;
39-
color: #fff;
40-
41-
a:link, a:visited, a:hover {
42-
color: #fff;
43-
}
44-
45-
img {
46-
width: 20px;
47-
height: 20px;
48-
// margin: 2px 0;
49-
}
50-
}
23+
.dropdown__list {
24+
display: none;
25+
position: absolute;
26+
top: 100%;
27+
right: 100%;
28+
right: 0;
29+
margin: auto;
30+
background-color: #2B3A42;
31+
z-index: 1;
32+
text-align: center;
33+
34+
ul {
35+
padding-top: 0.25em;
36+
}
37+
38+
ul li {
39+
padding: 0.25em 0.5em 0 0.5em;
40+
list-style: none;
41+
color: #fff;
42+
transition: all 250ms;
43+
44+
a:link, a:visited, a:hover {
45+
color: #fff;
46+
}
47+
48+
&:hover {
49+
background: getColor(denim);
50+
}
51+
52+
span {
53+
vertical-align: top;
54+
margin-right: 0.5em;
55+
}
56+
57+
img {
58+
width: 20px;
59+
height: 20px;
60+
}
61+
}
5162
}
5263

53-
.dropdown-list-show {
54-
display: inline-block;
55-
}
64+
.dropdown__list--active {
65+
display: block;
66+
}

‎components/dropdown/dropdown.jsx

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,34 @@
11
import React from 'react';
22

33
export default class Dropdown extends React.Component {
4-
5-
constructor(props, context) {
6-
super(props, context);
7-
this.state = {
8-
isLanguageShow: false,
9-
defaultLanguage: 'english',
10-
};
11-
}
4+
state = {
5+
active: false
6+
};
127

138
render() {
14-
15-
let {
16-
section,
17-
activeMod
18-
} = this.props;
19-
20-
let activeList = (this.state.isLanguageShow) ? "dropdown-list-show" : "";
9+
let { className = '', items = [] } = this.props;
10+
let activeMod = this.state.active ? "dropdown__list--active" : "";
2111

2212
return (
2313
<div
24-
className={ `navigation__link ${activeMod} dropdown` }
25-
onMouseOver={() => {
26-
this.setState({
27-
isLanguageShow: true
28-
});
29-
}}
30-
onMouseLeave={() => {
31-
this.setState({
32-
isLanguageShow: false
33-
});
34-
}}
35-
>
36-
<img className="dropdown-language" src={require("../../assets/language/" + this.state.defaultLanguage + ".png")}/>
37-
<i className="dropdown-arrow"></i>
38-
<div className={`dropdown-list ${activeList}`}>
14+
className={ `dropdown ${className}` }
15+
onMouseOver={ this._toggle.bind(this, true) }
16+
onMouseLeave={ this._toggle.bind(this, false) }>
17+
<img
18+
className="dropdown__language"
19+
src={ items[0].image } />
20+
21+
<i className="dropdown__arrow" />
22+
23+
<div className={ `dropdown__list ${activeMod}` }>
3924
<ul>
4025
{
41-
section.children.map((language) => {
26+
items.map(item => {
4227
return (
43-
<li key={language.title}>
44-
<a href={language.url}>
45-
<img src={require("../../assets/language/" + language.title + ".png")}/>
28+
<li key={ item.title }>
29+
<a href={ item.url }>
30+
<span>{ item.title }</span>
31+
<img src={ item.image } />
4632
</a>
4733
</li>
4834
);
@@ -54,4 +40,14 @@ export default class Dropdown extends React.Component {
5440
);
5541
}
5642

57-
}
43+
/**
44+
* Toggle visibility of dropdown items
45+
*
46+
* @param {bool} state - Whether to display or hide the items
47+
*/
48+
_toggle(state = false) {
49+
this.setState({
50+
active: state
51+
});
52+
}
53+
}

‎components/navigation/navigation-style.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,11 @@
152152
color: getColor(malibu);
153153
}
154154
}
155+
156+
.navigation__languages {
157+
margin-left: 1em;
158+
margin-top: -4px;
159+
}
155160
}
156161

157162
@include break {

‎components/navigation/navigation.jsx

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Link from '../link/link';
33
import Container from '../container/container';
44
import Logo from '../logo/logo';
55
import Dropdown from '../dropdown/dropdown';
6+
import USFlag from '../../assets/language/english.png';
7+
import ChineseFlag from '../../assets/language/chinese.png';
68

79
// TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
810
let Sections = [
@@ -35,15 +37,8 @@ let Sections = [
3537
url: '//medium.com/webpack'
3638
},
3739
{
38-
title: 'Support',
39-
url: 'support'
40-
},
41-
{
42-
title: 'Language',
43-
children: [
44-
{ title: 'english', url: 'https://webpack.js.org/' },
45-
{ title: 'chinese', url: 'https://doc.webpack-china.org/' }
46-
]
40+
title: 'Support',
41+
url: 'support'
4742
}
4843
];
4944

@@ -69,27 +64,14 @@ export default class Navigation extends React.Component {
6964
let active = this._isActive(section);
7065
let activeMod = active ? 'navigation__link--active' : '';
7166

72-
if (section.title === 'Language') {
73-
return (
74-
<Dropdown
75-
key={ `navigation__link-${section.title}` }
76-
section={section}
77-
activeMod={activeMod}
78-
className={ `navigation__link ${activeMod}` }
79-
>
80-
</Dropdown>
81-
);
82-
}
83-
else {
84-
return (
85-
<Link
86-
key={ `navigation__link-${section.title}` }
87-
className={ `navigation__link ${activeMod}` }
88-
to={ `/${section.url}` }>
89-
{ section.title }
90-
</Link>
91-
);
92-
}
67+
return (
68+
<Link
69+
key={ `navigation__link-${section.title}` }
70+
className={ `navigation__link ${activeMod}` }
71+
to={ `/${section.url}` }>
72+
{ section.title }
73+
</Link>
74+
);
9375
})
9476
}
9577
</nav>
@@ -121,6 +103,13 @@ export default class Navigation extends React.Component {
121103
to="//stackoverflow.com/questions/tagged/webpack">
122104
<i className="sidecar__icon icon-stack-overflow" />
123105
</Link>
106+
107+
<Dropdown
108+
className="navigation__languages"
109+
items={[
110+
{ title: 'English', url: 'https://webpack.js.org/', image: USFlag },
111+
{ title: 'Chinese', url: 'https://doc.webpack-china.org/', image: ChineseFlag }
112+
]} />
124113
</Container>
125114

126115
{

0 commit comments

Comments
 (0)