a ton of changes and i want to sleep now

src/components/ContentDropdown/index.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
+import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
@@ -453,10 +454,6 @@ export default class ContentDropdown extends Component {
     className: PropTypes.string
   };
 
-  static defaultProps = {
-    className: 'col-md-3'
-  }
-
   handleRemoveContent = () => {
     const { onOptionChange } = this.props;
 
@@ -511,28 +508,33 @@ export default class ContentDropdown extends Component {
 
   render() {
     const { className, content } = this.props;
+    const title = slugs.filter(slug => content.includes(slug.id)).map(slug => slug.name).join(', ');
 
     return (
-      <DropdownButton
-        className={`dropdown ${className} ${style.dropdown}`}
-        title={<LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />}
-      >
-        {
-          content.length &&
-            <MenuItem onClick={this.handleRemoveContent}>
-              <LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
-            </MenuItem>
-        }
-        <MenuItem header>
-          <LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
-        </MenuItem>
-        {this.renderEnglishList()}
-        <MenuItem divider />
-        <MenuItem header>
-          <LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
-        </MenuItem>
-        {this.renderLanguagesList()}
-      </DropdownButton>
+      <ButtonToolbar>
+        <DropdownButton
+          block
+          id="content-dropdown"
+          className={`dropdown ${className} ${style.dropdown}`}
+          title={title}
+        >
+          {
+            content.length &&
+              <MenuItem onClick={this.handleRemoveContent}>
+                <LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
+              </MenuItem>
+          }
+          <MenuItem header>
+            <LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
+          </MenuItem>
+          {this.renderEnglishList()}
+          <MenuItem divider />
+          <MenuItem header>
+            <LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
+          </MenuItem>
+          {this.renderLanguagesList()}
+        </DropdownButton>
+      </ButtonToolbar>
     );
   }
 }

src/components/FontSizeDropdown/index.js

@@ -95,16 +95,17 @@ export default class FontSizeDropdown extends Component {
 
   render() {
     return (
-      <div className={style.link}>
-        <OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose container={this} positionLeft={0}>
+      <li className={style.link}>
+        <OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose>
           <a
             tabIndex="-1"
             data-metrics-event-name="FontSizeDropdown"
           >
-            <LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font size" />
+            <i className="ss-icon ss-font vertical-align-middle" />
+            {' '}<LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font Size" className="visible-xs-inline-block" />
           </a>
         </OverlayTrigger>
-      </div>
+      </li>
     );
   }
 }

src/components/Footer/index.js

@@ -144,7 +144,6 @@ const Footer = () => (
             </p>
 
             <div className={styles.list}>
-              <LocaleSwitcher />
               <p className="monserrat">
                 <LocaleFormattedMessage
                   id="nav.aboutQuranProject"

src/components/GlobalNav/Surah/index.js

@@ -1,22 +1,51 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
 
 import { surahType, optionsType } from 'types';
 import * as OptionsActions from 'redux/actions/options.js';
 
 import SurahsDropdown from 'components/SurahsDropdown';
 import ReadingModeToggle from 'components/ReadingModeToggle';
 import NightModeToggle from 'components/NightModeToggle';
+import FontSizeDropdown from 'components/FontSizeDropdown';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 // TODO: import VersesDropdown from 'components/VersesDropdown';
 import InformationToggle from 'components/InformationToggle';
 import GlobalNav from '../index';
 
-const GlobalNavSurah = ({ surah, surahs, setOption, options }) => (
+const styles = require('../style.scss');
+
+const GlobalNavSurah = ({ surah, surahs, setOption, options, ...props }) => (
   <GlobalNav
+    {...props}
     leftControls={[
       <SurahsDropdown title={surah.name.simple} surahs={surahs} />,
+      <NavDropdown
+        id="hidden-dropdown"
+        className={`visible-xs-inline-block ${styles.optionsDropdown}`}
+        title={<LocaleFormattedMessage id="settings.options" defaultMessage="Options" />}
+      >
+        <FontSizeDropdown
+          fontSize={options.fontSize}
+          onOptionChange={setOption}
+        />
+        <InformationToggle
+          onToggle={setOption}
+          isToggled={options.isShowingSurahInfo}
+        />
+        <ReadingModeToggle
+          isToggled={options.isReadingMode}
+          onToggle={setOption}
+        />
+        <NightModeToggle />
+      </NavDropdown>
     ]}
     rightControls={[
+      <FontSizeDropdown
+        fontSize={options.fontSize}
+        onOptionChange={setOption}
+      />,
       <InformationToggle
         onToggle={setOption}
         isToggled={options.isShowingSurahInfo}
@@ -40,26 +69,10 @@ GlobalNavSurah.propTypes = {
 function mapStateToProps(state, ownProps) {
   const surahId = parseInt(ownProps.params.surahId, 10);
   const surah: Object = state.surahs.entities[surahId];
-  const ayahs: Object = state.ayahs.entities[surahId];
-  const ayahArray = ayahs ? Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)) : [];
-  const ayahIds = new Set(ayahArray);
-  const lastAyahInArray = ayahArray.slice(-1)[0];
 
   return {
     surah,
-    ayahs,
-    ayahIds,
-    isStarted: state.audioplayer.isStarted,
-    isPlaying: state.audioplayer.isPlaying,
-    currentAyah: state.audioplayer.currentAyah,
-    isAuthenticated: state.auth.loaded,
-    currentWord: state.ayahs.currentWord,
-    isEndOfSurah: lastAyahInArray === surah.ayat,
     surahs: state.surahs.entities,
-    bookmarks: state.bookmarks.entities,
-    isLoading: state.ayahs.loading,
-    isLoaded: state.ayahs.loaded,
-    lines: state.lines.lines,
     options: state.options
   };
 }

src/components/GlobalNav/index.js

@@ -1,13 +1,15 @@
 /* global window */
 import React, { PropTypes, Component } from 'react';
+import { connect } from 'react-redux';
+import Link from 'react-router/lib/Link';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import Nav from 'react-bootstrap/lib/Nav';
 
-import SearchInput from 'components/SearchInput';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import LocaleSwitcher from 'components/LocaleSwitcher';
 
 import debug from 'helpers/debug';
-
-const Form = Navbar.Form;
+import { userType } from 'types';
 
 const styles = require('./style.scss');
 
@@ -16,6 +18,13 @@ class GlobalNav extends Component {
     // handleToggleSidebar: PropTypes.func.isRequired,
     leftControls: PropTypes.arrayOf(PropTypes.element),
     rightControls: PropTypes.arrayOf(PropTypes.element),
+    handleSidebarToggle: PropTypes.func.isRequired,
+    isStatic: PropTypes.bool.isRequired,
+    user: userType
+  };
+
+  static defaultProps = {
+    isStatic: false
   };
 
   state = {
@@ -31,10 +40,11 @@ class GlobalNav extends Component {
   }
 
   handleNavbar = () => {
+    const { isStatic } = this.props;
     const { scrolled } = this.state;
 
     if (window.pageYOffset > 50) {
-      if (!scrolled) {
+      if (!scrolled && !isStatic) {
         this.setState({ scrolled: true });
       }
     } else if (scrolled) {
@@ -44,38 +54,81 @@ class GlobalNav extends Component {
     return false;
   }
 
+  renderRightControls() {
+    const { user, rightControls } = this.props;
+
+    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">
+            {user.firstName || user.name}
+          </Link>
+        </li> :
+        <noscript />
+    ];
+  }
+
   render() {
-    const { leftControls, rightControls } = this.props;
+    const { leftControls, handleSidebarToggle, isStatic } = this.props;
     debug('component:GlobalNav', 'Render');
 
     return (
       <Navbar
         className={`montserrat ${this.state.scrolled && styles.scrolled}`}
-        fixedTop
+        fixedTop={!isStatic}
         fluid
+        static={isStatic}
       >
-        <button type="button" className="navbar-toggle collapsed">
+        <button type="button" className="navbar-toggle collapsed" onClick={handleSidebarToggle}>
           <span className="sr-only">Toggle navigation</span>
           <span className="icon-bar" />
           <span className="icon-bar" />
           <span className="icon-bar" />
         </button>
-        <Nav>
-          {leftControls && leftControls.map(control => control)}
-          <Form pullLeft>
-            <SearchInput
-              className="search-input"
-            />
-          </Form>
+        <Nav className={styles.nav}>
+          <li>
+            <Link to="/"><i className="ss-icon ss-home" /></Link>
+          </li>
+          {
+            leftControls &&
+            leftControls.map(((control, index) => React.cloneElement(control, { key: index })))
+          }
+        </Nav>
+        <Nav pullRight className="hidden-xs">
+          {
+            this.renderRightControls()
+            .map(((control, index) => React.cloneElement(control, { key: index })))
+          }
         </Nav>
-        {rightControls &&
-          <Nav pullRight>
-            {rightControls.map(control => control)}
-          </Nav>
-        }
       </Navbar>
     );
   }
 }
 
-export default GlobalNav;
+export default connect(
+  state => ({
+    user: state.auth.user
+  })
+)(GlobalNav);

src/components/GlobalNav/style.scss

@@ -1,3 +1,20 @@
+@import '../../styles/variables.scss';
+
 .scrolled{
   box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
 }
+
+.nav{
+  @media(max-width: $screen-sm){
+    // display: inline-block;
+    :global(& > li){
+      display: inline-block;
+    }
+  }
+}
+
+.optionsDropdown{
+  :global(.ss-icon){
+    margin-right: 5px;
+  }
+}

src/components/GlobalSidebar/Surah/index.js

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import { surahType } from 'types';
+import GlobalSidebar from '../index.js';
+
+const GlobalSidebarSurah = ({ ...props, surah, ayahIds }) => (
+  <GlobalSidebar {...props} settingsModalProps={{ surah, ayahIds }} />
+);
+
+GlobalSidebarSurah.propTypes = {
+  surah: surahType,
+  ayahIds: PropTypes.instanceOf(Set)
+};
+
+function mapStateToProps(state, ownProps) {
+  const surahId = parseInt(ownProps.params.surahId, 10);
+  const surah: Object = state.surahs.entities[surahId];
+  const ayahs: Object = state.ayahs.entities[surahId];
+  const ayahArray = ayahs ? Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)) : [];
+  const ayahIds = new Set(ayahArray);
+
+  return {
+    surah,
+    ayahIds
+  };
+}
+
+export default connect(mapStateToProps)(GlobalSidebarSurah);