Initial Side Menu Integration (Still in Development)

core/default_settings/app_languages.php

@@ -481,6 +481,26 @@ $text['label-fixed']['ru-ru'] = "Фиксированный";
 $text['label-fixed']['sv-se'] = "Fast";
 $text['label-fixed']['uk-ua'] = "фіксований";
 
+$text['label-side']['en-us'] = "Side";
+$text['label-side']['ar-eg'] = "";
+$text['label-side']['de-at'] = "";
+$text['label-side']['de-ch'] = "";
+$text['label-side']['de-de'] = "";
+$text['label-side']['es-cl'] = "";
+$text['label-side']['es-mx'] = "";
+$text['label-side']['fr-ca'] = "";
+$text['label-side']['fr-fr'] = "";
+$text['label-side']['he-il'] = "";
+$text['label-side']['it-it'] = "";
+$text['label-side']['nl-nl'] = "";
+$text['label-side']['pl-pl'] = "";
+$text['label-side']['pt-br'] = "";
+$text['label-side']['pt-pt'] = "";
+$text['label-side']['ro-ro'] = "";
+$text['label-side']['ru-ru'] = "";
+$text['label-side']['sv-se'] = "";
+$text['label-side']['uk-ua'] = "";
+
 $text['label-fine']['en-us'] = "Fine";
 $text['label-fine']['ar-eg'] = "";
 $text['label-fine']['de-at'] = "Fein"; //copied from de-de

core/default_settings/default_setting_edit.php

@@ -542,6 +542,7 @@
 		echo "    	<option value='fixed' ".(($default_setting_value == "fixed") ? "selected='selected'" : null).">".$text['label-fixed']."</option>\n";
 		echo "    	<option value='static' ".(($default_setting_value == "static") ? "selected='selected'" : null).">".$text['label-static']."</option>\n";
 		echo "    	<option value='inline' ".(($default_setting_value == "inline") ? "selected='selected'" : null).">".$text['label-inline']."</option>\n";
+		echo "    	<option value='side' ".(($default_setting_value == "side") ? "selected='selected'" : null).">".$text['label-side']."</option>\n";
 		echo "    </select>\n";
 	}
 	elseif ($category == "theme" && $subcategory == "menu_position" && $name == "text" ) {

themes/default/css.php

@@ -425,6 +425,125 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
 		background: <?php echo ($_SESSION['theme']['menu_main_toggle_color_hover']['text'] != '') ? $_SESSION['theme']['menu_main_toggle_color_hover']['text'] : 'rgba(255,255,255,1.0)'; ?>;
 		}
 
