Navigation behaviour

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">

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;

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");
+                    }
+                })
             });
         },
 

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,