From dd1ba159ab35ddf6c904300af2ffd8ccf5708525 Mon Sep 17 00:00:00 2001
From: fusionate <nate@fusionpbx.com>
Date: Tue, 17 Oct 2023 00:27:59 +0000
Subject: [PATCH] Menu - Split longer submenus into two columns of items.

---
 resources/classes/menu.php | 27 ++++++++++++++++++++++++---
 themes/default/css.php     | 20 ++++++++++++++++++--
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/resources/classes/menu.php b/resources/classes/menu.php
index f21af4c752..cba5850c7f 100644
--- a/resources/classes/menu.php
+++ b/resources/classes/menu.php
@@ -1004,7 +1004,7 @@ if (!class_exists('menu')) {
 							else {
 								$menu_main_icon = null;
 							}
-							$menu_main_item = "<span class='d-sm-none d-md-none d-lg-inline' style='margin-left: 5px;'>".$menu_parent['menu_language_title']."</span>\n";
+							$menu_main_item = "						<span class='d-sm-none d-md-none d-lg-inline' style='margin-left: 5px;'>".$menu_parent['menu_language_title']."</span>\n";
 						}
 						else {
 							$menu_main_item = $menu_parent['menu_language_title'];
@@ -1014,7 +1014,15 @@ if (!class_exists('menu')) {
 						$html .= "						".$menu_main_icon.$menu_main_item;
 						$html .= "					</a>\n";
 						if ($submenu) {
-							$html .= "					<ul class='dropdown-menu'>\n";
+							$columns = @sizeof($menu_parent['menu_items']) > 20 ? 2 : 1;
+							$column_current = 1;
+							$mod_ul = $columns > 1 ? 'multi-column' : null;
+							$html .= "					<ul class='dropdown-menu ".$mod_ul."'>\n";
+							if ($columns > 1) {
+								$html .= "						<div class='row'>\n";
+								$html .= "							<div class='col-12 col-sm-6 pr-sm-0'>\n";
+								$html .= "								<ul class='multi-column-dropdown'>\n";
+							}
 							foreach ($menu_parent['menu_items'] as $index_sub => $menu_sub) {
 								$mod_a_2 = $menu_sub['menu_item_link'];
 								if ($mod_a_2 == '') {
@@ -1030,7 +1038,20 @@ if (!class_exists('menu')) {
 										$menu_sub_icon = null;
 									}
 								}
-								$html .= "						<li class='nav-item'><a class='nav-link' href='".$mod_a_2."' ".$mod_a_3.">".($_SESSION['theme']['menu_sub_icons'] ? "<span class='fas fa-bar d-inline-block d-sm-none float-left' style='margin: 4px 10px 0 25px;'></span>" : null).escape($menu_sub['menu_language_title']).$menu_sub_icon."</a></li>\n";
+								$html .= "						<li class='nav-item'><a class='nav-link' href='".$mod_a_2."' ".$mod_a_3.">".($_SESSION['theme']['menu_sub_icons']['boolean'] != 'false' ? "<span class='fas fa-bar d-inline-block d-sm-none float-left' style='margin: 4px 10px 0 25px;'></span>" : null).escape($menu_sub['menu_language_title']).$menu_sub_icon."</a></li>\n";
+								if ($columns > 1 && $column_current == 1 && ($index_sub+1) > (ceil(@sizeof($menu_parent['menu_items'])/2)-1)) {
+									$html .= "								</ul>\n";
+									$html .= "							</div>\n";
+									$html .= "							<div class='col-12 col-sm-6 pl-sm-0'>\n";
+									$html .= "								<ul class='multi-column-dropdown'>\n";
+									$column_current = 2;
+								}
+
+							}
+							if ($columns > 1) {
+								$html .= "								</ul>\n";
+								$html .= "							</div>\n";
+								$html .= "						</div>\n";
 							}
 							$html .= "					</ul>\n";
 						}
diff --git a/themes/default/css.php b/themes/default/css.php
index 5203f23b84..a672eaa990 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -619,8 +619,16 @@ else { //default: white
 		<?php unset($br); ?>
 		}
 
+	/* sub menu container (multiple columns) */
+	@media(min-width: 576px) {
+		ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column {
+			width: 330px;
+			}
+		}
+
 	/* sub menu item */
-	ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link {
+	ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link,
+	ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link {
 		font-family: <?=$menu_sub_text_font?>;
 		color: <?=$menu_sub_text_color?>;
 		font-size: <?=$menu_sub_text_size?>;
@@ -628,9 +636,17 @@ else { //default: white
 		padding: 3px 14px !important;
 		}
 
+	ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown {
+		list-style-type: none;
+		padding-left: 0;
+		}
+
 	ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:hover,
 	ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:focus,
-	ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:active {
+	ul.navbar-nav > li.nav-item > ul.dropdown-menu > li.nav-item > a.nav-link:active,
+	ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link:hover,
+	ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link:focus,
+	ul.navbar-nav > li.nav-item > ul.dropdown-menu.multi-column > div.row > div > ul.multi-column-dropdown > li.nav-item > a.nav-link:active {
 		color: <?=$menu_sub_text_color_hover?>;
 		background: <?=$menu_sub_background_color_hover?>;
 		outline: none;