Skip to content

Commit bf8b092

Browse files
jaredlockhartjaredlockhart
authored
fix(nimbus): hide sidebar toggle on pages without a sidebar (#15695)
Because * The header nav was inaccessible at narrow viewports — the hamburger toggle errored on click (it targeted an offcanvas that only existed on sidebar pages), and the right-side ul stacked badly outside the collapse. This commit * Drops the navbar's `.collapse` wrapper so nav items stack vertically at narrow viewports and lay out horizontally at xl+. * Moves the right-side ul inside the navbar-collapse so both groups flow together. * Renders the sidebar toggle only on pages that have a sidebar. Fixes #14875
1 parent 8f77bc8 commit bf8b092

3 files changed

Lines changed: 166 additions & 155 deletions

File tree

‎experimenter/experimenter/nimbus_ui/templates/common/header.html‎

Lines changed: 159 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@
44

55
<nav class="navbar navbar-expand-xl">
66
<div class="container-fluid">
7-
<button class="navbar-toggler"
8-
type="button"
9-
data-bs-toggle="offcanvas"
10-
data-bs-target="#offcanvasSidebar"
11-
aria-controls="offcanvasSidebar"
12-
aria-label="Toggle sidebar">
13-
<span class="navbar-toggler-icon"></span>
14-
</button>
7+
{% if has_sidebar %}
8+
<div class="w-100 d-xl-none mb-2">
9+
<button class="btn btn-outline-secondary"
10+
type="button"
11+
data-bs-toggle="offcanvas"
12+
data-bs-target="#offcanvasSidebar"
13+
aria-controls="offcanvasSidebar"
14+
aria-label="Toggle sidebar">
15+
<i class="fa-solid fa-bars"></i>
16+
</button>
17+
</div>
18+
{% endif %}
1519
<a class="navbar-brand align-items-center fs-3"
1620
href="{% url 'nimbus-ui-home' %}">
1721
<img src="{% static 'assets/logo.svg' %}"
@@ -21,8 +25,9 @@
2125
class="me-2 mb-2">
2226
Nimbus Experiments
2327
</a>
24-
<div class="collapse navbar-collapse" id="navigation">
25-
<ul class="navbar-nav me-auto align-items-center">
28+
<div class="navbar-collapse flex-column flex-xl-row gap-2 gap-xl-0"
29+
id="navigation">
30+
<ul class="navbar-nav me-auto align-items-xl-center gap-1 gap-xl-0">
2631
<li class="nav-item">
2732
<a href="{% url 'nimbus-ui-home' %}"
2833
class="nav-link link-primary py-0 mt-1 fw-semibold">
@@ -45,151 +50,151 @@
4550
</a>
4651
</li>
4752
</ul>
48-
</div>
49-
<ul class="navbar-nav ms-auto align-items-center">
50-
<li class="nav-item me-2">
51-
<button id="create-new-button"
52-
class="btn btn-primary"
53-
data-bs-toggle="modal"
54-
data-bs-target="#createModal">
55-
<i class="fa-regular fa-pen-to-square me-1"></i>
56-
Create Experiment
57-
</button>
58-
</li>
59-
<li class="nav-item dropdown">
60-
<a class="nav-link dropdown-toggle"
61-
href="#"
62-
role="button"
63-
data-bs-toggle="dropdown"
64-
aria-expanded="false">Links</a>
65-
<ul class="dropdown-menu dropdown-menu-end">
66-
<li>
67-
<a href="https://experimenter.info/"
68-
class="dropdown-item link-primary"
69-
target="_blank"
70-
rel="noreferrer">
71-
<i class="fa-solid fa-book me-2"></i>
72-
Docs
73-
</a>
74-
</li>
75-
<li>
76-
<a href="https://github.com/mozilla-extensions/nimbus-devtools/releases/tag/release%2Fv0.3.0"
77-
class="dropdown-item link-primary"
78-
target="_blank"
79-
rel="noreferrer">
80-
<i class="fa-solid fa-wrench me-2"></i>
81-
Nimbus Devtools
82-
</a>
83-
</li>
84-
<li>
85-
<a href="{% url "nimbus-experiments-csv" %}"
86-
class="dropdown-item link-primary"
87-
target="_blank"
88-
rel="noreferrer">
89-
<i class="fa-solid fa-file-arrow-down me-2"></i>
90-
Reports
91-
</a>
92-
</li>
93-
<li>
94-
<a href="{% url "nimbus-experiments-csv-usage" %}"
95-
class="dropdown-item link-primary"
96-
target="_blank"
97-
rel="noreferrer">
98-
<i class="fa-solid fa-chart-line me-2"></i>
99-
Usage Stats
100-
</a>
101-
</li>
102-
<li>
103-
<a href="{% url "nimbus-experiments-yaml" %}"
104-
class="dropdown-item link-primary"
105-
target="_blank"
106-
rel="noreferrer">
107-
<i class="fa-solid fa-file-lines me-2"></i>
108-
YAML Export
109-
</a>
110-
</li>
111-
<li>
112-
<a id="legacy_page_link"
113-
href="/legacy/"
114-
class="dropdown-item link-primary"
115-
target="_blank"
116-
rel="noreferrer">
117-
<i class="fa-solid fa-ghost me-2"></i>
118-
Legacy
119-
</a>
120-
</li>
121-
<li>
122-
<hr class="dropdown-divider">
123-
</li>
124-
<li>
125-
<a href="https://mozilla-hub.atlassian.net/secure/CreateIssueDetails!init.jspa?pid=10203&issuetype=10097"
126-
class="dropdown-item link-primary"
127-
target="_blank"
128-
rel="noreferrer">
129-
<i class="fa-solid fa-comment-dots me-2"></i>
130-
Feedback
131-
</a>
132-
</li>
133-
<li>
134-
<a href="https://mozilla.slack.com/?redir=%2Farchives%2FCF94YGE03"
135-
class="dropdown-item link-primary"
136-
target="_blank"
137-
rel="noreferrer">
138-
<i class="fa-solid fa-circle-question me-2"></i>
139-
Help
140-
</a>
141-
</li>
142-
</ul>
143-
</li>
144-
<li class="nav-item dropdown">
145-
<a class="nav-link dropdown-toggle"
146-
href="#"
147-
role="button"
148-
data-bs-toggle="dropdown"
149-
aria-expanded="false">
150-
<i class="fa-regular fa-circle-user"></i>
151-
</a>
152-
<ul class="dropdown-menu dropdown-menu-end">
153-
<li>
154-
<a href="{% url 'nimbus-ui-home' %}?my_deliveries_status=AllOwned#my-deliveries"
155-
class="dropdown-item link-primary">
156-
<i class="fa-solid fa-user me-2"></i>
157-
My Deliveries
158-
</a>
159-
</li>
160-
<li>
161-
<a href="{% url 'nimbus-ui-home' %}?my_deliveries_status=AllSubscribed#my-deliveries"
162-
class="dropdown-item link-primary">
163-
<i class="fa-solid fa-bell me-2"></i>
164-
My Subscribed Deliveries
165-
</a>
166-
</li>
167-
<li>
168-
<a href="{% url 'nimbus-ui-home' %}?my_deliveries_status=FeatureSubscribed#my-deliveries"
169-
class="dropdown-item link-primary">
170-
<i class="fa-solid fa-boxes-stacked me-2"></i>
171-
My Subscribed Features
172-
</a>
173-
</li>
174-
<li>
175-
<hr class="dropdown-divider">
176-
</li>
177-
<li class="dropdown-item">
178-
<div class="form-check form-switch">
179-
<label class="form-check-label" for="theme-selector">Light Mode</label>
180-
<input id="theme-selector"
181-
class="form-check-input"
182-
type="checkbox"
183-
role="switch">
184-
</div>
185-
</li>
186-
<li>
187-
{% include 'glean/opt_out_button.html' %}
53+
<ul class="navbar-nav ms-xl-auto align-items-xl-center gap-1 gap-xl-0 mt-3 mt-xl-0">
54+
<li class="nav-item me-xl-2">
55+
<button id="create-new-button"
56+
class="btn btn-primary"
57+
data-bs-toggle="modal"
58+
data-bs-target="#createModal">
59+
<i class="fa-regular fa-pen-to-square me-1"></i>
60+
Create Experiment
61+
</button>
62+
</li>
63+
<li class="nav-item dropdown">
64+
<a class="nav-link dropdown-toggle"
65+
href="#"
66+
role="button"
67+
data-bs-toggle="dropdown"
68+
aria-expanded="false">Links</a>
69+
<ul class="dropdown-menu dropdown-menu-end">
70+
<li>
71+
<a href="https://experimenter.info/"
72+
class="dropdown-item link-primary"
73+
target="_blank"
74+
rel="noreferrer">
75+
<i class="fa-solid fa-book me-2"></i>
76+
Docs
77+
</a>
78+
</li>
79+
<li>
80+
<a href="https://github.com/mozilla-extensions/nimbus-devtools/releases/tag/release%2Fv0.3.0"
81+
class="dropdown-item link-primary"
82+
target="_blank"
83+
rel="noreferrer">
84+
<i class="fa-solid fa-wrench me-2"></i>
85+
Nimbus Devtools
86+
</a>
87+
</li>
88+
<li>
89+
<a href="{% url "nimbus-experiments-csv" %}"
90+
class="dropdown-item link-primary"
91+
target="_blank"
92+
rel="noreferrer">
93+
<i class="fa-solid fa-file-arrow-down me-2"></i>
94+
Reports
95+
</a>
96+
</li>
97+
<li>
98+
<a href="{% url "nimbus-experiments-csv-usage" %}"
99+
class="dropdown-item link-primary"
100+
target="_blank"
101+
rel="noreferrer">
102+
<i class="fa-solid fa-chart-line me-2"></i>
103+
Usage Stats
104+
</a>
105+
</li>
106+
<li>
107+
<a href="{% url "nimbus-experiments-yaml" %}"
108+
class="dropdown-item link-primary"
109+
target="_blank"
110+
rel="noreferrer">
111+
<i class="fa-solid fa-file-lines me-2"></i>
112+
YAML Export
113+
</a>
114+
</li>
115+
<li>
116+
<a id="legacy_page_link"
117+
href="/legacy/"
118+
class="dropdown-item link-primary"
119+
target="_blank"
120+
rel="noreferrer">
121+
<i class="fa-solid fa-ghost me-2"></i>
122+
Legacy
123+
</a>
124+
</li>
125+
<li>
126+
<hr class="dropdown-divider">
127+
</li>
128+
<li>
129+
<a href="https://mozilla-hub.atlassian.net/secure/CreateIssueDetails!init.jspa?pid=10203&issuetype=10097"
130+
class="dropdown-item link-primary"
131+
target="_blank"
132+
rel="noreferrer">
133+
<i class="fa-solid fa-comment-dots me-2"></i>
134+
Feedback
135+
</a>
136+
</li>
137+
<li>
138+
<a href="https://mozilla.slack.com/?redir=%2Farchives%2FCF94YGE03"
139+
class="dropdown-item link-primary"
140+
target="_blank"
141+
rel="noreferrer">
142+
<i class="fa-solid fa-circle-question me-2"></i>
143+
Help
144+
</a>
145+
</li>
146+
</ul>
147+
</li>
148+
<li class="nav-item dropdown">
149+
<a class="nav-link dropdown-toggle"
150+
href="#"
151+
role="button"
152+
data-bs-toggle="dropdown"
153+
aria-expanded="false">
154+
<i class="fa-regular fa-circle-user"></i>
155+
</a>
156+
<ul class="dropdown-menu dropdown-menu-end">
157+
<li>
158+
<a href="{% url 'nimbus-ui-home' %}?my_deliveries_status=AllOwned#my-deliveries"
159+
class="dropdown-item link-primary">
160+
<i class="fa-solid fa-user me-2"></i>
161+
My Deliveries
162+
</a>
163+
</li>
164+
<li>
165+
<a href="{% url 'nimbus-ui-home' %}?my_deliveries_status=AllSubscribed#my-deliveries"
166+
class="dropdown-item link-primary">
167+
<i class="fa-solid fa-bell me-2"></i>
168+
My Subscribed Deliveries
169+
</a>
170+
</li>
171+
<li>
172+
<a href="{% url 'nimbus-ui-home' %}?my_deliveries_status=FeatureSubscribed#my-deliveries"
173+
class="dropdown-item link-primary">
174+
<i class="fa-solid fa-boxes-stacked me-2"></i>
175+
My Subscribed Features
176+
</a>
177+
</li>
178+
<li>
179+
<hr class="dropdown-divider">
180+
</li>
181+
<li class="dropdown-item">
182+
<div class="form-check form-switch">
183+
<label class="form-check-label" for="theme-selector">Light Mode</label>
184+
<input id="theme-selector"
185+
class="form-check-input"
186+
type="checkbox"
187+
role="switch">
188+
</div>
189+
</li>
190+
<li>
191+
{% include 'glean/opt_out_button.html' %}
188192

189-
</li>
190-
</ul>
191-
</li>
192-
</ul>
193+
</li>
194+
</ul>
195+
</li>
196+
</ul>
197+
</div>
193198
</div>
194199
</nav>
195200
<!-- Modal -->

‎experimenter/experimenter/nimbus_ui/templates/common/with_sidebar.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
{% load static %}
44

5+
{% block header %}
6+
{% include "common/header.html" with has_sidebar=True %}
7+
8+
{% endblock header %}
59
{% block content %}
610
<div id="content" class="container-fluid">
711
<div id="content-with-sidebar" class="row">

‎experimenter/experimenter/nimbus_ui/templates/experimenter_base.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@
2222
{# djlint:on #}
2323
class="bg-body-tertiary">
2424
<div class="container-fluid bg-body border-bottom border-1 py-1">
25-
{% include "common/header.html" %}
25+
{% block header %}
26+
{% include "common/header.html" %}
2627

28+
{% endblock header %}
2729
</div>
2830
<div class="container-fluid">
2931
{% block content %}

0 commit comments

Comments
 (0)