From d546501b976b220ed61dc6a2ff4faf97c6691525 Mon Sep 17 00:00:00 2001
From: Mira Weller <weller@rami.io>
Date: Fri, 25 Sep 2026 00:55:42 +0200
Subject: [PATCH] Navbar redesign

---
 .../control/templates/pretixcontrol/base.html |  80 ++++++++---
 src/pretix/static/bootstrap/scss/_rtl.scss    |   6 -
 .../bootstrap/scss/bootstrap/_navbar.scss     | 125 ++++++------------
 .../static/pretixcontrol/scss/_rtl.scss       |   5 +-
 .../pretixcontrol/scss/_sb-admin-2.scss       |   4 -
 .../static/pretixcontrol/scss/main.scss       |  87 +++++++++---
 6 files changed, 169 insertions(+), 138 deletions(-)

diff --git a/src/pretix/control/templates/pretixcontrol/base.html b/src/pretix/control/templates/pretixcontrol/base.html
index 24f7f59cd3..bbd982f6f4 100644
--- a/src/pretix/control/templates/pretixcontrol/base.html
+++ b/src/pretix/control/templates/pretixcontrol/base.html
@@ -99,14 +99,28 @@
             data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
         <div id="wrapper">
             <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+
+
                 <div class="navbar-header">
-                    <button type="button" class="navbar-toggle"
-                            data-toggle="collapse" data-target=".navbar-nav-collapse">
-                        <span class="sr-only">{% trans "Toggle navigation" %}</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
+                    <a class="navbar-brand" href="{% url "control:index" %}">
+                        <img src="{% static "pretixbase/img/pretix-icon-white-mini.svg" %}" />
+                        {% if not request.event and not request.organizer %}
+                            <span>
+                                {{ settings.PRETIX_INSTANCE_NAME }}
+                            </span>
+                        {% endif %}
+                    </a>
+                    {% if request.organizer %}
+                        <a class="navbar-context-breadcrumb" href="{% url "control:organizer" organizer=request.organizer.slug %}">
+                            {{ request.organizer.slug }}
+                        </a>
+                    {% endif %}
+                    {% if request.event %}
+                        <a class="navbar-context-breadcrumb" href="{% url "control:event.index" organizer=request.organizer.slug event=request.event.slug %}">
+                            {{ request.event.slug }}
+                        </a>
+                    {% endif %}
+
                     {% if request.event %}
                         {% if has_domain and not request.event.live %}
                             <form action="{% eventurl request.event "presale:event.auth" %}" method="post"
@@ -128,13 +142,18 @@
                             <i class="fa fa-eye"></i>
                         </a>
                     {% endif %}
-                    <a class="navbar-brand" href="{% url "control:index" %}">
-                        <img src="{% static "pretixbase/img/pretix-icon-white-mini.svg" %}" />
-                        <span>
-                            {{ settings.PRETIX_INSTANCE_NAME }}
-                        </span>
-                    </a>
+
+                    <button type="button" class="navbar-toggle"
+                            data-toggle="collapse" data-target=".navbar-nav-collapse">
+                        <span class="sr-only">{% trans "Toggle navigation" %}</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+
                 </div>
+
+
                 <ul class="nav navbar-nav navbar-top-links navbar-left flip hidden-xs">
                     {% if request.event %}
                         <li>
@@ -178,6 +197,9 @@
                             </a>
                             {% if nav.children %}
                                 <ul class="dropdown-menu" role="menu">
+                                    <li class="dropdown-mobile-header visible-xs">
+                                        <strong>{{ nav.title }}</strong>
+                                    </li>
                                     {% for item in nav.children %}
                                         {% if item.separator %}
                                             <li role="separator" class="divider"></li>
@@ -221,16 +243,32 @@
                             </a>
                         </li>
                     {% endif %}