+/* SIDE MENU: Begin ***********************************************************/
+
+	/* side menu container */
+	div#menu_side_container {
+		z-index: 99900;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 225px;
+		height: 100%;
+		overflow: auto;
+		<?php if ($_SESSION['theme']['menu_main_background_image']['text'] != '') { ?>
+			background-image: url("<?php echo $_SESSION['theme']['menu_main_background_image']['text']; ?>");
+			background-position: 0px 0px;
+			background-repeat: repeat-y;
+		<?php } else {?>
+			background: <?php echo ($_SESSION['theme']['menu_main_background_color']['text'] != '') ? $_SESSION['theme']['menu_main_background_color']['text'] : 'rgba(0,0,0,0.90)'; ?>;
+		<?php } ?>
+		-webkit-box-shadow: <?php echo ($_SESSION['theme']['menu_main_shadow_color']['text'] != '') ? '0 0 5px '.$_SESSION['theme']['menu_main_shadow_color']['text'] : 'none';?>;
+		-moz-box-shadow: <?php echo ($_SESSION['theme']['menu_main_shadow_color']['text'] != '') ? '0 0 5px '.$_SESSION['theme']['menu_main_shadow_color']['text'] : 'none';?>;
+		box-shadow: <?php echo ($_SESSION['theme']['menu_main_shadow_color']['text'] != '') ? '0 0 5px '.$_SESSION['theme']['menu_main_shadow_color']['text'] : 'none';?>;
+		<?php
+		echo ($_SESSION['theme']['menu_main_border_color']['text'] == '' && $_SESSION['theme']['menu_main_border_size']['text'] == '') ? "border: 0;\n" : null;
+		echo ($_SESSION['theme']['menu_main_border_color']['text'] != '') ? 'border-color: '.$_SESSION['theme']['menu_main_border_color']['text'].";\n" : null;
+		echo ($_SESSION['theme']['menu_main_border_size']['text'] != '') ? 'border-width: '.$_SESSION['theme']['menu_main_border_size']['text'].";\n" : null;
+		?>
+		-moz-border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		-webkit-border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		-khtml-border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		}
+
+	/* menu side brand container */
+	div#menu_side_brand_container {
+		position: -webkit-sticky;
+		position: sticky;
+		z-index: 99901;
+		top: 0;
+		padding: 20px;
+		margin-bottom: 10px;
+		text-align: left;
+		<?php if ($_SESSION['theme']['menu_main_background_image']['text'] != '') { ?>
+			background-image: url("<?php echo $_SESSION['theme']['menu_main_background_image']['text']; ?>");
+			background-position: 0px 0px;
+			background-repeat: repeat-y;
+		<?php } else {?>
+			background: <?php echo ($_SESSION['theme']['menu_main_background_color']['text'] != '') ? $_SESSION['theme']['menu_main_background_color']['text'] : 'rgba(0,0,0,0.90)'; ?>;
+		<?php } ?>
+		<?php
+		echo ($_SESSION['theme']['menu_main_border_color']['text'] == '' && $_SESSION['theme']['menu_main_border_size']['text'] == '') ? "border: 0;\n" : null;
+		echo ($_SESSION['theme']['menu_main_border_color']['text'] != '') ? 'border-color: '.$_SESSION['theme']['menu_main_border_color']['text'].";\n" : null;
+		echo ($_SESSION['theme']['menu_main_border_size']['text'] != '') ? 'border-width: '.$_SESSION['theme']['menu_main_border_size']['text'].";\n" : null;
+		?>
+		-moz-border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		-webkit-border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		-khtml-border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		border-radius: <?php echo ($_SESSION['theme']['menu_main_border_radius']['text'] != '') ? $_SESSION['theme']['menu_main_border_radius']['text'] : '0'; ?>;
+		}
+
+	/* menu side logo */
+	img#menu_brand_image {
+		border: none;
+		width: auto;
+		max-height: 30px;
+		max-width: 185px;
+		margin-right: 10px;
+		}
+
+	/* menu brand text */
+	.menu_brand_text {
+		color: <?php echo ($_SESSION['theme']['menu_brand_text_color']['text'] != '') ? $_SESSION['theme']['menu_brand_text_color']['text'] : 'rgba(255,255,255,0.80)'; ?>;
+		font-weight: 600;
+		white-space: nowrap;
+		}
+
+	.menu_brand_text:hover {
+		color: <?php echo ($_SESSION['theme']['menu_brand_text_color_hover']['text'] != '') ? $_SESSION['theme']['menu_brand_text_color_hover']['text'] : 'rgba(255,255,255,1.0)'; ?>;
+		}
+
+	a.menu_side_item_main {
+		display: block;
+		width: 100%;
+		padding: 10px 20px;
+		text-align: left;
+		font-family: <?php echo ($_SESSION['theme']['menu_main_text_font']['text'] != '') ? $_SESSION['theme']['menu_main_text_font']['text'] : 'arial'; ?>;
+		font-size: <?php echo ($_SESSION['theme']['menu_main_text_size']['text'] != '') ? $_SESSION['theme']['menu_main_text_size']['text'] : '10.25pt'; ?>;
+		color: <?php echo ($_SESSION['theme']['menu_main_text_color']['text'] != '') ? $_SESSION['theme']['menu_main_text_color']['text'] : '#fff'; ?>;
+		cursor: pointer;
+		}
+
+	a.menu_side_item_main:hover,
+	a.menu_side_item_main:focus,
+	a.menu_side_item_main:active {
+		color: <?php echo ($_SESSION['theme']['menu_main_text_color_hover']['text'] != '') ? $_SESSION['theme']['menu_main_text_color_hover']['text'] : '#fd9c03'; ?>;
+		background: <?php echo ($_SESSION['theme']['menu_main_background_color_hover']['text'] != '') ? $_SESSION['theme']['menu_main_background_color_hover']['text'] : 'rgba(0,0,0,1.0)'; ?>;
+		text-decoration: none;
+		}
+
+	a.menu_side_item_sub {
+		display: block;
+		width: 100%;
+		padding: 5px 20px 5px 42px;
+		text-align: left;
+		background: <?php echo ($_SESSION['theme']['menu_sub_background_color']['text'] != '') ? $_SESSION['theme']['menu_sub_background_color']['text'] : 'rgba(0,0,0,0.90)'; ?>;
+		font-family: <?php echo ($_SESSION['theme']['menu_sub_text_font']['text'] != '') ? $_SESSION['theme']['menu_sub_text_font']['text'] : 'arial'; ?>;
+		font-size: <?php echo ($_SESSION['theme']['menu_sub_text_size']['text'] != '') ? $_SESSION['theme']['menu_sub_text_size']['text'] : '10pt'; ?>;
+		color: <?php echo ($_SESSION['theme']['menu_sub_text_color']['text'] != '') ? $_SESSION['theme']['menu_sub_text_color']['text'] : '#fff'; ?>;
+		cursor: pointer;
+		}
+
+	a.menu_side_item_sub:hover,
+	a.menu_side_item_sub:focus,
+	a.menu_side_item_sub:active {
+		color: <?php echo ($_SESSION['theme']['menu_sub_text_color_hover']['text'] != '') ? $_SESSION['theme']['menu_sub_text_color_hover']['text'] : '#fd9c03'; ?>;
+		background: <?php echo ($_SESSION['theme']['menu_sub_background_color_hover']['text'] != '') ? $_SESSION['theme']['menu_sub_background_color_hover']['text'] : 'rgba(0,0,0,1.0)'; ?>;
+		text-decoration: none;
+		}
+
+
 /* BUTTONS ********************************************************************/
 
 	/* buttons */

