New menu, still unfinished

application/layouts/scripts/body.phtml

@@ -2,7 +2,7 @@
 <div class="row">
 
   <!-- Only required for left/right tabs -->
-  <div class="col-sm-12 col-xs-12 col-md-2 col-lg-2">
+  <div class="col-sm-12 col-xs-12 col-md-2 col-lg-2" id="menu">
     <?php echo $this->render('parts/navigation.phtml') ?>
   </div>
 

application/layouts/scripts/parts/menu.phtml

@@ -1,38 +1,28 @@
-<?= $this->sub ? '<ul>' : '<ul class="nav nav-stacked" role="navigation" id="icinganavigation">' ?>
+<ul>
-    <?php foreach ($this->items as $item): ?>
-        <?php
-        $itemClass = '';
-        if ($this->sub) {
-            $itemClass .= 'submenu ';
-        }
-        if ($this->href($this->url) === $this->href($item->getUrl())) {
-            $itemClass .= 'active ';
-        }
-        ?>
-        <li <?php if (!empty($itemClass)): ?>class="<?= $itemClass ?>"<?php endif ?>>
-            <?php if($item->getUrl()): ?>
-                <a href="<?= $this->href($item->getUrl()); ?>">
-            <?php endif; ?>
-            <?php
-            if ($icon = $item->getIcon()) {
-                echo $this->img($icon, array('height' => '16px', 'width' => '16px'));
-            }
-            ?>
-            <?php if ($iconClass = $item->getIconClass()): ?>
-            <i class="<?= $iconClass ?>"></i>
-            <?php endif ?>
-            <?= $item->getTitle();?>
-            <?php if($item->getUrl()): ?>
-                </a>
-            <?php endif; ?>
 <?php
+
+foreach ($this->items as $item) {
+
+    printf(
+        '  <li%s><a href="%s">%s%s</a>',
+        $this->href($this->url) === $this->href($item->getUrl()) ? ' class="active"' : '',
+        $item->getUrl() ? $this->href($item->getUrl()) : '#',
+        $item->getIcon() ? $this->img(
+            $item->getIcon(),
+            array('height' => '16px', 'width' => '16px')
+        ) . ' ' : '',
+        $item->getTitle()
+    );
+
     if ($item->hasChildren()) {
         echo $this->partial(
             'parts/menu.phtml',
-                    array('items' => $item->getChildren(), 'sub' => true, 'url' => $this->url)
+            array('items' => $item->getChildren(), 'url' => $this->url)
         );
     }
+
+    echo "</li>\n";
+}
+
 ?>
-        </li>
-    <?php endforeach ?>
 </ul>

application/layouts/scripts/parts/navigation.phtml

@@ -3,15 +3,13 @@
 $url = Icinga\Web\Url::fromRequest()->getRelativeUrl();
 $menu = Icinga\Web\Menu::fromConfig();
 
-if ($this->auth()->isAuthenticated()): 
+if ($this->auth()->isAuthenticated()) {
     echo $this->partial(
        'parts/menu.phtml',
         array(
             'items' => $menu->getChildren(),
-            'sub'   => false,
             'url'   => $url
         )
     );
-endif;
+}
 
-?>

application/layouts/scripts/parts/topbar.phtml

@@ -1,7 +1,7 @@
 <?php
 use Icinga\Web\Topbar;
 ?>
-<nav class="navbar navbar-default navbar-fixed-top" id="icingatopbar" role="navigation">
+<nav class="navbar-fixed-top" id="icingatopbar" role="navigation">
     <div class="navbar-header">
         <a href="<?= $this->baseUrl('/') ?>" class="navbar-brand icinga-logo">Icinga</a>
     </div>

config/menu.ini

@@ -1,17 +1,15 @@
-[Home]
-title       = "Home"
-url         = "/index/welcome"
-icon        = "/img/icons/down_petrol.png"
-priority    = 1
-
-[Configuration]
-title       = "Configuration"
-url         = "/config/index"
-icon_class  = "icinga-icon-configuration-petrol"
-priority    = 2
-
 [Dashboard]
 title       = "Dashboard"
-url         = "/dashboard/index"
+url         = "dashboard"
-icon        = "/img/icons/dashboard_petrol.png"
+icon        = "img/icons/dashboard.png"
-priority    = 3
+priority    = 10
+
+[System]
+icon = img/icons/configuration.png
+priority = 200
+
+[System.Configuration]
+title       = "Configuration"
+url         = "config/index"
+
+

config/modules/monitoring/menu.ini

