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

…rs (#7256)

* First mobile version for Centreon 18.10

* Rearrange the files.

Update the translation of the menu.
Rearrange the menu icon and the centreon logo.
Retrieves the google font and the css file instead of importing them when loading.

* Keep Valentin updates.

* Fix css and some coding style errors.

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');
+}