Add language tabs to navbar on phone

source/javascripts/app/lang.js

@@ -22,8 +22,8 @@ under the License.
   function activateLanguage(language) {
     if (!language) return;
 
-    $("#lang-selector a").removeClass('active');
-    $("#lang-selector a[data-language-name='" + language + "']").addClass('active');
+    $(".lang-selector a").removeClass('active');
+    $(".lang-selector a[data-language-name='" + language + "']").addClass('active');
     for (var i=0; i < languages.length; i++) {
       $(".highlight." + languages[i]).hide();
     }
@@ -66,7 +66,7 @@ under the License.
 
   // if we click on a language tab, activate that language
   $(function() {
-    $("#lang-selector a").on("click", function() {
+    $(".lang-selector a").on("click", function() {
       var language = $(this).data("language-name");
       pushURL(language);
       activateLanguage(language);

source/layouts/layout.erb

@@ -47,6 +47,17 @@ under the License.
     </a>
     <div class="tocify-wrapper">
       <%= image_tag "logo.png" %>
+      <% if language_tabs %>
+        <div class="lang-selector">
+          <% language_tabs.each do |lang| %>
+            <% if lang.is_a? Hash %>
+              <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
+            <% else %>
+              <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
       <% if current_page.data.search %>
         <div class="search">
           <input type="text" class="search" id="input-search">
@@ -73,7 +84,7 @@ under the License.
       </div>
       <div class="dark-box">
         <% if language_tabs %>
-          <div id="lang-selector">
+          <div class="lang-selector">
             <% language_tabs.each do |lang| %>
               <% if lang.is_a? Hash %>
                 <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>

source/stylesheets/screen.css.scss

@@ -42,7 +42,7 @@ html, body {
 ////////////////////////////////////////////////////////////////////////////////
 
 .tocify-wrapper {
-  @include transition(width ease-in-out 0.3s);
+  @include transition(left ease-in-out 0.3s);
   overflow-y: auto;
   overflow-x: hidden;
   position: fixed;
@@ -55,6 +55,10 @@ html, body {
   font-size: 13px;
   font-weight: bold;
 
+  .lang-selector {
+    display: none; // only on mobile
+  }
+
   // This is the logo at the top of the ToC
   &>img {
     display: block;
@@ -244,38 +248,41 @@ html, body {
     bottom: 0;
   }
 
-  #lang-selector {
+  .lang-selector {
     position: fixed;
-    width: 100%;
     z-index: 50;
-    font-weight: bold;
-    background-color: $lang-select-bg;
     border-bottom: 5px solid $lang-select-active-bg;
-    a {
-      display: block;
-      float:left;
-      color: $lang-select-text;
-      text-decoration: none;
-      padding: 0 10px;
-      line-height: 30px;
+  }
+}
 
-      &:active {
-        background-color: $lang-select-pressed-bg;
-        color: $lang-select-pressed-text;
-      }
+.lang-selector {
+  background-color: $lang-select-bg;
+  width: 100%;
+  font-weight: bold;
+  a {
+    display: block;
+    float:left;
+    color: $lang-select-text;
+    text-decoration: none;
+    padding: 0 10px;
+    line-height: 30px;
 
-      &.active {
-        background-color: $lang-select-active-bg;
-        color: $lang-select-active-text;
-      }
+    &:active {
+      background-color: $lang-select-pressed-bg;
+      color: $lang-select-pressed-text;
     }
 
-    &:after {
-      content: '';
-      clear: both;
-      display: block;
+    &.active {
+      background-color: $lang-select-active-bg;
+      color: $lang-select-active-text;
     }
   }
+
+  &:after {
+    content: '';
+    clear: both;
+    display: block;
+  }
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -534,10 +541,10 @@ html, body {
 
 @media (max-width: $tablet-width) {
   .tocify-wrapper {
-    width: 0;
+    left: -$nav-width;
 
     &.open {
-      width: $nav-width;
+      left: 0;
     }
   }
 
@@ -559,6 +566,14 @@ html, body {
     margin-right: 0;
   }
 
+  .tocify-wrapper .lang-selector {
+    display: block;
+  }
+
+  .page-wrapper .lang-selector {
+    display: none;
+  }
+
   %right-col {
     width: auto;
     float: none;