diff --git a/css/backoffice/layout/_navigation-menu.scss b/css/backoffice/layout/_navigation-menu.scss
index ed9f81096f..d23725b9f6 100644
--- a/css/backoffice/layout/_navigation-menu.scss
+++ b/css/backoffice/layout/_navigation-menu.scss
@@ -122,6 +122,12 @@ $ibo-navigation-menu--menu-filter-input--border-radius: $ibo-border-radius-300 !
$ibo-navigation-menu--menu-groups--margin-top: $ibo-navigation-menu--drawer--padding-y + $ibo-navigation-menu--menu-filter--margin-bottom !default;
+$ibo-navigation-menu--menu--placeholder--width: 100% !default;
+$ibo-navigation-menu--menu--placeholder--margin-top: $ibo-navigation-menu--menu-groups--margin-top !default;
+$ibo-navigation-menu--menu--placeholder-image--svg--width: 90% !default;
+$ibo-navigation-menu--menu--placeholder-image--svg--height: auto !default;
+$ibo-navigation-menu--menu--placeholder-image--svg--margin: auto !default;
+
$ibo-navigation-menu--menu-nodes--margin-bottom--on-filtered: 48px !default;
$ibo-navigation-menu--menu-nodes-title--margin-top: 0 !default;
@@ -550,6 +556,22 @@ $ibo-navigation-menu--menu-counter-color: $ibo-navigation-menu--menu-node--backg
padding: 2px 4px;
@extend %ibo-font-ral-nor-50;
}
+
+.ibo-navigation-menu--menu--placeholder{
+ width: $ibo-navigation-menu--menu--placeholder--width;
+ margin-top: $ibo-navigation-menu--menu--placeholder--margin-top;
+}
+
+.ibo-navigation-menu--menu--placeholder-image > svg{
+ display: block;
+ width: $ibo-navigation-menu--menu--placeholder-image--svg--width;
+ height: $ibo-navigation-menu--menu--placeholder-image--svg--height;
+ margin: $ibo-navigation-menu--menu--placeholder-image--svg--margin;
+}
+.ibo-navigation-menu--menu--placeholder-hint{
+ text-align: center;
+}
+
/* - Menu groups */
.ibo-navigation-menu--menu-groups{
margin-top: $ibo-navigation-menu--menu-groups--margin-top;
diff --git a/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php b/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php
index 3a1861a48b..50879eb6e1 100644
--- a/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php
+++ b/dictionaries/ui/layouts/en.dictionary.itop.navigation-menu.php
@@ -24,6 +24,7 @@ Dict::Add('EN US', 'English', 'English', array(
'UI:Layout:NavigationMenu:MenuFilter:Input:Placeholder' => 'Filter...',
'UI:Layout:NavigationMenu:MenuFilter:Input:Tooltip' => 'Type your keywords to filter menus',
'UI:Layout:NavigationMenu:MenuFilter:Input:Hotkey' => 'Alt + M',
+ 'UI:Layout:NavigationMenu:MenuFilter:Placeholder:Hint' => 'No result for this menu filter',
'UI:Layout:NavigationMenu:UserInfo:WelcomeMessage:Text' => 'Hi %1$s!',
'UI:Layout:NavigationMenu:UserInfo:Picture:AltText' => '%1$s\'s contact picture'
diff --git a/js/layouts/navigation-menu.js b/js/layouts/navigation-menu.js
index 71a969778f..3064d86739 100644
--- a/js/layouts/navigation-menu.js
+++ b/js/layouts/navigation-menu.js
@@ -41,6 +41,7 @@ $(function()
menu_toggler: '[data-role="ibo-navigation-menu--toggler"]',
menu_group: '[data-role="ibo-navigation-menu--menu-group"]',
menu_drawer: '[data-role="ibo-navigation-menu--drawer"]',
+ menu_filter_placeholder: '[data-role="ibo-navigation-menu--menu--placeholder"]',
menu_filter_input: '[data-role="ibo-navigation-menu--menu-filter-input"]',
menu_filter_clear: '[data-role="ibo-navigation-menu--menu-filter-clear"]',
user_menu_toggler: '[data-role="ibo-navigation-menu--user-menu--toggler"]',
@@ -272,6 +273,8 @@ $(function()
// Note: We work on the 'display' property directly as there is a CSS rule managing the visibility of the active menu group
this.element.find('[data-role="ibo-navigation-menu--menu-nodes"]').css('display', '');
this.element.find('[data-role="ibo-navigation-menu--menu-node"]').css('display', '');
+
+ this.element.find(this.js_selectors.menu_filter_placeholder).css('display', 'none');
// Mark menu as unfiltered
this.element.removeClass(this.css_classes.menu_filtered);
@@ -285,6 +288,7 @@ $(function()
{
const me = this;
const aFilterValueParts = this._formatValueForFilterComparison(sRawFilterValue).split(' ');
+ let bHasAnyMatch = false;
// Mark menu as filtered
this.element.addClass(this.css_classes.menu_filtered);
@@ -307,11 +311,16 @@ $(function()
}
if (bMatches) {
+ bHasAnyMatch = true;
// Note: Selector must be recursive
$(this).parents('[data-role="ibo-navigation-menu--menu-nodes"], [data-role="ibo-navigation-menu--menu-node"]').show();
$(this).show();
}
});
+ if(!bHasAnyMatch)
+ {
+ this.element.find(this.js_selectors.menu_filter_placeholder).css('display', '');
+ }
},
/**
* Format sOriginalValue for an easier comparison (change accents, capitalized letters, ...)
diff --git a/templates/layouts/navigation-menu/layout.html.twig b/templates/layouts/navigation-menu/layout.html.twig
index 624bd3f3ea..7c75d768ba 100644
--- a/templates/layouts/navigation-menu/layout.html.twig
+++ b/templates/layouts/navigation-menu/layout.html.twig
@@ -89,6 +89,13 @@
+
+