From 7c07b8ee964151063a0e770bc333be04daabae14 Mon Sep 17 00:00:00 2001
From: Romain Derie <rde@odoo.com>
Date: Mon, 28 Nov 2022 17:14:00 +0000
Subject: [PATCH] [FIX] website: make sidebar menu visible on safari on mac

For some reason, safari on mac is not showing the sidebar menu content
at all. It remains a white div without content.

Seems like a bad implementation of that browser for this case, or at
least an implementation which is not shared by all other browsers.

Note that removing `z-index`, `position:absolute` or `overflow` css
property from the `wrapwrap` will make the menu appear.
!!! Also note that having a non scrollable page (not enough content),
like an empty homepage, will make the menu appear too. !!!

As this issue is quite critical:
- All mac/safari users are not seeing your website menu..
- And the admin don't event know it most of the time (as not on mac)
And since:
- It's been going for months without someone finding a proper fix
- It's hard to investigate as devs generally don't have mac to
  investigate and have to use browserstack which is really bad for such
  work

Step to reproduce:
- Select the sidebar header template
- Visit the website on safari
-> The menu will be invisible, like if the navbar was empty

opw-2984536
opw-2896939

closes odoo/odoo#107616

X-original-commit: ffa34d840a07efbbec3b180839d7cbf64787e4ef
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 addons/website/static/src/scss/website.scss | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 23768b80108..495320a3a48 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1078,12 +1078,19 @@ header {
 } @else if o-website-value('header-template') == 'sidebar' {
     @include media-breakpoint-up(lg) {
         #wrapwrap {
-            // Hack: padding is used by layout option (boxed, etc) so use
-            // border here to be able to combine the effect.
+            // Two different website options might add padding:
+            // - The sidebar header template
+            // - The website layout template when different than 'full'
+            // We need to combine both using `calc`. The `border` solution does
+            // not work on Safari.
+            $padding-size: o-website-value('sidebar-width');
+            @if o-website-value('layout') != 'full' {
+                $padding-size: calc(#{$grid-gutter-width} * 2 + #{$padding-size});
+            }
             @if $-hamburger-right {
-                border-right: o-website-value('sidebar-width') solid transparent;
+                padding-right: $padding-size;
             } @else {
-                border-left: o-website-value('sidebar-width') solid transparent;
+                padding-left: $padding-size;
             }
 
             > header {