From 71664e5203f14c8913a86a22dec4b50d54109bf0 Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Mon, 9 Jul 2018 15:40:06 +0200
Subject: [PATCH] Navigation behaviour

---
 .../control/templates/pretixcontrol/base.html |  2 +-
 src/pretix/static/pretixbase/scss/_theme.scss | 16 +++++++++++--
 src/pretix/static/pretixcontrol/js/menu.js    | 24 +++++++++++++------
 .../pretixcontrol/scss/_sb-admin-2.scss       | 21 ++++++++++++----
 4 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/pretix/control/templates/pretixcontrol/base.html b/src/pretix/control/templates/pretixcontrol/base.html
index 040232840..b27cb8608 100644
--- a/src/pretix/control/templates/pretixcontrol/base.html
+++ b/src/pretix/control/templates/pretixcontrol/base.html
@@ -60,7 +60,7 @@
             data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
         <div id="wrapper">
             <nav class="navbar-static-top" role="navigation">
-                <div class="navbar navbar-inverse ">
+                <div class="navbar navbar-fixed navbar-inverse ">
                     <div class="navbar-header">
                         <button type="button" class="navbar-toggle"
                                 data-toggle="collapse" data-target=".navbar-nav-collapse">
diff --git a/src/pretix/static/pretixbase/scss/_theme.scss b/src/pretix/static/pretixbase/scss/_theme.scss
index b78c40d1b..636e040e3 100644
--- a/src/pretix/static/pretixbase/scss/_theme.scss
+++ b/src/pretix/static/pretixbase/scss/_theme.scss
@@ -4,9 +4,21 @@
   border-radius: 0;
   z-index: 100;
 }
-
+.navbar-fixed {
+  position: fixed;
+  width: 100%;
+}
 .sidebar-nav li > a > .fa {
-  color: $navbar-inverse-bg;
+  color: rgba($navbar-inverse-bg, 0.7);
+  margin-right: 5px;
+}
+.sidebar-nav li > a > .fa-spin {
+  margin-left: 5px;
+}
+.sidebar-nav .arrow {
+  display: none;
+}
+.sidebar-nav li > a:hover > .fa {
 }
 .sidebar-nav {
   padding-top: 10px;
diff --git a/src/pretix/static/pretixcontrol/js/menu.js b/src/pretix/static/pretixcontrol/js/menu.js
index c026ee645..e524ebc95 100644
--- a/src/pretix/static/pretixcontrol/js/menu.js
+++ b/src/pretix/static/pretixcontrol/js/menu.js
@@ -38,16 +38,26 @@
                 $this.find("li").not(".active").has("ul").children("ul").addClass("collapse");
             }
 
-            $this.find("li").has("ul").children("a.arrow").on("click" + "." + pluginName, function(e) {
-                e.preventDefault();
-                $(this).blur();
+            $this.find("li a").click(function(e) {
 
-                $(this).parent("li").toggleClass("active").children("ul").collapse("toggle");
-
-                if ($toggle) {
-                    $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
+                var $a;
+                if ($(this).is('.has-children')) {
+                    $a = $(this).closest("li").find("ul a").first();
+                    $(this).closest("li").find("ul").stop().collapse("show");
+                } else {
+                    $a = $(this);
                 }
+                $(this).closest(".sidebar").find(".active").removeClass("active");
+                $a.addClass("active").append(
+                    $("<span>").addClass("fa fa-circle-o-notch fa-spin")
+                );
 
+                $(this).closest(".sidebar").find("li:has(.has-children):has(.in)").each(function() {
+                    var oul = $(this).children("ul");
+                    if ($(this).has($a.parent()).length === 0) {
+                        oul.stop().collapse("hide");
+                    }
+                })
             });
         },
 
diff --git a/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss b/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
index 4d4799518..7840715fb 100644
--- a/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
+++ b/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
@@ -25,7 +25,7 @@ body {
     #page-wrapper {
         position: inherit;
         margin: 0 0 0 260px;
-        padding: 30px 30px 0;
+        padding: 82px 30px 0;
     }
 }
 
@@ -124,7 +124,7 @@ body {
 .sidebar .fa.arrow {
     line-height: 19px !important;
     width: 10px;
-    text-align: center;
+    text-align: center
 }
 
 .sidebar .fa.arrow:before {
@@ -141,7 +141,7 @@ body {
 }
 
 .sidebar .nav-second-level li a {
-    padding-left: 37px;
+    padding-left: 42px;
 }
 
 .sidebar .nav-third-level li a {
@@ -151,10 +151,21 @@ body {
 @media(min-width:768px) {
     .sidebar {
         z-index: 1;
-        position: absolute;
+        position: fixed;
         width: 250px;
         margin-left: 15px;
-        margin-top: 10px;
+        height: 100%;
+
+        .sidebar-nav {
+            padding-top: 82px;
+            padding-bottom: 10px;
+            height: 100%;
+
+            & > ul.nav {
+                height: 100%;
+                overflow-y: auto;
+            }
+        }
     }
 
     .navbar-top-links .dropdown-messages,