overleaf/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
Rebeka Dekany 57b3871c1c Merge pull request #19823 from overleaf/rd-navbar-pug-a11y
[web] Announce buttons as menu items in the navigation bar and allow tabbing within the menu

GitOrigin-RevId: 138fef3369bf5c89487e673ab42c06b7c13bcf48
2024-08-12 08:04:54 +00:00

183 lines
6.9 KiB
Text

include ../_mixins/navbar
nav.navbar.navbar-default.navbar-main.navbar-expand-lg
.container-fluid.navbar-container
.navbar-header
if settings.nav.custom_logo
a(href='/', aria-label=settings.appName, style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand
else if (nav.title)
a(href='/', aria-label=settings.appName).navbar-title #{nav.title}
else
a(href='/', aria-label=settings.appName).navbar-brand
- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && usersBestSubscription.type === 'free'
if (enableUpgradeButton)
a.btn.btn-primary.me-2.d-md-none(
href="/user/subscription/plans"
event-tracking="upgrade-button-click"
event-tracking-mb="true"
event-tracking-label="upgrade"
event-tracking-trigger="click"
event-segmentation='{"source": "dashboard-top", "project-dashboard-react": "enabled", "is-dashboard-sidebar-hidden": "true", "is-screen-width-less-than-768px": "true"}'
) #{translate("upgrade")}
- var canDisplayAdminMenu = hasAdminAccess()
- var canDisplayAdminRedirect = canRedirectToAdminDomain()
- var canDisplaySplitTestMenu = hasFeature('saas') && (canDisplayAdminMenu || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement)))
- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
if (typeof suppressNavbarRight === "undefined")
button.navbar-toggler.collapsed(
type="button",
data-bs-toggle="collapse",
data-bs-target="#navbar-main-collapse"
aria-controls="navbar-main-collapse"
aria-expanded="false"
aria-label="Toggle " + translate('navigation')
)
i.fa.fa-bars(aria-hidden="true")
.navbar-collapse.collapse#navbar-main-collapse
ul.nav.navbar-nav.navbar-right.ms-auto(role="menubar")
if (canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu)
+nav-item.dropdown.subdued
button.dropdown-toggle(
aria-haspopup="true",
aria-expanded="false",
data-bs-toggle="dropdown"
role="menuitem"
)
| Admin
span.caret
+dropdown-menu.dropdown-menu-end
if canDisplayAdminMenu
+dropdown-menu-link-item()(href="/admin") Manage Site
+dropdown-menu-link-item()(href="/admin/user") Manage Users
+dropdown-menu-link-item()(href="/admin/project") Project URL Lookup
if canDisplayAdminRedirect
+dropdown-menu-link-item()(href=settings.adminUrl) Switch to Admin
if canDisplaySplitTestMenu
+dropdown-menu-link-item()(href="/admin/split-test") Manage Feature Flags
if canDisplaySurveyMenu
+dropdown-menu-link-item()(href="/admin/survey") Manage Surveys
// loop over header_extras
each item in nav.header_extras
-
if ((item.only_when_logged_in && getSessionUser())
|| (item.only_when_logged_out && (!getSessionUser()))
|| (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages)
|| (item.only_content_pages && (typeof suppressNavContentLinks === "undefined" || !suppressNavContentLinks))
){
var showNavItem = true
} else {
var showNavItem = false
}
if showNavItem
if item.dropdown
+nav-item.dropdown(class=item.class)
button.dropdown-toggle(
aria-haspopup="true",
aria-expanded="false",
data-bs-toggle="dropdown"
role="menuitem"
)
| !{translate(item.text)}
span.caret
+dropdown-menu.dropdown-menu-end
each child in item.dropdown
if child.divider
+dropdown-menu-divider
else if child.isContactUs
+dropdown-menu-link-item()(data-ol-open-contact-form-modal="contact-us" data-bs-target="#contactUsModal" href data-bs-toggle="modal")
span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
| #{translate("contact_us")}
else
if child.url
+dropdown-menu-link-item()(
href=child.url,
class=child.class,
event-tracking=child.event
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=child.eventSegmentation
) !{translate(child.text)}
else
+dropdown-menu-item !{translate(child.text)}
else
+nav-item(class=item.class)
if item.url
+nav-link(
href=item.url,
class=item.class,
event-tracking=item.event
event-tracking-mb="true"
event-tracking-trigger="click"
) !{translate(item.text)}
else
| !{translate(item.text)}
// logged out
if !getSessionUser()
// register link
if hasFeature('registration-page')
+nav-item.primary
+nav-link(
href="/register"
event-tracking="menu-clicked-register"
event-tracking-action="clicked"
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl }
) #{translate('sign_up')}
// login link
+nav-item
+nav-link(
href="/login"
event-tracking="menu-clicked-login"
event-tracking-action="clicked"
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl }
) #{translate('log_in')}
// projects link and account menu
if getSessionUser()
+nav-item
+nav-link(href="/project") #{translate('Projects')}
+nav-item.dropdown
button.dropdown-toggle(
aria-haspopup="true",
aria-expanded="false",
data-bs-toggle="dropdown"
role="menuitem"
)
| #{translate('Account')}
span.caret
+dropdown-menu.dropdown-menu-end
+dropdown-menu-item
div.disabled.dropdown-item #{getSessionUser().email}
+dropdown-menu-divider
+dropdown-menu-link-item()(href="/user/settings") #{translate('Account Settings')}
if nav.showSubscriptionLink
+dropdown-menu-link-item()(href="/user/subscription") #{translate('subscription')}
+dropdown-menu-divider
+dropdown-menu-item
//-
The button is outside the form but still belongs to it via the form attribute. The reason to do
this is that if the button is inside the form, screen readers will not count it in the total
number of menu items.
button.btn-link.text-left.dropdown-menu-button.dropdown-item(
role="menuitem",
tabindex="-1"
form="logOutForm"
)
| #{translate('log_out')}
form(
method="POST",
action="/logout",
id="logOutForm"
)
input(name='_csrf', type='hidden', value=csrfToken)