Hide menu scrollbar in favor of a shadow as indicator

The menu scrollbar is no longer visible, but a shadow above #header-security acts as indicator if there is still items to scroll.

Resources/public/javascript/admin.js

@@ -0,0 +1,18 @@
+$(function () {
+    var hnav = document.getElementById('header-nav');
+    $(hnav).bind('scroll', dropSidemenuShadow);
+    $(window).bind('resize', function(){
+        dropSidemenuShadow.apply(hnav);
+    });
+    dropSidemenuShadow.apply(hnav);
+});
+
+function dropSidemenuShadow() {
+    var $hsec = $("#header-security");
+    if(this.scrollHeight === this.clientHeight) {
+        $hsec.removeClass('drop-shadow');
+        return;
+    }
+    var scrollPurcent = 100 * this.scrollTop / this.scrollHeight / (1 - this.clientHeight / this.scrollHeight);
+    isNaN(scrollPurcent) || scrollPurcent >= 100 ? $hsec.removeClass('drop-shadow') : $hsec.addClass('drop-shadow');
+}

Resources/public/stylesheet/admin.css

@@ -897,6 +897,7 @@ body.error code {
         margin: 0;
         overflow: hidden;
         padding: 0 0 1em;
+        width: 222px;
     }
     #header #header-nav:hover {
         overflow-y: auto;
@@ -909,7 +910,7 @@ body.error code {
         margin-top: 0;
         padding: 0;
         list-style: none;
-        width: 100%;
+        width: 202px;
     }
     #header #header-menu li {
         border-bottom: 1px solid #2B2528;
@@ -947,6 +948,12 @@ body.error code {
         font-size: 14px;
         padding-bottom: 1em;
         padding-top: 1em;
+        -moz-transition: box-shadow 0.3s ease-out;
+        -webkit-transition: box-shadow 0.3s ease-out;
+        transition: box-shadow 0.3s ease-out;
+    }
+    #header #header-security.drop-shadow {
+        box-shadow: rgba(0,0,0,0.8) 0 -1px 80px;
     }
     #header #header-security p {
         line-height: 1.5;

Resources/views/layout.html.twig

@@ -93,6 +93,7 @@
     {% block body_javascript %}
         <script src="{{ asset('bundles/easyadmin/javascript/jquery.min.js') }}"></script>
         <script src="{{ asset('bundles/easyadmin/javascript/bootstrap.min.js') }}"></script>
+        <script src="{{ asset('bundles/easyadmin/javascript/admin.js') }}"></script>
     {% endblock %}
     {% for js_asset in config.assets.js %}
         <script src="{{ asset(js_asset) }}"></script>