From 5b1d801a325a8df07c1c9772da959c3fc20b2be9 Mon Sep 17 00:00:00 2001
From: Paolo <bison@technikum-wien.at>
Date: Mon, 9 Jul 2018 12:15:19 +0200
Subject: [PATCH] NavigationWidget: implemented drop down menu in the header
 menu

---
 public/css/NavigationWidget.css |  1 -
 public/js/NavigationWidget.js   | 78 +++++++++++++++++++++++----------
 2 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/public/css/NavigationWidget.css b/public/css/NavigationWidget.css
index b6d6c800e..0baaa684a 100644
--- a/public/css/NavigationWidget.css
+++ b/public/css/NavigationWidget.css
@@ -41,7 +41,6 @@
 	padding-right: 20px;
 	padding-left: 7px;
 	font-size: 18px;
-	line-height: 20px;
 }
 
 .navbar-brand-icon {
diff --git a/public/js/NavigationWidget.js b/public/js/NavigationWidget.js
index ee9adb83d..4e388db23 100644
--- a/public/js/NavigationWidget.js
+++ b/public/js/NavigationWidget.js
@@ -32,7 +32,7 @@ var FHC_NavigationWidget = {
 
 					if (FHC_AjaxClient.hasData(data))
 					{
-						var strHeaderMenu = '';
+						var strHeaderMenu = "";
 
 						jQuery.each(FHC_AjaxClient.getData(data), function(i, e) {
 							if (e != null) strHeaderMenu += FHC_NavigationWidget._buildHeaderMenuStructure(e);
@@ -63,7 +63,7 @@ var FHC_NavigationWidget = {
 					{
 						FHC_NavigationWidget._printCollapseIcon(); // Applies bootstrap SB Admin 2 theme elements to the left menu
 
-						var strLeftMenu = '';
+						var strLeftMenu = "";
 
 						// Builds left menu
 						jQuery.each(FHC_AjaxClient.getData(data), function(i, e) {
@@ -140,17 +140,49 @@ var FHC_NavigationWidget = {
 	 */
 	_buildHeaderMenuStructure: function(item) {
 
-		var strHeaderMenu = '';
+		var strHeaderMenu = "";
 
-		if (item['icon'] != 'undefined' && item['icon'] != '')
+		if (item["icon"] != "undefined" && item["icon"] != "")
 		{
-			strHeaderMenu += '<i class="navbar-brand-icon fa fa-' + item['icon'] + ' fa-fw"></i>';
+			strHeaderMenu += '<i class="navbar-brand-icon fa fa-' + item["icon"] + ' fa-fw"></i>';
 		}
 
-		var target = '';
-		if (item['target'] != null) target = item['target'];
+		if (item["children"] != null && Object.keys(item["children"]).length > 0)
+		{
+			strHeaderMenu += '<span><a class="navbar-brand" data-toggle="dropdown" href="#" aria-expanded="false">';
+		}
 
-		strHeaderMenu += '<a class="navbar-brand" href="' + item['link'] + '" target="' + target + '">' + item['description'] + '</a>';
+		var target = "";
+		if (item["target"] != null) target = item["target"];
+
+		if (item["children"] != null && Object.keys(item["children"]).length > 0)
+		{
+			strHeaderMenu += item["description"] + " ";
+			strHeaderMenu += '<i class="fa fa-caret-down"></i></a>';
+			strHeaderMenu += '<ul class="dropdown-menu dropdown-user">';
+
+			jQuery.each(item["children"], function(i, e) {
+				if (e != null)
+				{
+					var eTarget = "";
+					if (e["target"] != null) eTarget = e["target"];
+
+					strHeaderMenu += '<li><a href="' + e["link"] + '" target="' + eTarget + '">';
+
+					if (e["icon"] != "undefined" && e["icon"] != "")
+					{
+						strHeaderMenu += '<i class="fa fa-' + e["icon"] + ' fa-fw"></i>';
+					}
+
+					strHeaderMenu += e["description"] + '</a></li>';
+				}
+			});
+			strHeaderMenu += '</ul></span>';
+		}
+		else
+		{
+			strHeaderMenu += '<a class="navbar-brand" href="' + item["link"] + '" target="' + target + '">' + item["description"] + '</a>';
+		}
 
 		return strHeaderMenu;
 	},
@@ -161,45 +193,45 @@ var FHC_NavigationWidget = {
 	_buildLeftMenuStructure: function(item, depth = 1) {
 
 		strLeftMenu = "";
-		var expanded = item['expand'] != null && item['expand'] === true ? ' active' : '';
+		var expanded = item["expand"] != null && item["expand"] === true ? ' active' : "";
 
 		strLeftMenu += '<li class="' + expanded + '">';
 
-		if (item['subscriptLinkClass'] != null && item['subscriptDescription'] != null)
+		if (item["subscriptLinkClass"] != null && item["subscriptDescription"] != null)
 		{
 			strLeftMenu += '<span>';
 		}
 
-		var target = '';
-		if (item['target'] != null) target = item['target'];
+		var target = "";
+		if (item["target"] != null) target = item["target"];
 
-		strLeftMenu += '<a href="' + item['link'] + '"' + expanded + ' target="' + target + '">';
+		strLeftMenu += '<a href="' + item["link"] + '"' + expanded + ' target="' + target + '">';
 
-		if (item['icon'] != 'undefined')
+		if (item["icon"] != "undefined")
 		{
-			strLeftMenu += '<i class="fa fa-' + item['icon'] + ' fa-fw"></i> ';
+			strLeftMenu += '<i class="fa fa-' + item["icon"] + ' fa-fw"></i> ';
 		}
 
-		strLeftMenu += item['description'];
+		strLeftMenu += item["description"];
 
-		if (item['children'] != null && Object.keys(item['children']).length > 0)
+		if (item["children"] != null && Object.keys(item["children"]).length > 0)
 		{
 			strLeftMenu += '<span class="fa arrow"></span>';
 		}
 
 		strLeftMenu += '</a>';
 
-		if (item['subscriptLinkClass'] != null && item['subscriptDescription'] != null)
+		if (item["subscriptLinkClass"] != null && item["subscriptDescription"] != null)
 		{
-			strLeftMenu += '<a class="' + item['subscriptLinkClass'] + ' menuSubscriptLink" value="' + item['subscriptLinkValue'] + '" href="#">' +
-						' (' + item['subscriptDescription'] + ')' +
+			strLeftMenu += '<a class="' + item["subscriptLinkClass"] + ' menuSubscriptLink" value="' + item["subscriptLinkValue"] + '" href="#">' +
+						' (' + item["subscriptDescription"] + ')' +
 						'</a>';
 			strLeftMenu += '</span>';
 		}
 
-		if (item['children'] != null && Object.keys(item['children']).length > 0)
+		if (item["children"] != null && Object.keys(item["children"]).length > 0)
 		{
-			var level = '';
+			var level = "";
 			if (depth === 1)
 			{
 				level = 'second';
@@ -211,7 +243,7 @@ var FHC_NavigationWidget = {
 
 			strLeftMenu += '<ul class="nav nav-' + level + '-level" ' + expanded + '>';
 
-			jQuery.each(item['children'], function(i, e) {
+			jQuery.each(item["children"], function(i, e) {
 				if (e != null) strLeftMenu += FHC_NavigationWidget._buildLeftMenuStructure(e, ++depth);
 			});