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

Merge pull request #35534 from overleaf/cd-share-sidenav-bar-with-library

Browse Source 
[web] Share the dashboard sidebar with the library page

GitOrigin-RevId: 5595746fef6698bee6a35ee7fc8be15743e2c620
This commit is contained in:
Chris Dryden
2026-09-17 11:37:57 +00:00
committed by Copybot
parent 6af1d79cd6
commit f81a7b2ff2
13 changed files with 177 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/shared/components/sidebar/ds-nav-overleaf-logo.tsx
+22
View File
@@ -0,0 +1,22 @@
import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
import getMeta from '@/utils/meta'
import overleafLogo from '@/shared/svgs/overleaf-a-ds-solution-mallard.svg'
import overleafLogoDark from '@/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg'
export function DsNavOverleafLogo() {
const appName = getMeta('ol-ExposedSettings')?.appName ?? 'Overleaf'
const activeOverallTheme = useActiveOverallTheme()
return (
<div className="ds-nav-page-switcher-logo">
<a href="/" aria-label={appName}>
<img
src={activeOverallTheme === 'dark' ? overleafLogoDark : overleafLogo}
alt="Overleaf, A Digital Science Solution"
height="59"
width="130"
/>
</a>
</div>
)
}
services/web/frontend/js/shared/components/sidebar/ds-nav-page-switcher.tsx
-87
View File
@@ -1,87 +0,0 @@
import { useTranslation } from 'react-i18next'
import { BookBookmark, Folder } from '@phosphor-icons/react'
import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
import getMeta from '@/utils/meta'
import overleafLogo from '@/shared/svgs/overleaf-a-ds-solution-mallard.svg'
import overleafLogoDark from '@/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg'
type ActivePage = 'library' | 'projects'
export function DsNavPageSwitcher({
activePage,
showLogo = true,
onLibraryClick,
onProjectsClick,
}: {
activePage: ActivePage | undefined
showLogo?: boolean
onLibraryClick?: React.MouseEventHandler
onProjectsClick?: React.MouseEventHandler
}) {
const { t } = useTranslation()
const appName = getMeta('ol-ExposedSettings')?.appName ?? 'Overleaf'
const activeOverallTheme = useActiveOverallTheme()
return (
<>
{showLogo && (
<div className="ds-nav-page-switcher-logo">
<a href="/" aria-label={appName}>
<img
src={
activeOverallTheme === 'dark' ? overleafLogoDark : overleafLogo
}
alt="Overleaf, A Digital Science Solution"
height="59"
width="130"
/>
</a>
</div>
)}
<ul
className={`list-unstyled ds-nav-page-switcher-items${!showLogo ? ' ds-nav-page-switcher-items--no-logo' : ''}`}
>
<li>
<a
href="/library"
className={`ds-nav-page-switcher-item${activePage === 'library' ? ' active' : ''}`}
aria-current={activePage === 'library' ? 'page' : undefined}
onClick={
onLibraryClick
? e => {
e.preventDefault()
onLibraryClick(e)
}
: undefined
}
>
<BookBookmark size={24} />
<span className="ds-nav-page-switcher-item-label">
{t('library')}
</span>
</a>
</li>
<li>
<a
href="/project"
className={`ds-nav-page-switcher-item${activePage === 'projects' ? ' active' : ''}`}
aria-current={activePage === 'projects' ? 'page' : undefined}
onClick={
onProjectsClick
? e => {
e.preventDefault()
onProjectsClick(e)
}
: undefined
}
>
<Folder size={24} />
<span className="ds-nav-page-switcher-item-label">
{t('projects')}
</span>
</a>
</li>
</ul>
</>
)
}