change toggle icon position on mobile

Author: vincentlauvlwj

themes/doc/lib/browser/navigation/components.jsx

@@ -1,14 +1,14 @@
 const React = require('react');
 
-function Navbar (props) {
+function Navbar(props) {
   return (
     <nav className="doc-navbar">
       {props.children}
     </nav>
   );
 }
 
-function Logo ({page, url_for}) {
+function Logo({page, url_for}) {
   var homePath = page.lang === 'zh-cn' ? 'zh-cn/' : '/';
 
   return (
@@ -246,16 +246,13 @@ function SidebarTocItem ({item, visibleHeaderId}) {
 
 function SidebarToggle ({className, onClick}) {
   return (
-    <i className={'dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle ' + (className || '')}
-      onClick={onClick}>
-    </i> );
+    <i className={'dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle ' + (className || '')} onClick={onClick}/>
+  );
 }
 
 function SidebarClose ({className, onClick}) {
   return (
-    <i className={'dc-icon dc-icon--close dc-icon--interactive doc-sidebar-close ' + (className || '')}
-      onClick={onClick}>
-    </i>
+    <i className={'dc-icon dc-icon--close dc-icon--interactive doc-sidebar-close ' + (className || '')} onClick={onClick}/>
   );
 }
 

themes/doc/lib/browser/navigation/containers.jsx

@@ -214,20 +214,11 @@ class Navigation extends React.Component {
   render () {
     return (
       <div className="doc-navigation">
-        <Navbar
-          config={this.props.config}
-          data={this.props.data}
-          url_for={this.url_for}>
+        <Navbar>
+          <SidebarToggle className="doc-navbar__sidebar-toggle" onClick={this.toggleSidebar.bind(this)} />
           <Logo page={this.props.page} url_for={this.url_for} />
-          <SidebarClose
-            className="doc-navbar__sidebar-close doc-navbar__sidebar-close--desktop"
-            onClick={this.collapseSidebar.bind(this)} />
-          <SidebarToggle
-            className="doc-navbar__sidebar-toggle"
-            onClick={this.toggleSidebar.bind(this)} />
-          <LangSwitcher 
-            page={this.props.page}
-            url_for={this.url_for} />
+          <SidebarClose className="doc-navbar__sidebar-close" onClick={this.collapseSidebar.bind(this)} />
+          <LangSwitcher page={this.props.page} url_for={this.url_for} />
         </Navbar>
 
         <Sidebar

themes/doc/source/style/_doc/navigation.scss

@@ -71,6 +71,7 @@
   }
 
   &__sidebar-close {
+    float: right;
     display: table;
     height: 100%;
     font-size: 12px;
@@ -80,10 +81,6 @@
       display: table-cell;
       vertical-align: middle;
     }
-  }
-
-  &__sidebar-close--desktop {
-    float: right;
 
     @media screen and (max-width: $doc-breakpoint) {
       display: none