[IMP] odoo_theme: revamp side menu to add overlay

task-2800937

X-original-commit: 4ed8c22

Author: edi-odoo

extensions/odoo_theme/layout.html

@@ -62,15 +62,18 @@
         </nav>
     </noscript>
     {# Shown when the JS has properly set all the classes on the TOC elements #}
-    <nav id="o_menu" class="o_side_nav border-end">
-        {%- if 'hide-page-toc' not in meta %}
-            {# Shown when the JS has properly set all the classes on the TOC elements #}
-            <aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
-                {%- include "layout_templates/page_toc.html" %}
-            </aside>
-        {%- endif %}
-        <div id="o_main_toctree" class="o_main_toc mt-3" hidden>
-            {%- include "layout_templates/menu.html" %}
+    <nav id="o_menu" class="o_side_nav">
+        <div class="o_mobile-overlay" data-bs-toggle="collapse" data-bs-target="#o_menu"></div>
+        <div class="o_side_nav-inner border-end">
+            {%- if 'hide-page-toc' not in meta %}
+                {# Shown when the JS has properly set all the classes on the TOC elements #}
+                <aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
+                    {%- include "layout_templates/page_toc.html" %}
+                </aside>
+            {%- endif %}
+            <div id="o_main_toctree" class="o_main_toc mt-3" hidden>
+                {%- include "layout_templates/menu.html" %}
+            </div>
         </div>
     </nav>
     <header class="o_headers">

extensions/odoo_theme/static/style.scss

@@ -11,6 +11,7 @@ div[aria-label="related navigation"] {
 }
 
 body {
+    position: relative;
     a:not(:hover), a.o_logo {
         text-decoration: none !important;
     }
@@ -178,31 +179,44 @@ header {
 
 .o_side_nav {
     width: 100%;
-    height: calc(100% - (#{$o-headers-mobile-height});
-    overflow-y: auto;
-    position: fixed;
-    top: $o-headers-mobile-height;
-    left: -100%;
-    @include o-transition(all, .3s);
-    padding-left: $padding-s;
-    background-color: lighten($o-violet-dark, 70%) ;
-    z-index: 10;
-    @include font-size($font-size-secondary);
-    color: $o-violet-dark;
-    font-weight: $fw_regular;
-    @include media-breakpoint-up(lg) {
-        width: calc(#{$o-side-nav-width} - 1rem);
-        height: calc(100vh - #{$o-headers-height});
-        left: 0;
-        padding-top: $padding-m;
-        padding-left: $padding-m;
+    .o_mobile-overlay {
+        background-color: rgba(0,0,0,.3);
+        @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right:0);
+        opacity: 0;
+        transition: opacity .2s linear;
+        z-index: -100;
     }
-    @include media-breakpoint-up(xl) {
-        width: $o-side-nav-width;
+    .o_side_nav-inner {
+        width: 90%;
+        height: calc(100% - (#{$o-headers-mobile-height});
+        overflow-y: auto;
+        position: fixed;
+        left: -100%;
+        @include o-transition(all, .3s);
+        padding-left: $padding-s;
+        background-color: lighten($o-violet-dark, 70%) ;
+        z-index: 10;
+        @include font-size($font-size-secondary);
+        color: $o-violet-dark;
+        font-weight: $fw_regular;
+        @include media-breakpoint-up(lg) {
+            width: $o-side-nav-width;
+            height: calc(100vh - (#{$o-headers-height}));
+            left: 0;
+            padding-top: $padding-m;
+            padding-left: $padding-m;
+        }
     }
 
     &.show {
-        left: 0;
+        .o_mobile-overlay {
+            opacity: 1;
+            z-index: 1;
+        }
+
+        .o_side_nav-inner {
+            left: 0;
+        }
     }
 
     .toctree-l1 {