[web] Allow OVERLEAF_NAV_TITLE and OVERLEAF_HEADER_IMAGE_URL to be used at the same time (#28445)

* Remove unused navbar-website-redesign.pug

* Add custom logo and title to the navbar settings

* Update navbar-header so it handles logo+title, and without overflowing

* Revert "Add custom logo and title to the navbar settings"

This reverts commit a860fca916714fa34befa231a0b7f43fcbcc3aee.

GitOrigin-RevId: 4d87b47a5c6f64130fe2b57c57ee8f808baef271

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

services/web/app/views/layout/navbar-website-redesign.pug

@@ -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')}

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
-      <a
-        href="/"
-        aria-label={appName}
-        className="navbar-brand"
-        style={{ backgroundImage: `url("${customLogo}")` }}
-      />
-    )
-  } else if (title) {
-    return (
-      <a href="/" aria-label={appName} className="navbar-title">
-        {title}
-      </a>
-    )
-  } else {
-    const style = overleafLogo
-      ? {
-          style: {
-            backgroundImage: `url("${overleafLogo}")`,
-          },
-        }
-      : null
-    return (
-      // eslint-disable-next-line jsx-a11y/anchor-has-content
-      <a href="/" aria-label={appName} className="navbar-brand" {...style} />
-    )
-  }
+  const logoUrl = customLogo ?? overleafLogo
+  return (
+    <a href="/" aria-label={appName} className="navbar-brand">
+      {(customLogo || !title) && (
+        <div
+          className="navbar-logo"
+          style={logoUrl ? { backgroundImage: `url("${logoUrl}")` } : {}}
+        />
+      )}
+      {title && (
+        <div className="navbar-title">
+          <span>{title}</span>
+        </div>
+      )}
+    </a>
+  )
 }

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) {

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);
       }
     }