Introduce dashboard for navigation items

application/controllers/NavigationController.php

@@ -5,6 +5,7 @@ namespace Icinga\Controllers;
 
 use Exception;
 use Icinga\Application\Config;
+use Icinga\Application\Icinga;
 use Icinga\Exception\NotFoundError;
 use Icinga\Data\DataArray\ArrayDatasource;
 use Icinga\Data\Filter\FilterMatchCaseInsensitive;
@@ -407,4 +408,25 @@ class NavigationController extends Controller
             $this->httpNotFound(sprintf($this->translate('Navigation item "%s" not found'), $form->getValue('name')));
         }
     }
+
+    public function dashboardAction()
+    {
+        $name = $this->params->getRequired('name');
+
+        $this->getTabs()->add('dashboard', array(
+            'active'    => true,
+            'label'     => ucwords($name),
+            'url'       => Url::fromRequest()
+        ));
+
+        $menu = Icinga::app()->getMenu();
+
+        $navigation = $menu->findItem($name);
+
+        if ($navigation === null) {
+            $this->httpNotFound($this->translate('Navigation not found'));
+        }
+
+        $this->view->navigation = $navigation;
+    }
 }

application/views/scripts/navigation/dashboard.phtml

@@ -0,0 +1,16 @@
+<div class="controls">
+    <?= $tabs ?>
+</div>
+<div class="content">
+    <?php foreach ($navigation as $item): /** @var \Icinga\Web\Navigation\NavigationItem $item */?>
+    <a class="dashboard-link" href="<?= $this->url($item->getUrl(), $item->getUrlParameters()) ?>">
+        <div class="link-icon">
+            <?= $this->icon($item->getIcon() ?: 'forward', null, array('aria-hidden' => true)) ?>
+        </div>
+        <div class="link-meta">
+            <div class="link-label"><?= $this->escape($item->getLabel()) ?></div>
+            <div class="link-description"><?= $this->escape($item->getDescription() ?: sprintf('Open %s', strtolower($item->getLabel()))) ?></div>
+        </div>
+    </a>
+    <?php endforeach ?>
+</div>

public/css/icinga/widgets.less

@@ -44,6 +44,56 @@
   }
 }
 
+.dashboard-link {
+  .clearfix();
+  display: block;
+  max-width: 100%;
+  vertical-align: middle;
+  padding: 1em;
+  width: 36em;
+
+  &:hover {
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+
+    -webkit-background-clip: padding-box;
+       -moz-background-clip: padding;
+            background-clip: padding-box;
+
+    -webkit-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+       -moz-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+            box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
+
+    background-color: @tr-hover-color;
+    text-decoration: none;
+  }
+}
+
+.link-meta {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.link-label {
+  font-weight: @font-weight-bold;
+}
+
+.link-description {
+  color: @text-color-light;
+}
+
+.link-icon {
+  display: table-cell;
+  padding-right: .5em;
+  vertical-align: middle;
+
+  > i {
+    font-size: 3em;
+    opacity: 0.7;
+  }
+}
+
 table.historycolorgrid {
   font-size: 1.5em;
 }