-                    <li>
-                        <a href="{% url 'control:user.settings' %}" title="{% trans "Account Settings" %}" >
+                    <li class="dropdown">
+                        <a href="{% url 'control:user.settings' %}" class="dropdown-toggle" data-toggle="dropdown">
                             <i class="fa fa-user"></i> {{ request.user.get_full_name }}
                         </a>
-                    </li>
-                    <li>
-                        <a href="{% url 'control:auth.logout' %}" title="{% trans "Log out" %}">
-                            <i class="fa fa-sign-out"></i>
-                            <span class="visible-xs-inline">{% trans "Log out" %}</span>
-                        </a>
+                        <ul class="dropdown-menu" role="menu">
+                            <li class="dropdown-mobile-header visible-xs">
+                                <strong>{{ request.user.get_full_name }}</strong><br>
+                                {{ request.user.email }}
+                            </li>
+                            <li>
+                                <a href="{% url 'control:organizers' %}">
+                                    <i class="fa fa-fw fa-group"></i> {% trans "My organizer accounts" %}
+                                </a>
+                            </li>
+                            <li>
+                                <a href="{% url 'control:user.settings' %}">
+                                    <i class="fa fa-fw fa-cog"></i> {% trans "Account settings" %}
+                                </a>
+                            </li>
+                            <li role="separator" class="divider"></li>
+                            <li>
+                                <a href="{% url 'control:auth.logout' %}" title="{% trans "Log out" %}">
+                                    <i class="fa fa-fw fa-sign-out"></i> {% trans "Log out" %}
+                                </a>
+                            </li>
+                        </ul>
                     </li>
                 </ul>
                 <div class="navbar-default sidebar" role="navigation">
diff --git a/src/pretix/static/bootstrap/scss/_rtl.scss b/src/pretix/static/bootstrap/scss/_rtl.scss
index e44be1e434..16c4a7f0ef 100644
--- a/src/pretix/static/bootstrap/scss/_rtl.scss
+++ b/src/pretix/static/bootstrap/scss/_rtl.scss
@@ -1260,12 +1260,6 @@ html.rtl {
     }
   }
 