@@ -1,43 +1,76 @@
-[Hosts]
+
+[Problems]
+priority = 20
+icon = "img/icons/error.png"
+
+[Problems.Unhandled Hosts]
+icon = "img/icons/host.png"
+priority = 50
+url = "monitoring/list/hosts?host_problem=1&host_handled=0"
+
+[Problems.Unhandled Services]
+icon = "img/icons/service.png"
+priority = 50
+url = "monitoring/list/services?service_problem=1&service_handled=0"
+
+[Problems.Current Downtimes]
+url = "monitoring/list/downtimes?downtime_is_in_effect=1"
+icon  = "img/icons/down.png"
+
+[Overview]
+priority = 30
+icon  = "img/icons/hostgroup.png"
+
+[Overview.Hosts]
 title = "Hosts"
-url         = "/monitoring/list/hosts"
+url   = "monitoring/list/hosts"
-icon_class  = "icinga-icon-host-petrol"
+icon  = "img/icons/host.png"
+priority = 50
 
-[Services]
+[Overview.Services]
 title = "Services"
-url         = "/monitoring/list/services"
+url   = "monitoring/list/services"
-icon_class  = "icinga-icon-service-petrol"
+icon  = "img/icons/service.png"
+priority = 50
 
-[Downtimes]
+[Overview.Servicegroups]
-title       = "Downtimes"
-url         = "/monitoring/list/downtimes"
-icon_class  = "icinga-icon-down-petrol"
-
-[Notifications]
-title       = "Notifications"
-url         = "/monitoring/list/notifications"
-icon_class  = "icinga-icon-notification-petrol"
-
-[Comments]
-title       = "Comments"
-url         = "/monitoring/list/comments"
-icon_class  = "icinga-icon-comment-petrol"
-
-[Servicegroups]
 title = "Servicegroups"
-url         = "/monitoring/list/servicegroups"
+url   = "monitoring/list/servicegroups"
-icon_class  = "icinga-icon-servicegroup-petrol"
+icon  = "img/icons/servicegroup.png"
+priority = 60
 
-[Hostgroups]
+[Overview.Hostgroups]
 title = "Hostgroups"
-url         = "/monitoring/list/hostgroups"
+url   = "monitoring/list/hostgroups"
-icon_class  = "icinga-icon-hostgroup-petrol"
+icon  = "img/icons/hostgroup.png"
+priority = 60
+
+[Overview.Downtimes]
+title = "Downtimes"
+url   = "monitoring/list/downtimes"
+icon  = "img/icons/down.png"
+priority = 70
+
+[Overview.Comments]
+title = "Comments"
+url   = "monitoring/list/comments"
+icon  = "img/icons/comment.png"
+priority = 70
 
 [History]
-title       = "History"
+icon  = "img/icons/history.png"
-url         = "/monitoring/list/eventhistory"
-icon_class  = "icinga-icon-history-petrol"
 
-[Performance]
+[History.Notifications]
+title = "Notifications"
+url   = "monitoring/list/notifications"
+icon  = "img/icons/notification.png"
+
+[History.Events]
+title = "All Events"
+url   = "monitoring/list/eventhistory"
+icon  = "img/icons/history.png"
+
+[System.Performance]
 title = "Performance"
-url     = "/monitoring/process/performance"
+url   = "monitoring/process/performance"
+

public/css/icinga/menu.less

@@ -0,0 +1,76 @@
+#menu {
+  background: #999;
+}
+
+#menu a {
+  color: #121212;
+}
+
+#menu .separator {
+  background-color: #888;
+}
+
+#menu li {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
+#menu > ul > li {
+  border-bottom: 2em solid #888;
+}
+
+#menu > ul > li.active {
+  background-color: white;
+  padding-left: 0.5em;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+#menu > ul > li.active > a {
+  color: #121212;
+}
+
+#menu > ul > li {
+  border-bottom: 0.12em solid #888;
+}
+
+#menu > ul > li li {
+  font-size: 0.8em;
+  padding-left: 1.875em;
+}
+
+
+/* Collapsed menu item color */
+#menu > ul > li > a {
+  color: #f5f5f5;
+}
+
+/* Sub item color */
+#menu .active ul li a {
+  color: #a6a6a6;
+}
+
+#menu ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+#menu ul li a {
+  display: block;
+  line-height: 2.5em;
+  padding-left: 0.7em;
+  text-decoration: none;
+}
+
+#menu > ul > li img {
+  width: 1em;
+  height: 1em;
+  border: none;
+  margin-bottom: -0.125em;
+  margin-right: 0.5em;
+}
+
+#menu ul ul li a {
+  line-height: 1em;
+  margin-bottom: 1em;
+}

public/css/icinga/topbar.css

@@ -0,0 +1,8 @@
+#icingatopbar {
+  background-color: #555;
+  color: #d0d0d0;
+}
+
+#icingatopbar .nav a {
+  color: #d0d0d0;
+}