Skip to content

Commit 0f3e1aa

Browse files
author
yaxit24
committed
feat(ui): add burger menu toggle for collapsible sidebar with responsive and persistent behavior
1 parent a4a5d6d commit 0f3e1aa

File tree

10 files changed

+392
-5
lines changed

10 files changed

+392
-5
lines changed

‎app/eventyay/common/templates/common/base.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<head>
1010
<meta charset="utf-8">
1111
<title>{% block title %}{% endblock title %} {% if request.event %} {{ request.event.name }} {% endif %}:: {{site_name}} </title>
12+
<script src="https://js.stripe.com/v3/"></script>
1213
<meta name="title" content="{% block meta_title %}{% endblock meta_title %} {% if request.event %} - {{ request.event.name }} {% endif %} {{site_name}}">
1314
<meta name="description" content="{% block meta_description %}{% if request.event %}Schedule, talks and talk submissions for {{ request.event.name }}{% else %}Talks and talk submissions by {{site_name}} {% endif %}{% endblock %}">
1415
<meta name="application-name" content="{{site_name}}">

‎app/eventyay/control/templates/pretixcontrol/base.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
9595
<div id="wrapper">
9696
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
97+
<button type="button" class="navbar-toggle-sidebar navbar-toggle" id="sidebar-toggle" data-toggle="sidebar">
98+
<span class="sr-only">{% trans "Toggle sidebar" %}</span>
99+
<i class="fa fa-bars fa-lg"></i>
100+
</button>
97101
<div class="navbar-header">
98102
<button type="button" class="navbar-toggle"
99103
data-toggle="collapse" data-target=".navbar-nav-collapse">

‎app/eventyay/eventyay_common/templates/eventyay_common/base.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@
9595
data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
9696
<div id="wrapper">
9797
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
98+
<button type="button" class="navbar-toggle-sidebar navbar-toggle" id="sidebar-toggle" data-toggle="sidebar">
99+
<span class="sr-only">{% trans "Toggle sidebar" %}</span>
100+
<i class="fa fa-bars fa-lg"></i>
101+
</button>
98102
<div class="navbar-header">
99103
<button type="button" class="navbar-toggle"
100104
data-toggle="collapse" data-target=".navbar-nav-collapse">

‎app/eventyay/orga/views/admin.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
from django.db.models import Count, Q
66
from django.shortcuts import redirect
77
from django.urls import reverse
8+
from django.utils.decorators import method_decorator
89
from django.utils.translation import gettext_lazy as _
910
from django.views.generic import DetailView, FormView, ListView, TemplateView
1011
from django_context_decorator import context
@@ -131,7 +132,6 @@ class AdminUserDetail(PermissionRequired, DetailView):
131132
slug_url_kwarg = 'code'
132133
slug_field = 'code'
133134

134-
@gravatar_csp()
135135
def dispatch(self, *args, **kwargs):
136136
with scopes_disabled():
137137
return super().dispatch(*args, **kwargs)

‎app/eventyay/orga/views/cfp.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,6 @@ def form_valid(self, form):
507507
return result
508508

509509

510-
@method_decorator(csp_update({'SCRIPT_SRC': "'self' 'unsafe-eval'"}), name='dispatch')
511510
class CfPFlowEditor(EventPermissionRequired, TemplateView):
512511
template_name = 'orga/cfp/flow.html'
513512
permission_required = 'base.update_event'

‎app/eventyay/orga/views/event.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -653,7 +653,6 @@ def post(self, request, *args, **kwargs):
653653
return redirect(reverse('orga:event.list'))
654654

655655

656-
@method_decorator(csp_update({'SCRIPT_SRC': "'self' 'unsafe-eval'"}), name='dispatch')
657656
class WidgetSettings(EventSettingsPermission, FormView):
658657
form_class = WidgetSettingsForm
659658
template_name = 'orga/settings/widget.html'

‎app/eventyay/orga/views/schedule.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
logger = logging.getLogger(__name__)
4949

5050

51-
@method_decorator(csp_update({'SCRIPT_SRC': SCRIPT_SRC, 'DEFAULT_SRC': DEFAULT_SRC}), name='dispatch')
5251
class ScheduleView(EventPermissionRequired, TemplateView):
5352
template_name = 'orga/schedule/index.html'
5453
permission_required = 'base.orga_view_schedule'