-  .navbar-toggle {
-    float: left;
-    margin-left: 15px;
-    margin-right: auto;
-  }
-
   @media (max-width: 767px) {
     .navbar-nav .open .dropdown-menu > li > a,
     .navbar-nav .open .dropdown-menu .dropdown-header {
diff --git a/src/pretix/static/bootstrap/scss/bootstrap/_navbar.scss b/src/pretix/static/bootstrap/scss/bootstrap/_navbar.scss
index 5d9093a93c..f4d2c48be9 100644
--- a/src/pretix/static/bootstrap/scss/bootstrap/_navbar.scss
+++ b/src/pretix/static/bootstrap/scss/bootstrap/_navbar.scss
@@ -31,9 +31,7 @@
 .navbar-header {
   @include clearfix;
 
-  @media (min-width: $grid-float-breakpoint) {
-    float: left;
-  }
+  display: flex;
 }
 
 
@@ -159,7 +157,6 @@
 // Brand/project name
 
 .navbar-brand {
-  float: left;
   height: $navbar-height;
   padding: $navbar-padding-vertical $navbar-padding-horizontal;
   font-size: $font-size-large;
@@ -239,16 +236,26 @@
   @media (max-width: $grid-float-breakpoint-max) {
     // Dropdowns get custom display when collapsed
     .open .dropdown-menu {
-      position: static;
+      position: fixed;
       float: none;
       width: auto;
+      width: 80%; top: 0; left: inherit; right: 0; bottom: 0; background: white;
       margin-top: 0;
-      background-color: transparent;
-      border: 0;
-      box-shadow: none;
-      > li > a,
-      .dropdown-header {
-        padding: 5px 15px 5px 25px;
+      padding: 50px 0 10px 0;
+      overflow-y: auto; overflow-x: hidden;
+      border: 0; border-left: 1px solid #666;
+      box-shadow: 0 0 70px #222; border-radius: 0;
+      background: white linear-gradient(140deg, white 0%, white 40%, #faf4fe 60%, #e8cefb 85% , #ddb8fa 100%);
+      > li > a {
+        padding: 12px 15px 12px 25px;
+      }
+      .dropdown-header, .dropdown-mobile-header, .divider {
+        margin-left: 25px; margin-right: 15px;
+      }
+      .dropdown-mobile-header {
+        padding: 20px 0 21px 0; font-size: 14px; border-bottom: 1px solid $dropdown-divider-bg; margin-bottom: 9px;
+        min-height: 70px;
+        * { color: black; background: transparent; font-size: 14px; }
       }
       > li > a {
         line-height: $line-height-computed;
@@ -260,17 +267,23 @@
     }
   }
 
-  // Uncollapse the nav
-  @media (min-width: $grid-float-breakpoint) {
-    float: left;
-    margin: 0;
+  display: flex;
+  //overflow: hidden;
+  margin: 0;
+  max-width: 100%;
 
-    > li {
-      float: left;
-      > a {
-        padding-top: $navbar-padding-vertical;
-        padding-bottom: $navbar-padding-vertical;
-      }
+  > li {
+    //overflow: hidden;
+    min-width: 0;
+    > a {
+      padding-top: $navbar-padding-vertical;
+      padding-bottom: $navbar-padding-vertical;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 100%;
+      flex: 0 1 10px;
+      min-width: 0;
     }
   }
 }
@@ -374,12 +387,12 @@
 // Declared after the navbar components to ensure more specificity on the margins.
 
 @media (min-width: $grid-float-breakpoint) {
+  .navbar { display: flex; flex-direction: row; }
   .navbar-left {
-    float: left !important;
+    flex: 1;
   }
   .navbar-right {
-    float: right !important;
-  margin-right: -$navbar-padding-horizontal;
+    margin-right: -$navbar-padding-horizontal;
 
     ~ .navbar-right {
       margin-right: 0;
@@ -447,35 +460,6 @@
       }
     }
 
-    @media (max-width: $grid-float-breakpoint-max) {
-      // Dropdowns get custom display when collapsed
-      .open .dropdown-menu {
-        > li > a {
-          color: $navbar-default-link-color;
-          &:hover,
-          &:focus {
-            color: $navbar-default-link-hover-color;
-            background-color: $navbar-default-link-hover-bg;
-          }
-        }
-        > .active > a {
-          &,
-          &:hover,
-          &:focus {
-            color: $navbar-default-link-active-color;
-            background-color: $navbar-default-link-active-bg;
-          }
-        }
-        > .disabled > a {
-          &,
-          &:hover,
-          &:focus {
-            color: $navbar-default-link-disabled-color;
-            background-color: $navbar-default-link-disabled-bg;
-          }
-        }
-      }
-    }
   }
 
   .navbar-toggle {
@@ -578,41 +562,6 @@
       }
     }
 
-    @media (max-width: $grid-float-breakpoint-max) {
-      // Dropdowns get custom display
-      .open .dropdown-menu {
-        > .dropdown-header {
-          border-color: $navbar-inverse-border;
-        }
-        .divider {
-          background-color: $navbar-inverse-border;
-        }
-        > li > a {
-          color: $navbar-inverse-link-color;
-          &:hover,
-          &:focus {
-            color: $navbar-inverse-link-hover-color;
-            background-color: $navbar-inverse-link-hover-bg;
-          }
-        }
-        > .active > a {
-          &,
-          &:hover,
-          &:focus {
-            color: $navbar-inverse-link-active-color;
-            background-color: $navbar-inverse-link-active-bg;
-          }
-        }
-        > .disabled > a {
-          &,
-          &:hover,
-          &:focus {
-            color: $navbar-inverse-link-disabled-color;
-            background-color: $navbar-inverse-link-disabled-bg;
-          }
-        }
-      }
-    }
   }
 
   // Darken the responsive nav toggle
diff --git a/src/pretix/static/pretixcontrol/scss/_rtl.scss b/src/pretix/static/pretixcontrol/scss/_rtl.scss
index e254c19d6e..ac7f827855 100644
--- a/src/pretix/static/pretixcontrol/scss/_rtl.scss
+++ b/src/pretix/static/pretixcontrol/scss/_rtl.scss
@@ -10,9 +10,8 @@ html.rtl {
   }
 
 
-  .navbar-top-links li:last-child {
-    margin-left: 15px;
-    margin-right: 0;
+  .navbar-header :not(.navbar-toggle) + .navbar-toggle {
+    margin-left: inherit; margin-right: auto;
   }
 
   .sidebar .context-selector a span.caret {
diff --git a/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss b/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
index 103ee8d34f..c349f540cc 100644
--- a/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
+++ b/src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss
@@ -43,10 +43,6 @@ body {
     display: inline-block;
 }
 
-.navbar-top-links li:last-child {
-    margin-right: 15px;
-}
-
 .navbar-top-links li a {
     padding: 15px;
     min-height: 50px;
diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss
index c4515bb245..30a82d3caf 100644
--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/src/pretix/static/pretixcontrol/scss/main.scss
@@ -32,25 +32,80 @@ footer {
     font-size: 11px;
 }
 
+/* Navbar styles */
 nav.navbar {
     margin: 0;
     border: 0;
-}
-.navbar-brand {
-  position: relative;
-  padding-bottom: 10px;
-  padding-top: 10px;
-  padding-left: 10px;
-}
-.navbar-brand span {
-  padding: 4px 8px 6px; // Optical alignment next to logo
-  display: inline-block;
-}
-.navbar-brand img {
-    width: auto;
-    height: 100%;
-    display: inline-block;
-    vertical-align: top;
+    .navbar-header {
+        margin: 0 0 0 10px;
+        .navbar-brand {
+            position: relative;
+            padding-bottom: 10px;
+            padding-top: 10px;
+            padding-left: 10px;
+            padding-right: 8px; margin-left: -10px;
+            img {
+                width: auto;
+                height: 100%;
+                display: inline-block;
+                vertical-align: top;
+            }
+            span {
+                padding: 4px 8px 6px; // Optical alignment next to logo
+                display: inline-block;
+            }
+        }
+        a.navbar-context-breadcrumb {
+            padding-left: 0;
+            padding-right: 8px;
+            padding-top: 15px;
+            padding-bottom: 15px;
+            text-decoration: none;
+            display: inline-block;
+            line-height: $line-height-computed;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            font-size: 18px;
+            @media (max-width: $screen-sm-max) {
+                font-size: 16px;
+                padding-right: 3px;
+            }
+            color: $navbar-inverse-link-color;
+            &::before {
+                content: "›"; color: #9a81a6; font-weight: normal;
+                padding: 0 10px 0 5px;
+                @media (max-width: $screen-sm-max) {
+                    padding-right: 3px;
+                }
+            }
+            &:hover,
+            &:focus {
+                color: $navbar-inverse-link-hover-color;
+                background-color: $navbar-inverse-link-hover-bg;
+            }
+        }
+        a.navbar-context-breadcrumb.active {
+            font-weight: bold;
+        }
+        a.navbar-context-breadcrumb.unknown {
+            color: #cdb2d9; font-style: italic;
+        }
+        :not(.navbar-toggle) + .navbar-toggle { margin-left: auto; }
+    }
+    @media (min-width: $grid-float-breakpoint) {
+        .navbar-header {
+            flex: 0 1 auto;  /* shrink but dont grow */
+            overflow: hidden;
+        }
+        .navbar-top-links.navbar-left {
+            flex: 1 0 auto;  /* grow but dont shrink */
+        }
+        .navbar-top-links {
+            min-width: 50px;
+        }
+    }
+    .navbar-nav { margin: 0; }
 }
 
 #side-menu img.fa-img {