fix(menu): Fixing an issue with the menu when loaded by mobile browsers

www/Themes/Centreon-2/MobileMenu/css/material_icons.css

@@ -0,0 +1,22 @@
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(../fonts/material_icons.woff2) format('woff2');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}

www/Themes/Centreon-2/MobileMenu/css/menu.css

@@ -0,0 +1,141 @@
+.nav-top {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	position: fixed;
+	z-index: 101;
+	padding: 10px 20px;
+	width: 100%;
+	height: 50px;
+	background-color: #0072ce;
+}
+
+.nav-top .logo {
+	display: flex;
+	position: fixed;
+	z-index: 102;
+	right:20px;
+	width: 150px;
+	height: 50px;
+	background-image: url("/centreon/img/centreon_white.png");
+	background-position: 98% center;
+	background-repeat: no-repeat;
+	background-size: 150px;
+}
+
+.nav-top .hamburger {
+	margin-left: 0px;
+	color: #fff;
+	cursor: pointer;
+}
+
+.nav-drill {
+	font-family: "Fira Sans", Arial, sans-serif;
+	font-size: 16px;
+	line-height: 1.875em;
+	margin-top: 50px;
+	-webkit-transform: translateX(0%);
+	transform: translateX(0%);
+}
+
+.nav-is-toggled .nav-drill {
+	-webkit-transform: translateX(100%);
+	transform: translateX(100%);
+}
+
+.nav-is-toggled::after {
+	opacity: 1;
+	visibility: visible;
+}
+
+.nav-drill {
+	display: flex;
+	position: fixed;
+	z-index: 100;
+	top: 0;
+	left: -250px;
+	width: 250px;
+	height: 100vh;
+	background-color: #fff;
+	overflow-y: auto;
+	overflow-x: hidden;
+	-webkit-overflow-scrolling: touch;
+	transition: 0.45s;
+}
+
+.nav-items {
+	width: 250px;
+}
+
+.nav-items a {
+	text-decoration: none;
+}
+
+.nav-level-1 {
+	border-right: 1px solid #0072ce;
+}
+
+.nav-item:not(:last-child) {
+	border-bottom: solid 1px #cee9ff;
+}
+
+.nav-link {
+	display: block;
+	padding: 0.875em 1em;
+	background-color: #fff;
+	color: #0072ce;
+	font-size: 1rem;
+	line-height: 1.5em;
+	font-weight: 300;
+}
+
+.nav-expand-content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	-webkit-transform: translateX(100%);
+	transform: translateX(100%);
+	background-color: #cee9ff;
+	transition: 0.3s;
+	visibility: hidden;
+}
+
+.nav-expand-content .nav-item:not(:last-child) {
+	border-bottom: solid 1px #0072ce;
+}
+
+.nav-expand-content .nav-link {
+	background-color: #cee9ff;
+}
+
+.nav-expand-content .nav-back-link {
+	display: flex;
+	align-items: center;
+	background-color: #0072ce !important;
+	color: #fff;
+}
+
+.nav-expand-content .nav-back-link::before {
+	content: "chevron_left";
+	margin-right: 0.5em;
+	font-family: "Material Icons";
+}
+
+.nav-expand-link {
+	display: flex;
+	justify-content: space-between;
+}
+
+.nav-expand-link::after {
+	content: "chevron_right";
+	flex: 0 1 auto;
+	font-family: "Material Icons";
+}
+
+.nav-expand.active > .nav-expand-content {
+	-webkit-transform: translateX(0);
+	transform: translateX(0);
+	visibility: visible;
+}

www/Themes/Centreon-2/MobileMenu/js/menu.js

@@ -0,0 +1,32 @@
+var isMobile = true;
+
+$(document).ready(function() {
+	var navExpand = [].slice.call(document.querySelectorAll('.nav-expand'));
+	var backLink =
+		'<li class="nav-item">\n\t'
+		+ '<a class="nav-link nav-back-link" href="#">'
+		+ '\n\t\t' + text_back + '\n\t'
+		+ '</a>\n</li>';
+
+	navExpand.forEach(function (item) {
+		item.querySelector('.nav-expand-content')
+			.insertAdjacentHTML('afterbegin', backLink);
+		item.querySelector('.nav-link')
+			.addEventListener('click', function () {
+				return item.classList.add('active');
+			});
+		item.querySelector('.nav-back-link')
+			.addEventListener('click', function () {
+				return item.classList.remove('active');
+			});
+	});
+
+	document.getElementById('ham')
+		.addEventListener('click', function () {
+			document.body.classList.toggle('nav-is-toggled');
+		});
+	$('nav.nav-drill').on('click', function(event) {
+		event.stopImmediatePropagation();
+	});
+	$('section.main').css({'padding-top': '50px'});
+});

www/include/common/mobile_menu.php

