Increase header logo height

public/css/icinga/layout-structure.less

@@ -13,19 +13,22 @@ html {
 }
 
 #header {
-  height: 3em;
-  left: 0;
-  position: fixed;
-  top: 0;
   width: 100%;
+
+  padding-bottom: 3em;
+  position: fixed;
+  left: 0;
+  top: 0;
+
 }
 
 #sidebar {
+  width: 12em;
+
+  position: fixed;
   bottom: 0;
   left: 0;
-  position: fixed;
-  top: 2.25em;
-  width: 12em;
+  top: 4.5em;
 }
 
 #main {

public/css/icinga/layout.less

@@ -37,14 +37,18 @@
 }
 
 #header-logo-container {
-  height: 2.667em;
-  margin: .1667em 0 .1667em .7em;
-  width: 100px;
+  background: inherit;
+  height: 6em;
+  padding: 1.25em;
+  width: 16em;
+  position: fixed;
+  left: 0;
+  margin-top: -3em;
 }
 
 #header-logo {
   background-image: url('../img/icinga-logo.svg');
-  background-position: left center;
+  background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
   display: block;
@@ -238,6 +242,12 @@ html.no-js .controls > .tabs {
 
 // Collpased sidebar
 #layout.sidebar-collapsed {
+  #header-logo-container {
+    height: 3.167em;
+    padding: 0.25em 0.125em;
+    width: 4em;
+  }
+
   #header-logo {
     background-image: url('../img/icinga-logo-compact.svg');
   }
@@ -247,6 +257,7 @@ html.no-js .controls > .tabs {
   }
 
   #sidebar {
+    top: 2.25em;
     width: 3em;
   }
 

public/js/icinga/behavior/navigation.js

@@ -215,7 +215,7 @@
 
         if ($flyout.length) {
             $flyout.css({
-                top: $target.position().top - parseInt($flyout.css('margin-top'), 10)
+                top: $target.offset().top + $target.outerHeight()
             });
         }
     };

public/js/icinga/ui.js

@@ -579,7 +579,7 @@
 
             if (typeof $container === 'undefined') {
                 var $header = $('#header');
-                var $headerLogo = $('#header-logo');
+                var $headerLogo = $('#header-logo-container');
                 var $main = $('#main');
                 var $search = $('#search');
                 var $sidebar = $('#sidebar');
@@ -595,8 +595,7 @@
                             display: 'none'
                         });
                         $main.css({
-                            top: $header.height() + $sidebar.outerHeight(),
-                            zIndex: 2
+                            top: $header.outerHeight() + $sidebar.outerHeight()
                         });
                         $sidebar
                             .on(
@@ -611,16 +610,14 @@
                         this.mobileMenu = true;
                     }
                 } else {
+                    $headerLogo.css({
+                        top: $header.css('height')
+                    });
                     $main.css({
-                        top: $header.css('height'),
-                        zIndex: ''
+                        top: $header.css('height')
                     });
                     $sidebar.css({
-                        top: $header.css('height'),
-                        zIndex: ''
-                    });
-                    $header.css({
-                        height: $header.height() + 'px'
+                        top: $headerLogo.offset().top + $headerLogo.outerHeight()
                     });
 
                     if (this.mobileMenu) {
@@ -657,7 +654,7 @@
                 var $controls = $(this);
                 var $fakeControls = $controls.next('.fake-controls');
                 $controls.css({
-                    top: $container.offset().top,
+                    top: $container.offsetParent().position().top,
                     width: $fakeControls.outerWidth()
                 });
                 $fakeControls.height($controls.height());