Simplify menu handling by using flex instead of offcanvas and make it resizable

Closes #13444

sao/index.html

@@ -36,14 +36,14 @@ this repository contains the full copyright notices and license terms. -->
             <strong>Sorry sao does not work without JavaScript enabled. Please enable it to continue.</strong>
         </noscript>
         <div class="body" style="display: none;">
-            <nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0px;">
+            <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
                 <div class="container-fluid">
                     <div class="navbar-header">
                         <button type="button" class="navbar-toggle collapsed"
                                               data-toggle="collapse" data-target="#main_navbar">
                             <span class="caret"></span>
                         </button>
-                        <a class="navbar-brand" href="javascript:void(0)" data-toggle="offcanvas">
+                        <a class="navbar-brand" href="javascript:void(0)" data-toggle="menu">
                             <span class="icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                     <path d="M0 0h24v24H0z" fill="none"/>
@@ -76,14 +76,10 @@ this repository contains the full copyright notices and license terms. -->
                     </div>
                 </div>
             </nav>
-            <div id="main" class="container-fluid" style="padding: 0px;">
+            <div id="main">
-                <div class="row row-offcanvas row-offcanvas-left active"
+                <div id="menu" role="navigation"></div>
-                     style="height: calc(100vh - 50px - 1px - 20px); margin: 0px;">
+                <div id="tabs" class="hidden-xs" role="tabpanel">
-                    <div class="col-xs-12 col-sm-4 col-lg-3 sidebar-offcanvas" id="menu" role="navigation"
+                    <div id="tabcontent" class="tab-content"></div>
-                                                                                         style="overflow-y: auto; height: 100%;"></div>
-                    <div class="col-xs-12 col-sm-8 col-lg-9 main-offcanvas" style="display:flex; overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
-                        <div id="tabcontent" class="tab-content"></div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -93,16 +89,19 @@ this repository contains the full copyright notices and license terms. -->
             } else {
                 jQuery(function() {
                     jQuery('.body').show();
-                    jQuery('[data-toggle="offcanvas"]').click(function() {
+                    jQuery('[data-toggle="menu"]').click(function() {
-                        jQuery('.row-offcanvas').toggleClass('active');
+                        jQuery('#menu').toggleClass('hidden');
+                        jQuery('#tabs').toggleClass('hidden-xs');
                     });
                     jQuery('#tabs').on('ready', function() {
                         var mq = window.matchMedia('(max-width: 991px)');
                         if (mq.matches) {
                             if (jQuery('#tablist').children().length) {
-                                jQuery('.row-offcanvas').removeClass('active');
+                                jQuery('#menu').addClass('hidden');
+                                jQuery('#tabs').removeClass('hidden-xs');
                             } else {
-                                jQuery('.row-offcanvas').addClass('active');
+                                jQuery('#menu').removeClass('hidden');
+                                jQuery('#tabs').addClass('hidden-xs');
                             }
                         }
                     });

sao/src/offcanvas.less

@@ -1,74 +0,0 @@
-/* This file is part of Tryton.  The COPYRIGHT file at the top level of
-   this repository contains the full copyright notices and license terms. */
-@import "variables";
-
-@offcanvas-md: @screen-md-max;
-
-body {
-    overflow-x: hidden;
-}
-
-.row-offcanvas {
-    position: relative;
-    -webkit-transition: all .25s ease-out;
-    -o-transition: all .25s ease-out;
-    transition: all .25s ease-out;
-}
-
-.row-offcanvas-right {
-    right: 0;
-}
-
-.row-offcanvas-left {
-    left: 0;
-}
-
-.row-offcanvas:not(.active) .main-offcanvas {
-    width: 100%;
-}
-
-.sidebar-offcanvas {
-    position: absolute !important;
-    top: 0;
-}
-
-.make-offcanvas(@size) {
-    .row-offcanvas-right
-    .sidebar-offcanvas {
-        right: -@size;
-    }
-
-    .row-offcanvas-left
-    .sidebar-offcanvas {
-        left: -@size;
-    }
-
-    .row-offcanvas-right.active {
-        right: @size;
-    }
-
-    .row-offcanvas-left.active {
-        left: @size;
-    }
-
-    .sidebar-offcanvas {
-        width: @size;
-    }
-}
-
-
-@media (min-width: @screen-lg-min) {
-    .make-offcanvas(25%);
-}
-
-@media (max-width: @screen-md-max) {
-    .make-offcanvas(33.3333%);
-}
-
-@media (max-width: (@screen-sm-max)) {
-    .make-offcanvas(50%);
-}
-
-@media (max-width: (@screen-xs-max)) {
-    .make-offcanvas(100%);
-}

sao/src/sao.js

@@ -439,9 +439,6 @@ var Sao = {
     Sao.i18n.set_direction = function(direction) {
         Sao.i18n.rtl = (direction === 'rtl');
         jQuery('html').attr('dir', direction);
-        jQuery('.row-offcanvas')
-            .removeClass('row-offcanvas-left row-offcanvas-right')
-            .addClass(Sao.i18n.rtl ? 'row-offcanvas-right' : 'row-offcanvas-left');
     };
     Sao.i18n.locale = {};
 

sao/src/sao.less

@@ -11,6 +11,18 @@ html[theme="default"] {
     @import "theme";
 }
 
+.body {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    > .navbar {
+        margin-bottom: 0;
+    }
+}
+
 // Fix double rtl prefix
 .float-rtl-grid-columns(@class, @rtl-prefix) {
   .col(@index) { // initial
@@ -157,8 +169,20 @@ html[theme="default"] {
     }
 }
 
+#main {
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 6rem;
+}
+
 #menu, #tabs {
-    margin-top: 5px;
+    display: flex;
+    overflow: auto;
 
     .navbar-brand {
         .title {
@@ -170,6 +194,12 @@ html[theme="default"] {
     }
 }
 
+#tabs {
+    flex: 1;
+    overflow-x: hidden;
+    padding: 0 5px;
+}
+
 @media screen and (max-width: @screen-md-max) {
     #menu, #tabs {
         .navbar-brand {
@@ -207,20 +237,30 @@ html[theme="default"] {
 }
 
 #menu {
+    overflow-y: auto;
     padding: 0;
     background-color: @navbar-default-bg;
     border-color: @panel-default-border;
     border-style: solid;
     border-radius: 0 @panel-border-radius @panel-border-radius 0;
     border-width: 1px;
-    margin-top: 5px;
     .treeview {
         height: auto;
         .cell {
             user-select: none;
         }
     }
+    @media (min-width: @screen-md-min) {
+        resize: horizontal;
+        width: 35rem;
+        min-width: 20ch;
+        max-width: 100vw;
+    }
+    @media (max-width: (@screen-sm-max)) {
+        width: 100%;
+    }
 }
+
 [dir="rtl"] #menu {
     border-right: none;
 }
@@ -1366,5 +1406,4 @@ img.favorite-icon {
 }
 
 @import "input-icon";
-@import "offcanvas";
 @import (optional) "custom.less";