@@ -0,0 +1,31 @@
+<header class="nav-top">
+    <span class="hamburger material-icons" id="ham">menu</span>
+    <div class="logo"></div>
+</header>
+<nav class="nav-drill">
+    <ul class="nav-items nav-level-1">
+        <?php foreach ($treeMenu as $index => $subMenu): ?>
+        <li class="nav-item <?php if(!empty($subMenu['children'])): ?>nav-expand<?php endif; ?>">
+            <a class="nav-link <?php if(!empty($subMenu['children'])): ?>nav-expand-link<?php endif; ?>" href="#">
+                <?= $subMenu['label'] ?>
+            </a>
+            <?php if(!empty($subMenu['children'])): ?>
+                <ul class="nav-items nav-expand-content">
+                <?php foreach ($subMenu['children'] as $index2 => $subMenu2): ?>
+                    <li class="nav-item">
+                        <a class="nav-link" href="main.php?p=<?= substr($index2, 1) ?>">
+                            <?= $subMenu2['label'] ?>
+                        </a>
+                    </li>
+                <?php endforeach; ?>
+                </ul>
+            <?php endif; ?>
+        </li>
+        <?php endforeach; ?>
+        <li class="nav-item">
+            <a class="nav-link" href="index.php?disconnect=1">
+                <?= gettext('Logout') ?>
+            </a>
+        </li>
+    </ul>
+</nav>

www/include/core/footer/footerPart.php

@@ -293,8 +293,8 @@ function parentHrefUpdate(href) {
       function(e) {
         var href = jQuery(this).attr('href');
         var isHandled = jQuery(this).is('[onload]') ||
-                jQuery(this).is('[onclick]') ||
-                (href.match(/^javascript:/) !== null)
+          jQuery(this).is('[onclick]') ||
+          (href.match(/^javascript:/) !== null)
         ;
 
         // if it's a relative path, we can use the default redirection
@@ -311,7 +311,10 @@ function(e) {
               window.open(href);
             // If it's an internal link, we remove header to avoid inception
             } else {
-              href = href.replace('main.php', 'main.get.php');
+              // isMobile is declared in the menu.js file
+              if (typeof isMobile === 'undefined' || isMobile !== true) {
+                  href = href.replace('main.php', 'main.get.php');
+              }
               window.location.href = href;
             }
 

www/include/core/header/htmlHeader.php

@@ -43,13 +43,15 @@
 
 <!DOCTYPE html>
 <html lang="<?php echo $centreon->user->lang; ?>">
-<head>
     <title>Centreon - IT & Network Monitoring</title>
     <link rel="shortcut icon" href="./img/favicon.ico"/>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="Generator" content="Centreon - Copyright (C) 2005 - 2017 Open Source Matters. All rights reserved."/>
     <meta name="robots" content="index, nofollow"/>
-
+    <?php if ($isMobile): ?>
+    <link href="./Themes/Centreon-2/MobileMenu/css/material_icons.css" rel="stylesheet" type="text/css"/>
+    <link href="./Themes/Centreon-2/MobileMenu/css/menu.css" rel="stylesheet" type="text/css"/>
+    <?php endif; ?>
     <link href="./include/common/javascript/jquery/plugins/jpaginator/jPaginator.css" rel="stylesheet" type="text/css"/>
     <link href="./Themes/Centreon-2/style.css" rel="stylesheet" type="text/css"/>
     <link href="./Themes/Centreon-2/centreon-loading.css" rel="stylesheet" type="text/css"/>
@@ -117,6 +119,12 @@
     <script src="./include/views/graphs/javascript/centreon-status-chart.js"></script>
     <script src="./include/common/javascript/moment-with-locales.min.2.21.js"></script>
     <script src="./include/common/javascript/moment-timezone-with-data.min.js"></script>
+    <?php if ($isMobile): ?>
+    <script type="text/javascript">
+      var text_back = '<?= gettext('Back') ?>'
+    </script>
+    <script src="./Themes/Centreon-2/MobileMenu/js/menu.js"></script>
+    <?php endif; ?>
     <?php
 
     global $search, $search_service;
@@ -202,7 +210,14 @@
     <script src="./include/common/javascript/xslt.js" type="text/javascript"></script>
 </head>
 <body>
+
 <?php if (!isset($_REQUEST['iframe']) || (isset($_REQUEST['iframe']) && $_REQUEST['iframe'] != 1)) { ?>
     <script type="text/javascript" src="./lib/wz_tooltip/wz_tooltip.js"></script>
 <?php } ?>
-<div style="display:none" id="header"></div>
+<div style="display:none" id="header"></div>
+
+<?php
+// Showing the mobile menu if it's a mobile browser
+if ($isMobile) {
+    require(_CENTREON_PATH_ . 'www/include/common/mobile_menu.php');
+}

www/main.get.php

@@ -78,7 +78,9 @@
     }
 }
 
-$p = $inputs["p"];
+if (is_null($p)) {
+    $p = $inputs["p"];
+}
 $o = $inputs["o"];
 $min = $inputs["min"];
 $type = $inputs["type"];

www/main.php

@@ -33,6 +33,8 @@
  *
  */
 
+use CentreonLegacy\Core\Menu\Menu;
+
 // Set logging options
 if (defined("E_DEPRECATED")) {
     ini_set("error_reporting", E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED);
@@ -92,6 +94,15 @@
 include_once("./include/common/common-Func.php");
 include_once("./include/core/header/header.php");
 
-require_once _CENTREON_PATH_ . "/bootstrap.php";
+$userAgent = $_SERVER['HTTP_USER_AGENT'];
+$isMobile = strpos($userAgent, 'Mobil') !== false;
 
-include('./index.html');
+require_once _CENTREON_PATH_ . "/bootstrap.php";
+if ($isMobile) {
+    $db = $dependencyInjector['configuration_db'];
+    $menu = new Menu($db, $_SESSION['centreon']->user);
+    $treeMenu = $menu->getMenu();
+    require_once 'main.get.php';
+} else {
+    include('./index.html');
+}