NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] odoo_theme: revamp side menu to add overlay

Browse Source 
task-2800937

X-original-commit: 4ed8c2238a
This commit is contained in:
Elisabeth Dickinson 2022-06-14 13:18:34 +02:00 committed by Antoine Vandevenne (anv)
parent 7fe67ec854
commit 522f684b9a
2 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
extensions/odoo_theme/layout.html
View File

@ -62,7 +62,9 @@
</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">
<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>
@ -72,6 +74,7 @@
<div id="o_main_toctree" class="o_main_toc mt-3" hidden>
{%- include "layout_templates/menu.html" %}
</div>
</div>
</nav>
<header class="o_headers">
{%- include "layout_templates/header.html" %}

24
extensions/odoo_theme/static/style.scss
View File

@ -11,6 +11,7 @@ div[aria-label="related navigation"] {
}
body {
position: relative;
a:not(:hover), a.o_logo {
text-decoration: none !important;
}
@ -178,10 +179,18 @@ header {
.o_side_nav {
width: 100%;
.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;
}
.o_side_nav-inner {
width: 90%;
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;
@ -191,19 +200,24 @@ header {
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});
width: $o-side-nav-width;
height: calc(100vh - (#{$o-headers-height}));
left: 0;
padding-top: $padding-m;
padding-left: $padding-m;
}
@include media-breakpoint-up(xl) {
width: $o-side-nav-width;
}
&.show {
.o_mobile-overlay {
opacity: 1;
z-index: 1;
}
.o_side_nav-inner {
left: 0;
}
}
.toctree-l1 {
padding-top: $padding-xs;