minor style changes

src/components/GlobalNav/index.js

@@ -5,7 +5,6 @@ import Link from 'react-router/lib/Link';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import Nav from 'react-bootstrap/lib/Nav';
 
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import LocaleSwitcher from 'components/LocaleSwitcher';
 
 import debug from 'helpers/debug';
@@ -59,27 +58,6 @@ class GlobalNav extends Component {
 
     return rightControls || [
       <LocaleSwitcher />,
-      <li>
-        <a
-          href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help"
-          target="_blank"
-          rel="noopener noreferrer"
-          data-metrics-event-name="IndexHeader:Link:Developer"
-        >
-          <LocaleFormattedMessage
-            id="nav.developers"
-            defaultMessage="Developers"
-          />
-        </a>
-      </li>,
-      <li>
-        <a href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
-          <LocaleFormattedMessage
-            id="nav.contactUs"
-            defaultMessage="Contact Us"
-          />
-        </a>
-      </li>,
       user ?
         <li>
           <Link to="/profile" data-metrics-event-name="IndexHeader:Link:Profile">
@@ -111,6 +89,7 @@ class GlobalNav extends Component {
           <li>
             <Link to="/"><i className="ss-icon ss-home" /></Link>
           </li>
+          <LocaleSwitcher className="visible-xs-inline-block" />
           {
             leftControls &&
             leftControls.map(((control, index) => React.cloneElement(control, { key: index })))

src/components/GlobalSidebar/index.js

@@ -53,7 +53,10 @@ class GlobalSidebar extends Component {
       >
         <Navbar static fluid>
           <NavbarHeader>
-            <p className="navbar-text">
+            <p // eslint-disable-line
+              className="navbar-text"
+              onClick={() => handleOpen(false)}
+            >
               <LocaleFormattedMessage id="setting.title" defaultMessage="Quran" />
             </p>
           </NavbarHeader>
@@ -93,6 +96,20 @@ class GlobalSidebar extends Component {
               />
             </Link>
           </li>
+          <li>
+            <a
+              href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help"
+              target="_blank"
+              rel="noopener noreferrer"
+              data-metrics-event-name="IndexHeader:Link:Developer"
+            >
+              <i className="ss-icon ss-laptop vertical-align-middle" />{' '}
+              <LocaleFormattedMessage
+                id="nav.developers"
+                defaultMessage="Developers"
+              />
+            </a>
+          </li>
           <li>
             <a href="http://legacy.quran.com" data-metrics-event-name="Sidebar:Link:Legacy">
               <i className="ss-icon ss-alert vertical-align-middle" />{' '}

src/components/LocaleSwitcher/index.js

@@ -1,11 +1,15 @@
 /* global window */
-import React, { Component } from 'react';
+import React, { PropTypes, Component } from 'react';
 import cookie from 'react-cookie';
 import NavDropdown from 'react-bootstrap/lib/NavDropdown';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import { locales, defaultLocale } from '../../config';
 
 export default class LocaleSwitcher extends Component {
+  static propTypes = {
+    className: PropTypes.string
+  };
+
   state = {
     currentLocale: defaultLocale,
   };
@@ -48,10 +52,13 @@ export default class LocaleSwitcher extends Component {
   }
 
   render() {
+    const { className } = this.props;
+
     return (
       <NavDropdown
         active={false}
         id="site-language-dropdown"
+        className={className}
         title={locales[this.state.currentLocale]}
       >
         {this.renderList()}

src/styles/main.scss

@@ -35,21 +35,6 @@ a:hover{
   text-decoration: none;
 }
 
-.surah-body{
-  .left-side{
-    width: 16.6666666%;
-    height: 100vh;
-    float: left;
-    display: block;
-    position: fixed;
-    top: 0px;
-
-    @media (max-width: $screen-sm-max) {
-      display: none;
-    }
-  }
-}
-
 .form-control:focus{
   box-shadow: none;
   -webkit-box-shadow: none;
@@ -188,6 +173,10 @@ li em{
 
 // NOTE: This is for dropdown in navbar on mobile
 @media(max-width: $screen-sm){
+  .navbar-nav{
+    margin-bottom: 0px;
+    margin-top: 5px;
+  }
   .navbar-nav .open .dropdown-menu{
     position: absolute;;
     float: left;