Die Sidebar hat ein neues einfacheres Design. Die less-Dateien sind teilweise vereinfacht

resources/assets/less/metager/sidebar.less

 /* Navigations-Seitenleiste */
 
-.sideBar {
+.sidebar {
+    border-left: 1px solid #ccc;
+    box-shadow: 0px 1px 1.5px 1px #c0c0c0;
+    /**/
     position: fixed;
     display: block;
     top: 0px;
     right: -270px;
     width: 270px;
     height: 100%;
-    padding-top: 70px;
+    padding-top: 55px;
     overflow: hidden;
     overflow-y: auto;
-    z-index: 999;
+    z-index: 1;
     background-color: white;
     transition: 0.5s;
     border-left: none;
-    &>label#closeSidebar {
-        position: absolute;
-        font-size: 36px;
-        top: 0px;
-        right: 20px;
-        color: grey;
-        &:after {
-            content: "×";
-        }
-        &:hover {
-            color: @metager-orange;
-        }
-    }
     &>ul {
-        padding-top: 20%;
+        padding-top: 20px;
+        padding-left: 0;
+        list-style: none;
+        margin-left: -5px;
     }
-    #metager-static-nav-list>li {
+    .sidebar-list>li {
         width: 100%;
-        padding-top: 3%;
-        padding-bottom: 3%;
-        border-bottom: 1px solid LightGray;
+        padding: 10px 0px;
         &:hover {
             background-color: @color-almost-white;
         }
+        &>label,
+        &>a {
+            &:focus {
+                outline: none;
+            }
+            &>i.fa {
+                width: 30px;
+            }
+        }
         &>label {
             font-size: 16px;
             font-weight: normal;
@@ -57,19 +57,17 @@
         max-height: 0px;
         text-align: left;
         list-style-type: none;
-        z-index: 1000;
-        float: left;
+        z-index: 3;
         overflow: hidden;
         transition: 0.5s ease;
         &>li>a {
             display: block;
-            font-size: 12px;
-            padding: 3px 20px;
+            font-size: 13px;
+            padding: 6px 20px;
             width: 100%;
             clear: both;
             font-weight: normal;
             line-height: 1.42857143;
-            border-top: 1px solid LightGray;
             margin-left: 2px;
             &:hover {
                 text-decoration: none;
@@ -112,12 +110,12 @@
         left: 90%;
         margin-top: 8px;
     }
-    input.sideBarCheckbox {
+    input.sidebarCheckbox {
         display: none;
         &:checked {
             &~.metager-dropdown-menu {
                 max-height: 1000px;
-                padding: 5px 0;
+                padding: 5px 0px 0px 0px;
             }
             &~label>.caret {
                 border-top: 0 solid;
@@ -136,10 +134,15 @@
     }
 }
 
-input#sideBarToggle:checked {
-    &~.sideBar {
+input#sidebarToggle:checked {
+    &~.sidebar {
         right: 0px;
     }
+    &~.openSidebar {
+        &:after {
+            content: "×";
+        }
+    }
 }
 
 .openSidebar {
@@ -147,7 +150,7 @@ input#sideBarToggle:checked {
         position: fixed;
         top: 23px;
         right: 25px;
-        z-index: 998;
+        z-index: 2;
     }
     font-size: 36px;
     line-height: 23px;
@@ -163,13 +166,13 @@ input#sideBarToggle:checked {
 }
 
 @media (max-width: @screen-xs-max) {
-    .sideBar {
+    .sidebar {
         right: -90%;
         width: 90%;
         overflow: auto;
-    }
-    #metager-static-nav-list:target {
-        max-height: 1000px;
+        .sidebar-list {
+            max-height: 1000px;
+        }
     }
     ul.metager-dropdown-menu {
         position: inherit;

resources/assets/less/metager/variables.less

@@ -9,7 +9,7 @@
 @color-almost-black: mix(@color-white, @color-black, 10%);
 @color-black: black;
 // General Background Color
-@background-color: white;
+@background-color: #FAFAFA;
 // Signal Colors
 @brand-success: #5cb85c;
 @brand-info: #FB0;

resources/views/parts/sidebar-opener.blade.php

-<label class="openSidebar navigation-element {{$class or ''}}" for="sideBarToggle"></label>
\ No newline at end of file
+<label class="openSidebar navigation-element {{$class or ''}}" for="sidebarToggle"></label>

resources/views/parts/sidebar.blade.php

-<input id="sideBarToggle" style="display: none;" type="checkbox">
-<div class="sideBar">
-  <label class="navigation-element" id="closeSidebar" for="sideBarToggle"></label>
+<input id="sidebarToggle" class="hidden" type="checkbox">
+<div class="sidebar">
   <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
     <p>MetaGer</p>
   </a>
-  <ul id="metager-static-nav-list" class="list-inline pull-right">
+  <ul class="sidebar-list">
     <li @if ( !isset($navbarFocus) || $navbarFocus === 'suche') class="active" @endif >
       <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="200" id="navigationSuche">
         <i class="fa fa-search" aria-hidden="true"></i>
@@ -12,7 +11,7 @@
       </a>
     </li>
     <li @if (isset($navbarFocus) && $navbarFocus === 'dienste') class="metager-dropdown active" @else class="metager-dropdown" @endif >
-      <input id="servicesToggle" class="sideBarCheckbox" type="checkbox">
+      <input id="servicesToggle" class="sidebarCheckbox" type="checkbox">
         <label for="servicesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" tabindex="225">
           <i class="fa fa-wrench" aria-hidden="true"></i>
           <span>&nbsp;{{ trans('sidebar.nav15') }}</span>
@@ -52,7 +51,7 @@
       </a>
     </li>
     <li @if (isset($navbarFocus) && $navbarFocus === 'hilfe') class="metager-dropdown active" @else class="metager-dropdown" @endif >
-      <input id="helpToggle" class="sideBarCheckbox" type="checkbox">
+      <input id="helpToggle" class="sidebarCheckbox" type="checkbox">
       <label for="helpToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationHilfe" tabindex="216">
         <i class="fa fa-info-circle" aria-hidden="true"></i>
         <span>&nbsp;{{ trans('sidebar.nav20') }}</span>
@@ -68,7 +67,7 @@
       </ul>
     </li>
     <li @if (isset($navbarFocus) && $navbarFocus === 'foerdern') class="metager-dropdown active" @else class="metager-dropdown" @endif >
-      <input id="donationToggle" class="sideBarCheckbox" type="checkbox">
+      <input id="donationToggle" class="sidebarCheckbox" type="checkbox">
       <label for="donationToggle" class="metager-dropdown-toggle navigation-element" tabindex="201">
         <i class="fa fa-money" aria-hidden="true"></i>
         <span>&nbsp;{{ trans('sidebar.nav16') }}</span>
@@ -92,7 +91,7 @@
       </ul>
     </li>
     <li @if (isset($navbarFocus) && $navbarFocus === 'kontakt') class="metager-dropdown active" @else class="metager-dropdown" @endif >
-      <input id="contactToggle" class="sideBarCheckbox" type="checkbox">
+      <input id="contactToggle" class="sidebarCheckbox" type="checkbox">
       <label for="contactToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationKontakt" tabindex="219">
         <i class="fa fa-comments-o" aria-hidden="true"></i>
         <span>&nbsp;{{ trans('sidebar.nav18') }}</span>
@@ -117,7 +116,7 @@
       </ul>
     </li>
     <li class="metager-dropdown">
-      <input id="languagesToggle" class="sideBarCheckbox" type="checkbox">
+      <input id="languagesToggle" class="sidebarCheckbox" type="checkbox">
       <label for="languagesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationSprache" tabindex="235">
         <i class="fa fa-globe" aria-hidden="true"></i>
         <span>&nbsp;{{ trans('sidebar.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})</span>