diff --git a/services/web/app/views/layout/navbar-marketing.pug b/services/web/app/views/layout/navbar-marketing.pug
index 01577ccbf9..42c0d49944 100644
--- a/services/web/app/views/layout/navbar-marketing.pug
+++ b/services/web/app/views/layout/navbar-marketing.pug
@@ -9,16 +9,13 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(
)
.container-fluid.navbar-container
.navbar-header
- if settings.nav.custom_logo
- a.navbar-brand(
- href='/'
- aria-label=settings.appName
- style='background-image:url("' + settings.nav.custom_logo + '")'
- )
- else if nav.title
- a.navbar-title(href='/' aria-label=settings.appName) #{nav.title}
- else
- a.navbar-brand(href='/' aria-label=settings.appName)
+ a.navbar-brand(href='/' aria-label=settings.appName)
+ if settings.nav.custom_logo
+ .navbar-logo(style=`background-image:url("${settings.nav.custom_logo}")`)
+ if nav.title
+ .navbar-title #{nav.title}
+ if !nav.title && !settings.nav.custom_logo
+ .navbar-logo
- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
if enableUpgradeButton
diff --git a/services/web/app/views/layout/navbar-website-redesign.pug b/services/web/app/views/layout/navbar-website-redesign.pug
deleted file mode 100644
index 397494bbbe..0000000000
--- a/services/web/app/views/layout/navbar-website-redesign.pug
+++ /dev/null
@@ -1,213 +0,0 @@
-nav.navbar.navbar-default.navbar-main.website-redesign-navbar(
- aria-label=translate('primary')
-)
- .container-fluid
- .navbar-header
- if typeof suppressNavbarRight == 'undefined'
- button#navbar-toggle-btn.navbar-toggle.collapsed(
- type='button'
- data-toggle='collapse'
- data-target='#navbar-main-collapse'
- aria-label='Toggle ' + translate('navigation')
- )
- i.fa.fa-bars(aria-hidden='true')
- - var enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
- if enableUpgradeButton
- a.btn.btn-primary.float-end.me-2.visible-xs(
- 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',
- projectDashboardReact: 'enabled',
- isDashboardSidebarHidden: 'true',
- isScreenWidthLessThan768px: 'true',
- }
- ) #{translate("upgrade")}
- if settings.nav.custom_logo
- a.navbar-brand(
- href='/'
- aria-label=settings.appName
- style='background-image:url("' + settings.nav.custom_logo + '")'
- )
- else if nav.title
- a.navbar-title(href='/' aria-label=settings.appName) #{nav.title}
- else
- a.navbar-brand(href='/' aria-label=settings.appName)
-
- - var canDisplayAdminMenu = hasAdminAccess()
- - var canDisplayAdminRedirect = canRedirectToAdminDomain()
- - var canDisplaySplitTestMenu = hasFeature('saas') && ((canDisplayAdminMenu && hasAdminCapability('view-split-test')) || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement)))
- - var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu && hasAdminCapability('manage-survey', false)
- - var canDisplayScriptLogMenu = hasFeature('saas') && hasAdminCapability('view-script-log', false) && canDisplayAdminMenu
-
- if typeof suppressNavbarRight == 'undefined'
- #navbar-main-collapse.navbar-collapse.collapse
- ul.nav.navbar-nav.navbar-right
- if canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu
- li.dropdown.subdued
- a.dropdown-toggle(
- href='#'
- role='button'
- aria-haspopup='true'
- aria-expanded='false'
- data-toggle='dropdown'
- event-tracking='menu-expand'
- event-tracking-mb='true'
- event-tracking-trigger='click'
- event-segmentation={item: 'admin', location: 'top-menu'}
- )
- | Admin
- span.caret
- ul.dropdown-menu
- if canDisplayAdminMenu
- li
- a(href='/admin') Manage Site
- li
- a(href='/admin/user') Manage Users
- li
- a(href='/admin/project') Project URL Lookup
- if canDisplayAdminRedirect
- li
- a(href=settings.adminUrl) Switch to Admin
- if canDisplaySplitTestMenu
- li
- a(href='/admin/split-test') Manage Feature Flags
- if canDisplaySurveyMenu
- li
- a(href='/admin/survey') Manage Surveys
- if canDisplayScriptLogMenu
- li
- a(href='/admin/script-logs') View Script Logs
-
- // 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
- li.dropdown(class=item.class)
- a.dropdown-toggle(
- href='#'
- role='button'
- aria-haspopup='true'
- aria-expanded='false'
- data-toggle='dropdown'
- event-tracking='menu-expand'
- event-tracking-mb='true'
- event-tracking-trigger='click'
- event-segmentation={item: item.trackingKey, location: 'top-menu'}
- )
- | !{translate(item.text)}
- span.caret
- ul.dropdown-menu
- each child in item.dropdown
- if child.divider
- li.divider
- else if child.isContactUs
- li
- a(
- data-ol-open-contact-form-modal='contact-us'
- href
- event-tracking='menu-click'
- event-tracking-mb='true'
- event-tracking-trigger='click'
- event-segmentation={item: 'contact', location: 'top-menu'}
- )
- span
- | #{translate("contact_us")}
- else
- li
- if child.url
- a(
- href=child.url
- class=child.class
- event-tracking='menu-click'
- event-tracking-mb='true'
- event-tracking-trigger='click'
- event-segmentation={item: child.trackingKey, location: 'top-menu'}
- ) !{translate(child.text)}
- else
- | !{translate(child.text)}
- else
- li(class=item.class)
- if item.url
- a(
- href=item.url
- class=item.class
- event-tracking='menu-click'
- event-tracking-mb='true'
- event-tracking-trigger='click'
- event-segmentation={item: item.trackingKey, location: 'top-menu'}
- ) !{translate(item.text)}
- else
- | !{translate(item.text)}
-
- // logged out
- if !getSessionUser()
- // register link
- if hasFeature('registration-page')
- li.primary
- a(
- href='/register'
- event-tracking='menu-click'
- event-tracking-action='clicked'
- event-tracking-trigger='click'
- event-tracking-mb='true'
- event-segmentation={page: currentUrl, item: 'register', location: 'top-menu'}
- ) #{translate('sign_up')}
-
- // login link
- li.secondary
- a(
- href='/login'
- event-tracking='menu-click'
- event-tracking-action='clicked'
- event-tracking-trigger='click'
- event-tracking-mb='true'
- event-segmentation={page: currentUrl, item: 'login', location: 'top-menu'}
- ) #{translate('log_in')}
-
- // projects link and account menu
- if getSessionUser()
- li.secondary
- a(href='/project') #{translate('Projects')}
- li.secondary.dropdown
- a.dropdown-toggle(
- href='#'
- role='button'
- aria-haspopup='true'
- aria-expanded='false'
- data-toggle='dropdown'
- event-tracking='menu-expand'
- event-tracking-mb='true'
- event-tracking-trigger='click'
- event-segmentation={item: 'account', location: 'top-menu'}
- )
- | #{translate('Account')}
- span.caret
- ul.dropdown-menu
- li
- .subdued #{getSessionUser().email}
- li.divider.hidden-xs.hidden-sm
- li
- a(href='/user/settings') #{translate('account_settings')}
- if nav.showSubscriptionLink
- li
- a(href='/user/subscription') #{translate('subscription')}
- li.divider.hidden-xs.hidden-sm
- li
- form(method='POST' action='/logout')
- input(name='_csrf' type='hidden' value=csrfToken)
- button.btn-link.text-left.dropdown-menu-button #{translate('log_out')}
diff --git a/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx b/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx
index b2de102624..035a9a5268 100644
--- a/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx
+++ b/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx
@@ -9,33 +9,20 @@ export default function HeaderLogoOrTitle({
overleafLogo?: string
}) {
const { appName } = getMeta('ol-ExposedSettings')
- if (customLogo) {
- return (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
-
- )
- } else if (title) {
- return (
-
- {title}
-
- )
- } else {
- const style = overleafLogo
- ? {
- style: {
- backgroundImage: `url("${overleafLogo}")`,
- },
- }
- : null
- return (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
-
- )
- }
+ const logoUrl = customLogo ?? overleafLogo
+ return (
+
+ {(customLogo || !title) && (
+
+ )}
+ {title && (
+
+ {title}
+
+ )}
+
+ )
}
diff --git a/services/web/frontend/stylesheets/components/navbar.scss b/services/web/frontend/stylesheets/components/navbar.scss
index c9ac5ab054..6916bc94c2 100644
--- a/services/web/frontend/stylesheets/components/navbar.scss
+++ b/services/web/frontend/stylesheets/components/navbar.scss
@@ -5,6 +5,8 @@
// Default navbar
.navbar-default {
+ --bs-navbar-brand-padding-y: 0;
+
background-color: var(--navbar-bg);
border-color: var(--navbar-border);
padding: var(--navbar-padding);
@@ -22,27 +24,48 @@
display: flex;
align-items: center;
justify-content: space-between;
- flex: 1;
+ flex: 1 1 0;
+ min-width: 0;
}
.navbar-brand {
- width: var(--navbar-brand-width);
height: $header-height;
- padding: 0;
- background: var(--navbar-brand-image-url) no-repeat left center;
- background-size: contain;
- }
-
- .navbar-title {
- display: inline-block;
- font-size: var(--navbar-title-font-size);
- color: var(--navbar-title-color);
text-decoration: none;
+ z-index: 15;
+ display: flex;
+ gap: var(--spacing-08);
+ max-width: 100%;
+ min-width: 0;
&:hover,
&:active,
&:focus {
- color: var(--navbar-title-color-hover);
+ text-decoration: none;
+ }
+
+ .navbar-logo {
+ flex: 0 0 auto;
+ width: var(--navbar-brand-width);
+ height: $header-height;
+ padding: 0;
+ background: var(--navbar-brand-image-url) no-repeat left center;
+ background-size: contain;
+ }
+
+ .navbar-title {
+ display: inline-block;
+ font-size: var(--navbar-title-font-size);
+ color: var(--navbar-title-color);
+ text-decoration: none;
+ align-self: center;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: var(--navbar-title-color-hover);
+ }
}
}
@@ -130,6 +153,10 @@
.navbar-form {
border-color: var(--navbar-border);
}
+
+ .navbar-collapse:not(.show, .collapsing) {
+ flex: 0 0 auto; // allow navbar title to expand without overflowing
+ }
}
@include media-breakpoint-only(lg) {
diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
index 4fdffebb72..7848f1e7f7 100644
--- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
@@ -18,18 +18,10 @@
--navbar-toggler-expanded-bg: none;
--navbar-toggler-expanded-color: var(--content-secondary);
- .navbar-header > a {
- position: relative;
- z-index: 15;
-
+ .navbar-header .navbar-logo {
@include media-breakpoint-up(md) {
- &.navbar-brand {
- top: var(--spacing-05);
- }
-
- &.navbar-title {
- padding-top: var(--spacing-05);
- }
+ position: relative;
+ top: var(--spacing-05);
}
}