Left menu tweak

plugins/CoreHome/templates/_menu.twig

@@ -1,5 +1,8 @@
-{% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser) %}
+{% macro menu(menu, anchorlink, cssClass, currentModule, currentAction, collapsible, isSuperUser, renderQuickAccess) %}
     <div id="secondNavBar" class="{{ cssClass }} z-depth-1">
+        {% if renderQuickAccess|default(false) %}
+            <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
+        {% endif %}
         <ul class="navbar {% if collapsible %}collapsible collapsible-accordion{% endif %} hide-on-med-and-down" aria-label="{{ 'CoreHome_MainNavigation'|translate|e('html_attr') }}" role="menu">
             {% for level1,level2 in menu %}
 

plugins/CoreHome/vue/src/QuickAccess/QuickAccess.less

@@ -1,5 +1,9 @@
 .quick-access {
   position: relative;
+  box-shadow: none !important;
+  border: 1px solid @theme-color-background-lowContrast !important;
+  border-radius: 8px !important;
+  width: 200px;
 
   &:hover,
   &.expanded,
@@ -9,46 +13,67 @@
     }
   }
   li {
-    font-size: 11px;
+    font-size: 14px;
   }
 
   li a {
     padding: 10px 19px;
     display: inline-block;
     text-decoration: none;
     word-break: break-all;
+    color: @theme-color-text-lighter;
   }
 
   .icon-search {
     position: absolute;
     font-size: 14px;
-    top: 10px;
-    left: 10px;
+    top: 13px;
+    left: 12px;
+    color: @theme-color-border;
 
   }
