From a0a8db504793d67fd9d464f892a9383044392b23 Mon Sep 17 00:00:00 2001
From: Reshad Noorzay <rnoorzay@gmail.com>
Date: Thu, 15 Oct 2015 01:39:26 -0700
Subject: [PATCH] Fixes quran/quran.com-frontend/issues/79

---
 .../components/header/ContentDropdown.js      | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/scripts/components/header/ContentDropdown.js b/src/scripts/components/header/ContentDropdown.js
index db8791f74..baecc80f1 100644
--- a/src/scripts/components/header/ContentDropdown.js
+++ b/src/scripts/components/header/ContentDropdown.js
@@ -85,16 +85,27 @@ class ContentDropdown extends React.Component {
 
   renderContent(type) {
     var condition;
-    return this.state.options.map((option) => {
-      if (type === 'en') {
-        condition = option.language === 'en' && (option.type === 'translation' || option.type === 'transliteration');
-      } else if (type === '!en') {
-        condition = option.language !== 'en' && option.type === 'translation';
-      }
-      if (condition) {
-        return this.returnList(option);
-      }
-    });
+    return this.state.options
+      // Sort all options to ensure translation languages are in alphabetical order
+      .sort((a, b) => {
+          return (a.slug < b.slug) ? -1 : (a.slug > b.slug) ? 1 : 0;
+      })
+      .map((option) => {
+        switch(type) {
+          case 'en':
+            condition = option.language === 'en' && option.type === 'translation';
+            break;
+          case '!en':
+            condition = option.language !== 'en' && option.type === 'translation';
+            break;
+          case 'transliteration':
+            condition = option.language === 'en' && option.type === 'transliteration';
+            break;
+        }
+        if (condition) {
+          return this.returnList(option);
+        }
+      });
   }
 
   render() {
@@ -103,6 +114,7 @@ class ContentDropdown extends React.Component {
       <HeaderDropdown linkContent='Translations' linkIcon='ss-icon ss-globe' className={className}>
         <li role="presentation" className="dropdown-header">English</li>
         {this.renderContent('en')}
+        {this.renderContent('transliteration')}
         <li role="presentation" className="dropdown-header languages">Other Languages</li>
         {this.renderContent('!en')}