From f8ad008115635b357fb9bfc3b275211bbea81919 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 5 Sep 2017 19:09:16 +0200
Subject: [PATCH] Done #1642 @4.5

---
 js/libs/fluidbook/fluidbook.js     |  5 ++++
 js/libs/fluidbook/fluidbook.nav.js |  4 ++--
 style/fluidbook.less               | 23 +++++++++++-------
 style/mmenu/mmenu.less             | 38 +++++++++++++++++++++++-------
 style/nav-horizontal.less          | 26 +++++++++++++++++++-
 5 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 7efcc1d8..581afd1e 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -92,6 +92,11 @@ Fluidbook.prototype = {
         if (this.datas.arrowsTheme) {
             $('html').addClass('sharp');
         }
+
+        if (this.datas.invertMenuPosition) {
+            $('html').addClass('menu-inverted');
+        }
+
         this.initLoading();
     },
     initLoading: function () {
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 223b6eb5..67507ba5 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -30,7 +30,7 @@ FluidbookNav.prototype = {
                 "pagedim-black"
             ],
             "offCanvas": {
-                "position": this.fluidbook.datas.menuPosition || "right",
+                "position": this.fluidbook.datas.invertMenuPosition ? "right" : "left",
                 "zposition": "front"
             },
             "navbar": {
@@ -226,7 +226,7 @@ FluidbookNav.prototype = {
         // MMenu specific elements
         if (navType == 'menu') {
 
-            var menuOpener = '<a href="#" id="menuOpener">' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + '</a>';
+            var menuOpener = '<a href="#" id="menuOpener">' + getSpriteIcon('interface-menu') + '<span class="label">' + this.fluidbook.l10n.__('Menu') + '</span></a>';
             $('#main header').append(menuOpener);
 
             // Add holder list element for menu items
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 5447ac69..2a89fb59 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -724,18 +724,23 @@ header {
 	&.overridenByFluidbook {
 		visibility: hidden;
 	}
-}
 
-.ltr #logo {
-	left: 0;
-}
+	// Portrait mode - logo hidden
+	.portrait & {
+		display: none;
+	}
 
-.rtl #logo {
-	right: 0;
-}
+	// Positioning for left-to-right Fluidbooks + inverted menu on RTL
+	.ltr &, .rtl.menu-inverted & {
+		right: 0;
+		left: auto;
+	}
 
-.portrait #logo {
-	display: none;
+	// Positioning for right-to-left Fluidbooks + inverted menu on LTR
+	.rtl &, .ltr.menu-inverted & {
+		left: 0;
+		right: auto;
+	}
 }
 
 /* Credits */
diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 177a6a8f..8458847a 100644
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -93,22 +93,41 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
 
 #menuOpener {
   display: none;
-  position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 16px;
-  line-height: 1;
-  color: @icon-color;
 
   @media all and (max-width: @menu-breakpoint) {
-    display: block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 100%;
+    font-size: 16px;
+    line-height: 1;
+    color: @icon-color;
+    display: flex;
+    align-items: center;
+  }
+
+  // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+  .ltr &, .rtl.menu-inverted & {
+    left: 9px;
+    right: auto;
+    flex-direction: row;
+  }
+
+  // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+  .rtl &, .ltr.menu-inverted & {
+    right: 9px;
+    left: auto;
+    flex-direction: row-reverse; // Swap text and icon positions
+  }
+
+  .label {
+    margin: 0 9px;
   }
 
   .svg-icon {
     width: 20px;
     vertical-align: middle;
-    margin-left: 18px;
+    margin: 0 9px;
   }
 }
 
@@ -117,6 +136,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   top: 0;
   left: 0;
   width: 100%;
+  z-index: 2; // Ensure search box sits above #shareLinks
 
   &:after {
     border: none;
diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 7954fed0..55ab26cf 100644
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -1,6 +1,5 @@
 #horizontalNav {
   position: absolute;
-  right: 0;
   top: 50%;
   transform: translateY(-50%);
 
@@ -8,14 +7,35 @@
     display: none;
   }
 
+  // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+  .ltr &, .rtl.menu-inverted & {
+    left: 0;
+    right: auto;
+  }
+
+  // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+  .rtl &, .ltr.menu-inverted & {
+    right: 0;
+    left: auto;
+  }
+
   // Locales icon + text link
   &_locales {
     border-left: 1px solid;
     margin-right: 1.5em;
     margin-left: 14px;
 
+    .rtl & {
+      border-left: none;
+      border-right: 1px solid;
+    }
+
     .svg-icon {
       margin: 0 7px 0 30px !important;
+
+      .rtl & {
+        margin: 0 30px 0 7px !important;
+      }
     }
   }
 }
@@ -54,4 +74,8 @@
   border-width: 0 2px 2px 0; // Make right angle for arrow
   transform: rotate(45deg); // Rotate to downwards position
   display: inline-block;
+
+  .rtl & {
+    margin-right: 10px;
+  }
 }
\ No newline at end of file
-- 
2.39.5