RTL for NAVBAR --update --fix --style ..

Author: 3imed-jaberi

themes/vue/layout/partials/header.ejs

@@ -1,9 +1,9 @@
 <div id="header">
+  <ul id="nav">
+    <%- partial('partials/main_menu', { context: 'nav' }) %>
+  </ul>
   <a id="logo" href="<%- url_for("/") %>">
     <img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     <span>Vue.js</span>
   </a>
-  <ul id="nav">
-    <%- partial('partials/main_menu', { context: 'nav' }) %>
-  </ul>
 </div>

themes/vue/layout/partials/main_menu.ejs

@@ -1,12 +1,14 @@
-<li>
-  <form id="search-form">
-    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
-  </form>
-</li>
+
 <%- partial('partials/learn_dropdown') %>
 <%- partial('partials/ecosystem_dropdown') %>
 <li>
   <a href="<%- url_for("/v2/guide/team.html") %>" class="nav-link team<%- page.path.match(/team\.html/) ? ' current' : '' %>">Team</a>
 </li>
 <%- partial('partials/support_vue_dropdown') %>
 <%- partial('partials/language_dropdown') %>
+
+<li>
+  <form id="search-form">
+    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
+  </form>
+</li>

themes/vue/source/css/_common.styl

@@ -105,7 +105,7 @@ input.button
     overflow-y: auto
     position: absolute
     top: 100%
-    right: -15px
+    left: -20px
     background-color: #fff
     padding: 10px 0
     border: 1px solid #ddd

themes/vue/source/css/_header.styl

@@ -30,7 +30,7 @@ body.docs
   margin: 0
   padding: 0
   position: absolute
-  right: 30px
+  left: 80px
   top: $heading-padding-vertical
   height: $header-height
   line-height: $header-height
@@ -94,7 +94,7 @@ body.docs
   color: $dark
   outline: none
   border-radius: 15px
-  margin-right: 10px
+  margin-left: 10%
   transition: border-color .2s ease
   background: #fff url(../images/search.png) 8px 5px no-repeat
   background-size: 20px
@@ -109,9 +109,11 @@ body.docs
   color: $dark
   font-family: $logo-font
   font-weight: 500
+  position: absolute
+  left: 89%
   img
     vertical-align: middle
-    margin-right: 6px
+    margin-left: 6px
     width: $header-height
     height: $header-height