themes/default/template.php

@@ -554,6 +554,64 @@
 				case 'fixed':
 					show_menu($menu_array, $menu_style, $menu_position);
 					echo $open_container;
+					break;
+				case 'side':
+					echo "<div id='menu_side_container'>";
+					//menu brand image/text
+						echo "<div id='menu_side_brand_container'>\n";
+						//define menu brand link
+							if (strlen(PROJECT_PATH) > 0) {
+								$menu_brand_link = PROJECT_PATH;
+							}
+							else if (!$default_login) {
+								$menu_brand_link = '/';
+							}
+						//define menu brand mark
+							$menu_brand_text = ($_SESSION['theme']['menu_brand_text']['text'] != '') ? escape($_SESSION['theme']['menu_brand_text']['text']) : "FusionPBX";
+							if ($_SESSION['theme']['menu_brand_type']['text'] == 'image' || $_SESSION['theme']['menu_brand_type']['text'] == '') {
+								$menu_brand_image = ($_SESSION['theme']['menu_brand_image']['text'] != '') ? escape($_SESSION['theme']['menu_brand_image']['text']) : PROJECT_PATH."/themes/default/images/logo.png";
+								echo "<a href='".$menu_brand_link."' style='text-decoration: none;'>";
+								echo "<img id='menu_brand_image' src='".$menu_brand_image."' title=\"".escape($menu_brand_text)."\">";
+								if ($menu_brand_text != '') { echo "<span class='menu_brand_text'>".$menu_brand_text."</span>"; }
+								echo "</a>";
+							}
+							else if ($_SESSION['theme']['menu_brand_type']['text'] == 'text') {
+								echo "<a class='menu_brand_text' href=\"".$menu_brand_link."\">".$menu_brand_text."</a>\n";
+							}
+						echo "</div>\n";
+					//main menu items
+						if (is_array($menu_array) && sizeof($menu_array) != 0) {
+							foreach ($menu_array as $menu_index_main => $menu_item_main) {
+								echo "<a class='menu_side_item_main' onclick=\"$('#sub_".$menu_item_main['menu_item_uuid']."').slideToggle(180, function() { if (!$(this).is(':hidden')) { $('.menu_side_sub').not($(this)).slideUp(180); } });\">";
+								if ($menu_item_main['menu_item_icon'] != '') {
+									echo "<i class='glyphicon ".$menu_item_main['menu_item_icon']."' style='z-index: 99800; padding-right: 8px;'></i>";
+								}
+								echo $menu_item_main['menu_language_title'];
+								echo "</a>\n";
+								//sub menu items
+									if (is_array($menu_item_main['menu_items']) && sizeof($menu_item_main['menu_items']) != 0) {
+										echo "<div id='sub_".$menu_item_main['menu_item_uuid']."' class='menu_side_sub' style='display: none;'>\n";
+										foreach ($menu_item_main['menu_items'] as $menu_index_sub => $menu_item_sub) {
+											echo "<a class='menu_side_item_sub' ".($menu_item_sub['menu_item_category'] == 'external' ? "target='_blank'" : null)." href='".$menu_item_sub['menu_item_link']."'>";
+											//if ($menu_item_main['menu_item_icon'] != '') {
+											//	echo "<i class='glyphicon ".$menu_item_main['menu_item_icon']."' style='padding-right: 8px;'></i>";
+											//}
+											echo $menu_item_sub['menu_language_title'];
+											echo "</a>\n";
+											/*
+											if ($menu_index_sub == sizeof($menu_item_main['menu_items'])) {
+												echo "<div style='height: 15px;'></div>\n";
+											}
+											*/
+										}
+										echo "</div>\n";
+									}
+							}
+							echo "<div style='height: 100px;'></div>\n";
+						}
+					echo "</div>";
+					echo "<div style='padding: 0; width: calc(100% - 225px); float: right; padding-top: 30px; text-align: center;'>"; // $open_container (modified)
+					break;
 			}
 			?>