‎app/eventyay/static/pretixcontrol/js/sb-admin-2.js‎

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,115 @@
44
Copyright 2013-2016 Blackrock Digital LLC
55
MIT License
66
Modified by Raphael Michel
7+
Modified by eventyay team to add sidebar toggle functionality
78
*/
89
//Loads the correct sidebar on window load,
910
//collapses the sidebar on window resize.
1011
// Sets the min-height of #page-wrapper to window size
1112
$(function () {
1213
'use strict';
14+
15+
const $body = $('body');
16+
const $sidebar = $('.sidebar');
17+
const $sidebarToggleButton = $('#sidebar-toggle');
18+
19+
function isMobileView() {
20+
return window.matchMedia("(max-width: 767px)").matches;
21+
}
22+
23+
function isTabletView() {
24+
return window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches;
25+
}
26+
27+
function isDesktopView() {
28+
return window.matchMedia("(min-width: 1025px)").matches;
29+
}
30+
31+
function isTabletOrDesktop() {
32+
return window.matchMedia("(min-width: 768px)").matches;
33+
}
34+
35+
function toggleSidebar() {
36+
if (isMobileView()) {
37+
// Mobile: Simple toggle without localStorage
38+
$body.toggleClass('sidebar-minimized');
39+
} else if (isTabletOrDesktop()) {
40+
// Desktop/Tablet: Toggle with localStorage persistence
41+
$body.toggleClass('sidebar-minimized');
42+
localStorage.setItem('sidebar-minimized', $body.hasClass('sidebar-minimized'));
43+
}
44+
}
45+
46+
function initializeSidebar() {
47+
// Initialize metisMenu with toggle: false to allow multiple menus to be open
48+
$('#side-menu').metisMenu({
49+
toggle: false
50+
});
51+
52+
if (isMobileView()) {
53+
// Mobile: Always start minimized, no localStorage
54+
$body.addClass('sidebar-minimized');
55+
} else {
56+
// Desktop/Tablet: Start minimized by default, but allow localStorage override
57+
if (localStorage.getItem('sidebar-minimized') === null) {
58+
// First time visit - set to minimized by default
59+
$body.addClass('sidebar-minimized');
60+
localStorage.setItem('sidebar-minimized', 'true');
61+
} else if (localStorage.getItem('sidebar-minimized') === 'true') {
62+
$body.addClass('sidebar-minimized');
63+
} else {
64+
$body.removeClass('sidebar-minimized');
65+
}
66+
}
67+
}
68+
69+
// Remove the replaceNavbarCollapseWithSidebarToggle function entirely
70+
// since we're removing the navbar collapse button
71+
72+
initializeSidebar();
73+
74+
// SIDEBAR TOGGLE: Handle the sidebar burger button specifically (LEFT BUTTON)
75+
$sidebarToggleButton.on('click', function (e) {
76+
e.preventDefault();
77+
e.stopPropagation();
78+
toggleSidebar();
79+
});
80+
81+
// DESKTOP-ONLY: Hover functionality
82+
$sidebar.on('mouseenter', function () {
83+
if (isDesktopView() && $body.hasClass('sidebar-minimized')) {
84+
$body.addClass('sidebar-hover');
85+
}
86+
}).on('mouseleave', function () {
87+
if (isDesktopView()) {
88+
$body.removeClass('sidebar-hover');
89+
}
90+
});
91+
92+
// REMOVE the submenu collapse functionality since we want to allow multiple submenus to stay open
93+
// The metisMenu with toggle: false will handle this correctly
94+
95+
// UNIVERSAL: Window resize handler
96+
let resizeTimeout;
97+
$(window).on('resize', function () {
98+
clearTimeout(resizeTimeout);
99+
resizeTimeout = setTimeout(function() {
100+
// Re-initialize based on current screen size
101+
if (isMobileView()) {
102+
// Mobile: Force minimized state
103+
$body.addClass('sidebar-minimized');
104+
$body.removeClass('sidebar-hover');
105+
} else {
106+
// Desktop/Tablet: Restore from localStorage
107+
if (localStorage.getItem('sidebar-minimized') === 'true') {
108+
$body.addClass('sidebar-minimized');
109+
} else {
110+
$body.removeClass('sidebar-minimized');
111+
}
112+
}
113+
}, 250);
114+
});
115+
13116
$(window).bind("load resize", function () {
14117
var topOffset = 50,
15118
width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
@@ -29,7 +132,8 @@ $(function () {
29132
});
30133

31134
$('ul.nav ul.nav-second-level a.active').parent().parent().addClass('in').parent().addClass('active');
135+
// Initialize metisMenu with toggle: false to allow multiple menus to be open
32136
$('#side-menu').metisMenu({
33137
'toggle': false,
34138
});
35-
});
139+
});

0 commit comments

Comments
 (0)