-  input {
-    width:100%;
-    height: 100%;
-    box-shadow: 0 0 !important;
-    border-radius: 0 !important;
-    background-color: @theme-color-background-base !important;
-    font-size: 11px;
+  .quickAccessInside .quickAccessInput {
+    height: 38px;
+    font-size: 14px;
+    padding: 10px 12px 10px 38px;
+    border: 0;
+    margin: 0;
+    box-sizing: border-box;
+    box-shadow: none!important;
+    border-radius: 8px;
+    background-color: @theme-color-background-contrast !important;
     &:focus {
       outline: none;
+      border-bottom: none !important;
     }
   }
+  .quickAccessInside .quickAccessDropdown.dropdown {
+    padding: 8px;
+    border-radius: 8px;
+    margin-top: 5px;
+    width: 200px;
+    max-height: 75vh;
+    overflow: auto;
+    box-shadow: 0 10px 40px 0 rgba(165, 177, 202, 0.30), 0 0 3px 0 rgba(165, 177, 202, 0.30);;
+  }
+
+  .quickAccessInput::placeholder {
+    color: @theme-color-background-lowContrast;
+  }
   .selected {
     background-color: @theme-color-background-tinyContrast !important;
+    border-radius: 8px;
   }
   .quick-access-category {
     text-align: left !important;
-    font-size: 11px;
-    font-weight: bold;
-    padding: 5px 5px 5px 10px;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 8px;
     cursor: pointer;
   }
   .result {
     cursor: pointer;
+    font-weight: normal;
   }
   .quick-access-category:hover {
     background: none !important;

plugins/CoreHome/vue/src/QuickAccess/QuickAccess.vue

@@ -16,7 +16,7 @@
       @mouseenter="searchActive = true"
     />
     <input
-      class="s"
+      class="quickAccessInput"
       @keydown="onKeypress($event)"
       @focus="searchActive = true"
       v-model="searchTerm"
@@ -29,7 +29,7 @@
       ref="input"
     />
     <div
-      class="dropdown"
+      class="dropdown quickAccessDropdown"
       v-show="searchTerm && searchActive"
     >
       <ul v-show="!(numMenuItems > 0 || sites.length)">
@@ -185,10 +185,6 @@ export default defineComponent({
       root.parentElement.classList.add('quick-access', 'piwikSelector');
     }
 
-    if (typeof window.initTopControls !== 'undefined' && window.initTopControls) {
-      window.initTopControls();
-    }
-
     Matomo.helper.registerShortcut('f', translate('CoreHome_ShortcutSearch'), (event) => {
       if (event.altKey) {
         return;

plugins/CoreHome/vue/src/SideNav/SideNav.ts

@@ -31,7 +31,12 @@ export default {
     if (!binding.value.activator) {
       return;
     }
-
+    const secondNavBar = document.getElementById('secondNavBar');
+    const setSecondNavBarMenuState = (isOpen: boolean) => {
+      if (secondNavBar) {
+        secondNavBar.classList.toggle('mobileLeftMenuOpen', isOpen);
+      }
+    };
     setTimeout(() => {
       if (!binding.value.initialized) {
         binding.value.initialized = true;
@@ -41,10 +46,15 @@ export default {
           window.$(sideNavActivator).show();
 
           const targetSelector = sideNavActivator.getAttribute('data-target');
-
           // @ts-ignore
           window.$(`#${targetSelector}`).sidenav({
             closeOnClick: true,
+            onOpenStart: () => {
+              setSecondNavBarMenuState(true);
+            },
+            onCloseStart: () => {
+              setSecondNavBarMenuState(false);
+            },
           });
         }
       }

plugins/Morpheus/stylesheets/base/colors.less

@@ -85,7 +85,6 @@
 @default-box-shade: 0 2px 3px 0 rgba(0,0,0,0.16), 0 0px 3px 0 rgba(0,0,0,0.12);
 
 @theme-color-help-background-color: #6200ea;
-
 /*
 Qualitative data color series inspired from colorbrewer2.org/
 next ones could be: #cab2d6 #ffff99 # #b2df8a

plugins/Morpheus/templates/admin.twig

@@ -33,49 +33,50 @@
 {% block root %}
     {% include "@CoreHome/_topScreen.twig" %}
 
-    <div class="top_controls">
-        <div vue-entry="CoreHome.QuickAccess" class="piwikTopControl borderedControl"></div>
+    {% set hasSidebar = showMenu is not defined or showMenu %}
 
-        {% block topcontrols %}
-        {% endblock %}
-
-        {% include "@CoreHome/_headerMessage.twig" %}
-    </div>
-
-    {% import 'ajaxMacros.twig' as ajax %}
-    {{ ajax.requestErrorDiv(contactEmail|default(''), areAdsForProfessionalServicesEnabled, currentModule, showMoreFaqInfo) }}
-    {{ postEvent("Template.beforeContent", "admin", currentModule, currentAction) }}
-
-    <div class="page">
-
-        {% if showMenu is not defined or showMenu %}
+    <div class="layoutWithSidebar{% if hasSidebar %} layoutWithSidebar--hasSidebar{% endif %}">
+        {% if hasSidebar %}
             {% import '@CoreHome/_menu.twig' as menu %}
             {% set collapsibleMenu = hasSomeAdminAccess %}
-            {{ menu.menu(adminMenu, false, 'Menu--admin', currentModule, currentAction, collapsibleMenu, isSuperUser) }}
+            {{ menu.menu(adminMenu, false, 'Menu--admin', currentModule, currentAction, collapsibleMenu, isSuperUser, true) }}
         {% endif %}
 
+        <div class="layoutWithSidebarContent">
+            <div class="top_controls">
+                {% block topcontrols %}
+                {% endblock %}
 
-        <div class="pageWrap">
-            <a name="main"></a>
-            {% block notification %}
-                {% include "@CoreHome/_notifications.twig" %}
-            {% endblock %}
-            {% include "@CoreHome/_warningInvalidHost.twig" %}
+                {% include "@CoreHome/_headerMessage.twig" %}
+            </div>
 
-            <div class="admin" id="content">
+            <div class="page">
+                <div class="pageWrap">
+                    {% import 'ajaxMacros.twig' as ajax %}
+                    {{ ajax.requestErrorDiv(contactEmail|default(''), areAdsForProfessionalServicesEnabled, currentModule, showMoreFaqInfo) }}
+                    {{ postEvent("Template.beforeContent", "admin", currentModule, currentAction) }}
 
-                <div class="ui-confirm" id="alert">
-                    <h2></h2>
-                    <input role="no" type="button" value="{{ 'General_Ok'|translate }}"/>
-                </div>
+                    <a name="main"></a>
+                    {% block notification %}
+                        {% include "@CoreHome/_notifications.twig" %}
+                    {% endblock %}
+                    {% include "@CoreHome/_warningInvalidHost.twig" %}
 
-                {% block content %}
-                {% endblock %}
+                    <div class="admin" id="content">
+
+                        <div class="ui-confirm" id="alert">
+                            <h2></h2>
+                            <input role="no" type="button" value="{{ 'General_Ok'|translate }}"/>
+                        </div>
 
+                        {% block content %}
+                        {% endblock %}
 
+
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 
-
 {% endblock %}