agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 13:13:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #35395 from overleaf/em-35371-account-help-full-width-nav-items

Browse Source 
Make Account and Help full-width nav items in the sidebar

GitOrigin-RevId: 625df4622beb037acd76c6028e19b3803a8fe668
This commit is contained in:
Eric Mc Sween
2026-09-17 11:27:27 +00:00
committed by Copybot
parent 5dd86068c8
commit b0b2c8c953
5 changed files with 106 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx
+1 -2
View File
@@ -7,7 +7,6 @@ import {
OLDropdownToggle,
} from '@/shared/components/ol/ol-dropdown-menu'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
import { DropdownToggle } from 'react-bootstrap'
type RailActionButton = {
key: string
@@ -53,7 +52,7 @@ const RailActionElement = forwardRef<HTMLButtonElement, { action: RailAction }>(
>
<span>
<OLDropdownToggle
ref={ref as React.ForwardedRef<typeof DropdownToggle>}
ref={ref}
id={`rail-dropdown-btn-${action.key}`}
className="ide-rail-tab-link ide-rail-tab-button ide-rail-tab-dropdown"
as="button"
services/web/frontend/js/shared/components/ol/ol-dropdown-menu.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ export const OLDropdownToggleCustom = forwardRef<
OLDropdownToggleCustom.displayName = 'OLDropdownToggleCustom'
export const OLDropdownToggle = forwardRef<
typeof DropdownToggle,
HTMLButtonElement,
OLDropdownToggleProps
>((props, ref) => {
const registerToggle = useContext(DropdownInternalContext)?.registerToggle
services/web/frontend/js/shared/components/sidebar/ds-nav-page-switcher.tsx
+6 -2
View File
@@ -56,7 +56,9 @@ export function DsNavPageSwitcher({
}
>
<BookBookmark size={24} />
<span>{t('library')}</span>
<span className="ds-nav-page-switcher-item-label">
{t('library')}
</span>
</a>
</li>
<li>
@@ -74,7 +76,9 @@ export function DsNavPageSwitcher({
}
>
<Folder size={24} />
<span>{t('projects')}</span>
<span className="ds-nav-page-switcher-item-label">
{t('projects')}
</span>
</a>
</li>
</ul>
services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx
+76 -86
View File
@@ -1,4 +1,4 @@
import { type Ref, useState } from 'react'
import { type Ref } from 'react'
import { useTranslation } from 'react-i18next'
import { Question, User } from '@phosphor-icons/react'
import {
@@ -7,7 +7,7 @@ import {
OLDropdownMenu,
} from '@/shared/components/ol/ol-dropdown-menu'
import getMeta from '@/utils/meta'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
import MaterialIcon from '@/shared/components/material-icon'
import { NavDropdownMenuItems } from '@/shared/components/navbar/nav-dropdown-from-data'
import { NavbarDropdownItemData } from '@/shared/components/types/navbar'
import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
@@ -22,13 +22,11 @@ export function SidebarLowerSection({
children,
}: {
showThemeToggle?: boolean
accountRef?: Ref<HTMLDivElement>
accountRef?: Ref<HTMLButtonElement>
onAccountOpen?: () => void
children?: React.ReactNode
}) {
const { t } = useTranslation()
const [showAccountDropdown, setShowAccountDropdown] = useState(false)
const [showHelpDropdown, setShowHelpDropdown] = useState(false)
const { showModal: showContactUsModal, modal: contactUsModal } =
useContactUsModal({
autofillProjectUrl: false,
@@ -41,92 +39,84 @@ export function SidebarLowerSection({
return (
<>
{children}
<nav
className="d-flex flex-row gap-3 mb-2"
aria-label={t('account_help')}
>
{helpItem && (
<OLDropdown
className="ds-nav-icon-dropdown"
align="end"
onToggle={show => {
setShowHelpDropdown(show)
if (show) {
sendMB('menu-expand', { item: 'help', location: 'sidebar' })
}
}}
role="menu"
>
<OLDropdownToggle role="menuitem" aria-label={t('help')}>
<OLTooltip
description={t('help')}
id="help-icon"
overlayProps={{
placement: 'top',
}}
hidden={showHelpDropdown}
>
<div>
<Question size={24} />
</div>
</OLTooltip>
</OLDropdownToggle>
<OLDropdownMenu
popperConfig={{
modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
<nav aria-label={t('account_help')}>
<ul className="list-unstyled ds-nav-dropdown-list">
{helpItem && (
<OLDropdown
as="li"
role="none"
className="ds-nav-dropdown"
align="end"
onToggle={show => {
if (show) {
sendMB('menu-expand', { item: 'help', location: 'sidebar' })
}
}}
>
<NavDropdownMenuItems
dropdown={helpItem.dropdown}
showContactUsModal={showContactUsModal}
location="sidebar"
/>
</OLDropdownMenu>
</OLDropdown>
)}
{sessionUser && (
<OLDropdown
className="ds-nav-icon-dropdown"
align="end"
onToggle={show => {
setShowAccountDropdown(show)
if (show) {
sendMB('menu-expand', {
item: 'account',
location: 'sidebar',
})
onAccountOpen?.()
}
}}
role="menu"
>
<OLDropdownToggle role="menuitem" aria-label={t('Account')}>
<OLTooltip
description={t('Account')}
id="open-account"
overlayProps={{
placement: 'top',
}}
hidden={showAccountDropdown}
<OLDropdownToggle
role="menuitem"
className="ds-nav-page-switcher-item"
>
<div ref={accountRef}>
<User size={24} />
</div>
</OLTooltip>
</OLDropdownToggle>
<OLDropdownMenu
popperConfig={{
modifiers: [{ name: 'offset', options: { offset: [-50, 5] } }],
<Question size={24} />
<span className="ds-nav-page-switcher-item-label">
{t('help')}
</span>
<MaterialIcon type="more_vert" />
</OLDropdownToggle>
<OLDropdownMenu
popperConfig={{
modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
}}
>
<NavDropdownMenuItems
dropdown={helpItem.dropdown}
showContactUsModal={showContactUsModal}
location="sidebar"
/>
</OLDropdownMenu>
</OLDropdown>
)}
{sessionUser && (
<OLDropdown
as="li"
role="none"
className="ds-nav-dropdown"
align="end"
onToggle={show => {
if (show) {
sendMB('menu-expand', {
item: 'account',
location: 'sidebar',
})
onAccountOpen?.()
}
}}
>
<AccountMenuItems
sessionUser={sessionUser}
showSubscriptionLink={showSubscriptionLink}
showThemeToggle={showThemeToggle}
/>
</OLDropdownMenu>
</OLDropdown>
)}
<OLDropdownToggle
ref={accountRef}
role="menuitem"
className="ds-nav-page-switcher-item"
>
<User size={24} />
<span className="ds-nav-page-switcher-item-label">
{t('Account')}
</span>
<MaterialIcon type="more_vert" />
</OLDropdownToggle>
<OLDropdownMenu
popperConfig={{
modifiers: [{ name: 'offset', options: { offset: [0, 5] } }],
}}
>
<AccountMenuItems
sessionUser={sessionUser}
showSubscriptionLink={showSubscriptionLink}
showThemeToggle={showThemeToggle}
/>
</OLDropdownMenu>
</OLDropdown>
)}
</ul>
</nav>
<div className="ds-nav-ds-name" translate="no">
<span>Digital Science</span>
services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
+22 -18
View File
@@ -223,6 +223,14 @@ body {
font-size: var(--font-size-03);
text-decoration: none;
.ds-nav-page-switcher-item-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover {
background-color: var(--ds-nav-hover-bg);
color: var(--ds-nav-color);
@@ -236,8 +244,16 @@ body {
}
}
.ds-nav-dropdown-list {
display: flex;
flex-direction: column;
gap: var(--spacing-02);
padding: 0;
margin: 0;
}
.ds-nav-sidebar-lower {
padding: var(--spacing-05) var(--spacing-08) 0 var(--spacing-05);
padding: var(--spacing-05) var(--spacing-05) 0 var(--spacing-05);
border-top: solid 1px transparent;
&.show-shadow {
@@ -411,14 +427,13 @@ body {
}
}
.ds-nav-icon-dropdown {
.ds-nav-dropdown {
.dropdown-toggle {
color: var(--ds-nav-color);
width: 100%;
border: none;
background: none;
height: 44px;
width: 44px;
padding: 0;
overflow: hidden;
font-weight: normal;
text-align: left;
&:hover {
background-color: var(--ds-nav-hover-bg);
@@ -432,17 +447,6 @@ body {
&::after {
display: none;
}
> div {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.material-symbols {
vertical-align: middle;
}
}
}