overleaf/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug

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"
							)
								| 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"
									)
										| !{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"
							)
								| #{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)