RTL language - sidebars opens in wrong sides fixed - #46

grandnode · Jun 28, 2021 · 374ecd1 · 374ecd1
1 parent c53eac8
commit 374ecd1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/src/Web/Grand.Web/Views/Shared/Header.cshtml b/src/Web/Grand.Web/Views/Shared/Header.cshtml
@@ -1,19 +1,24 @@
-<div class="header-nav">
+@inject IWorkContext workContext
+@{ 
+    var supportRtl = workContext.WorkingLanguage.Rtl;
+}
+<div class="header-nav">
     <b-navbar type="light">
         <b-container :fluid="fluid" id="header-container">
             <div class="menu-container">
                 <template>
                     <button aria-label="menu-toggler" class="btn menu-toggler" v-b-toggle.sidebar-menu><span></span><span></span><span></span></button>
                     <b-sidebar id="sidebar-menu"
                                backdrop
-                               shadow>
+                               shadow
+                               @if (supportRtl) { <text>right</text> }>
                         <ul class="Menu -vertical">
                             @await Component.InvokeAsync("Menu")
                         </ul>
                     </b-sidebar>
                 </template>
             </div>
-            <partial name="_Logo"/>
+            <partial name="_Logo" />
             <ul class="navbar-nav top-header-items order-3">
                 <template>
                     <li class="nav-item">
@@ -47,7 +52,7 @@
                             <b-icon icon="gear" :variant="[darkMode ? 'white' : 'dark']" v-b-toggle.sidebar-right></b-icon>
                         </span>
                         <template>
-                            <b-sidebar id="sidebar-right" body-class="user-panel" title="@Loc["Account.MyAccount"]" right backdrop>
+                            <b-sidebar id="sidebar-right" body-class="user-panel" title="@Loc["Account.MyAccount"]" @if (!supportRtl) { <text>right</text> } backdrop>
                                 <div class="d-inline-flex flex-wrap mb-2">
                                     <partial name="_Selector_TaxType" />
                                     <partial name="_Selector_Currency" />

diff --git a/src/Web/Grand.Web/Views/Shared/SidebarShoppingCart.cshtml b/src/Web/Grand.Web/Views/Shared/SidebarShoppingCart.cshtml
@@ -1,4 +1,8 @@
 @model int
+@inject IWorkContext workContext
+@{
+    var supportRtl = workContext.WorkingLanguage.Rtl;
+}
 <li class="nav-item">
     <ul class="sidebar-cart px-0">
         <li class="nav-item">
@@ -16,7 +20,7 @@
         </li>
         <template>
             <li>
-                <b-sidebar id="sidebar-cart" backdrop right>
+                <b-sidebar id="sidebar-cart" backdrop @if (!supportRtl) { <text>right</text> }>
                     <template v-slot:title v-if="flycartindicator > 0">
                         @Html.Raw(string.Format(Loc["ShoppingCart.Mini.ItemsText"], string.Format("<a href=\"{0}\">{1}</a>", Url.RouteUrl("ShoppingCart"), string.Format(Loc["ShoppingCart.Mini.Items"], "{{flycartindicator}}"))))
                     </template>

diff --git a/src/Web/Grand.Web/Views/Shared/SidebarWishlist.cshtml b/src/Web/Grand.Web/Views/Shared/SidebarWishlist.cshtml
@@ -1,17 +1,21 @@
-@model int  
+@model int
+@inject IWorkContext workContext
+@{
+    var supportRtl = workContext.WorkingLanguage.Rtl;
+}
 <li class="nav-item">
     <ul class="sidebar-cart wishlist px-0">
-            <li class="nav-item">
-                <a href="#" target="_self" class="nav-link">
-                    <b-icon icon="heart" :variant="[darkMode ? 'white' : 'dark']" @@click="updateWishlist()" v-b-toggle.sidebar-wishlist></b-icon>
-                    <span class="qty-indicator wishlist-qty">
-                        @Loc["Wishlist.HeaderQuantity", Model]
-                    </span>
-                </a>
-            </li>
-            <template>
-                <li>
-                <b-sidebar id="sidebar-wishlist" backdrop right>
+        <li class="nav-item">
+            <a href="#" target="_self" class="nav-link">
+                <b-icon icon="heart" :variant="[darkMode ? 'white' : 'dark']" @@click="updateWishlist()" v-b-toggle.sidebar-wishlist></b-icon>
+                <span class="qty-indicator wishlist-qty">
+                    @Loc["Wishlist.HeaderQuantity", Model]
+                </span>
+            </a>
+        </li>
+        <template>
+            <li>
+                <b-sidebar id="sidebar-wishlist" backdrop @if (!supportRtl) { <text>right</text> }>
                     <template v-slot:title v-if="wishindicator > 0">
                         @Html.Raw(string.Format(Loc["Wishlist.Mini.ItemsText"], string.Format("<a href=\"{0}\">{1}</a>", Url.RouteUrl("ShoppingCart"), string.Format(Loc["Wishlist.Mini.Items"], "{{wishindicator}}"))))
                     </template>
@@ -40,13 +44,13 @@
                             <b-col cols="12" class="p-3 bg-dark">
                                 <div class="btn-group w-100">
                                     <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("Wishlist")">
-                                        <b-icon icon="heart" class="pr-2"></b-icon>
+                                        <b-icon icon="heart" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
                                         @Loc["Wishlist"]
                                     </a>
                                     <template v-if="flywish.EmailWishlistEnabled">
                                         <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("EmailWishlist")">
-                                            <b-icon icon="envelope" class="pr-sm-2 pr-0"></b-icon>
-                                            <span class="d-sm-block d-none">@Loc["Wishlist.EmailAFriend"]</span>
+                                            <b-icon icon="envelope" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
+                                            @Loc["Wishlist.EmailAFriend"]
                                         </a>
                                     </template>
                                 </div>