feat(i18n): add multiple language selection (#1148)

Author: lcxfs1991

assets/language/.DS_Store

@@ -0,0 +1,55 @@
+
+.dropdown {
+	position: relative;
+	color: #fff;
+	cursor: pointer;
+
+}
+
+.dropdown-language {
+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
+}
+
+.dropdown-arrow {
+	vertical-align: middle;
+
+	&:before {
+		display: inline-block;
+		margin-left: 5px;
+		content: "\25be";
+	}
+}
+
+.dropdown-list {
+	display: none;
+	position: absolute;
+	width: 100%;
+	top: 45px;
+	left: -12px;
+	right: 0;
+	margin: auto;
+	background-color: #2B3A42;
+	z-index: 1;
+	text-align: center;
+
+	ul li {
+		list-style: none;
+		color: #fff;
+
+		a:link, a:visited, a:hover {
+			color: #fff;
+		}
+
+		img {
+			width: 20px;
+			height: 20px;
+			// margin: 2px 0;
+		}
+	}
+}
+
+.dropdown-list-show {
+	display: inline-block;
+}

assets/language/chinese.png

@@ -0,0 +1,57 @@
+import React from 'react';
+
+export default class Dropdown extends React.Component {
+
+	constructor(props, context) {
+    super(props, context);
+    this.state = {
+		isLanguageShow: false,
+		defaultLanguage: 'english',
+    };
+	}
+
+	render() {
+
+		let {
+			section,
+			activeMod
+		} = this.props;
+
+		let activeList = (this.state.isLanguageShow) ? "dropdown-list-show" : "";
+
+		return (
+			<div
+				className={ `navigation__link ${activeMod} dropdown` }
+				onMouseOver={() => {
+					this.setState({
+						isLanguageShow: true
+					});
+				}}
+				onMouseLeave={() => {
+					this.setState({
+						isLanguageShow: false
+					});
+				}}
+			>
+				<img className="dropdown-language" src={require("../../assets/language/" + this.state.defaultLanguage + ".png")}/>
+				<i className="dropdown-arrow"></i>
+				<div className={`dropdown-list ${activeList}`}>
+					<ul>
+						{
+							section.children.map((language) => {
+								return (
+									<li key={language.title}>
+										<a href={language.url}>
+											<img src={require("../../assets/language/" + language.title + ".png")}/>
+										</a>
+									</li>
+								);
+							})
+						}
+					</ul>
+				</div>
+			</div>
+		);
+	}
+
+}

assets/language/english.png

@@ -2,6 +2,7 @@ import React from 'react';
 import Link from '../link/link';
 import Container from '../container/container';
 import Logo from '../logo/logo';
+import Dropdown from '../dropdown/dropdown';
 
 // TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
 let Sections = [
@@ -36,6 +37,13 @@ let Sections = [
   {
       title: 'Support',
       url: 'support'
+  },
+  {
+      title: 'Language',
+      children: [
+        { title: 'english', url: 'https://webpack.js.org/' },
+        { title: 'chinese', url: 'https://doc.webpack-china.org/' }
+      ]
   }
 ];
 
@@ -61,14 +69,27 @@ export default class Navigation extends React.Component {
                 let active = this._isActive(section);
                 let activeMod = active ? 'navigation__link--active' : '';
 
-                return (
-                  <Link
-                    key={ `navigation__link-${section.title}` }
-                    className={ `navigation__link ${activeMod}` }
-                    to={ `/${section.url}` }>
-                    { section.title }
-                  </Link>
-                );
+                if (section.title === 'Language') {
+                  return (
+                    <Dropdown
+                      key={ `navigation__link-${section.title}` }
+                      section={section}
+                      activeMod={activeMod}
+                      className={ `navigation__link ${activeMod}` }
+                    >
+                    </Dropdown>
+                  );
+                }
+                else {
+                  return (
+                    <Link
+                      key={ `navigation__link-${section.title}` }
+                      className={ `navigation__link ${activeMod}` }
+                      to={ `/${section.url}` }>
+                      { section.title }
+                    </Link>
+                  );
+                }
               })
             }
           </nav>

components/dropdown/dropdown-style.scss

@@ -17,6 +17,7 @@ import '../navigation/search-style';
 import '../sidebar-mobile/sidebar-mobile-style';
 import '../sidebar-item/sidebar-item-style';
 import '../logo/logo-style';
+import '../dropdown/dropdown-style.scss';
 
 export default props => {
   // Retrieve section data
@@ -29,7 +30,7 @@ export default props => {
         url
       }))
     }));
-
+  
   // Rename the root section ("webpack" => "Other") and push it to the end
   let rootIndex = sections.findIndex(section => section.title === 'webpack');
   let rootSection = sections.splice(rootIndex, 1)[0];