Modify top bar and menu style

application/layouts/scripts/parts/navigation.phtml

@@ -40,7 +40,7 @@ $item = $this->navigation->keys("menu");
           <?php if ($iconClass): ?>
             <i class="<?= $iconClass; ?>"></i>
           <?php endif; ?>
-          <?= $itemName ?>
+	  <?= $itemName ?>
       </a>
     </li>
       <?php

config/modules/monitoring/menu.ini

@@ -9,28 +9,41 @@
 ;Changes.route       = "/monitoring/list/services?sort=service_last_state_change"
 ;_1                  = 1                                                             ;Spacer after this section
 
-Hosts.title     = "Hosts"
-Hosts.route     = "/monitoring/list/hosts"
-Hosts.iconClass = "icinga-icon-host-petrol"
+Hosts.title          = "Hosts"
+Hosts.route          = "/monitoring/list/hosts"
+Hosts.iconClass      = "icinga-icon-host-petrol"
 
-Services.title      = "Services"
-Services.route      = "/monitoring/list/services"
-Services.iconClass  = "icinga-icon-service-petrol"
+Services.title       = "Services"
+Services.route       = "/monitoring/list/services"
+Services.iconClass   = "icinga-icon-service-petrol"
+
+Downtimes.title      = "Downtimes"
+Downtimes.route      = "/monitoring/list/downtimes"
+Downtimes.iconClass  = "icinga-icon-down-petrol"
+
+Notifications.title  = "Notifications"
+Notifications.route  = "/monitoring/list/notifications"
+Notifications.iconClass  = "icinga-icon-notification-petrol"
+
+Comments.title       = "Comments"
+Comments.route       = "/monitoring/list/comments"
+Comments.iconClass   = "icinga-icon-comment-petrol"
+
+Contacts             = "/monitoring/list/contacts"
 
-Downtimes       = "/monitoring/list/downtimes"
-Notifications   = "/monitoring/list/notifications"
-Comments        = "/monitoring/list/comments"
-Contacts        = "/monitoring/list/contacts"
 Contact Groups  = "/monitoring/list/contactgroups"
 
-Servicegroups.title = "Servicegroups"
-Servicegroups.route = "/monitoring/list/servicegroups"
+Servicegroups.title  = "Servicegroups"
+Servicegroups.route  = "/monitoring/list/servicegroups"
+Servicegroups.iconClass   = "icinga-icon-servicegroup-petrol"
 
-Hostgroups.title    = "Hostgroups"
-Hostgroups.route    = "/monitoring/list/hostgroups"
+Hostgroups.title     = "Hostgroups"
+Hostgroups.route     = "/monitoring/list/hostgroups"
+Hostgroups.iconClass = "icinga-icon-hostgroup-petrol"
 
-History.title   = "History"
-History.route   = "/monitoring/list/eventhistory"
+History.title        = "History"
+History.route        = "/monitoring/list/eventhistory"
+History.iconClass    = "icinga-icon-history-petrol"
 
-Performance.title   = "Performance"
-Performance.route   ="/monitoring/process/performance"
+Performance.title    = "Performance"
+Performance.route    ="/monitoring/process/performance"

public/css/icinga/main.less

@@ -28,7 +28,7 @@
 @white : white;
 @black : #262625;
 @petrol : #049baf;
-@lightgrey : #ddd;
+@lightgrey : #dddddd;
 @darkgrey : #555555;
 
 /* =========================================================================
@@ -151,7 +151,7 @@ p {
    ========================================================================= */
 
 .icinga-logo {
-  background: transparent url("@{baseurl}/img/logo_icinga.png") center center no-repeat;
+  background: transparent url("@{baseurl}/img/logo_icinga-inv.png") center center no-repeat;
   width: 94px;
   height: 33px;
   display: block;
@@ -465,4 +465,4 @@ select.input-sm {
   width:45%;
   padding:1%;
   margin:1%;
-}
+}

public/css/icinga/navigation.less

@@ -23,9 +23,15 @@
  * @author    Icinga Development Team <info@icinga.org>
  */
 
+@white:      #ffffff;
+@lightgrey : #dddddd;
+
 /* =========================================================================
    Icinga Navigation
    ========================================================================= */
+.navbar {
+  background-image: linear-gradient(to bottom, #444444, #333333);
+}
 
 .navigation-tile-mixin {
   border-style: solid;
@@ -41,7 +47,6 @@
 }
 
 .nav-stacked {
-  background-color: @lightgrey;
 }
 
 .icinga-subnavigation {
@@ -49,26 +54,34 @@
 }
 
 .nav-stacked > li {
-  padding-left: 8px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  border-bottom: 1px dotted @petrol;
-  border-right: 1px dotted @petrol;
-
+  padding-left: 4px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid @lightgrey;
+  border-right: 1px solid @lightgrey;
+  font-size: 11px;
+  background-color: rgb(248, 248, 248);
+  background-image: linear-gradient(rgb(255, 255, 255) 0px, rgb(248, 248, 248) 100%);
 }
+
+.nav-stacked > li > a {
+  letter-spacing: 1px;
+  padding-top: 0px;
+  padding-bottom: 3px;
+}
+
 .nav-stacked > li:first-child {
-  border-top: 1px dotted @petrol;
 }
 
 .icinga-subnavigation > li {
   padding-top: 8px;
   padding-bottom: 8px;
-  border-bottom: 1px dotted @petrol;
-  border-right: 1px dotted @petrol;
+  border-bottom: 1px solid @lightgrey;
+  border-right: 1px solid @lightgrey;
 }
 
 ul.icinga-subnavigation {
-  border-bottom: 1px dotted @petrol;
+  border-bottom: 1px solid @lightgrey;
   margin-left: 0;
   padding-left: 15px;
 }
@@ -81,9 +94,9 @@ ul.icinga-subnavigation {
 
 .nav-stacked > li > a,
 .icinga-subnavigation > li > a {
-  padding-left: 40px;
+  padding-left: 20px;
   padding-right: 3px;
-  border-left: 6px solid @petrol;
+  /* border-left: 6px solid @petrol; */
   display: inline-block;
 }
 
@@ -108,8 +121,8 @@ ul.icinga-subnavigation {
 
 .nav-stacked > li.active,
 .icinga-subnavigation > li.active {
-  background-color: @white;
-  border-right: 0;
+  background: none;
+  border-right: none;
 }
 
 .badge-container-nav {