3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 21:03:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): add support dark logo for sidebar logo (#2434)

Browse source
This commit is contained in:
Alexey Pyltsyn 2020-03-22 05:05:09 +03:00 • committed by GitHub
parent c7101e032b
commit 5358fca09a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
View file

@ -8,6 +8,7 @@
import React, {useState, useCallback} from 'react'; import React, {useState, useCallback} from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useThemeContext from '@theme/hooks/useThemeContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
@ -116,8 +117,11 @@ function DocSidebar(props) {
const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false); const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false);
const { const {
siteConfig: {themeConfig: {navbar: {title, logo = {}} = {}}} = {}, siteConfig: {themeConfig: {navbar: {title, logo = {}} = {}}} = {},
isClient,
} = useDocusaurusContext(); } = useDocusaurusContext();
const logoUrl = useBaseUrl(logo.src); const {isDarkTheme} = useThemeContext();
const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
const logoUrl = useBaseUrl(logoSrc);
const { const {
docsSidebars, docsSidebars,
@ -149,7 +153,7 @@ function DocSidebar(props) {
return ( return (
<div className={styles.sidebar}> <div className={styles.sidebar}>
<div className={styles.sidebarLogo}> <div className={styles.sidebarLogo}>
{logo != null && <img src={logoUrl} alt={logo.alt} />} {logo != null && <img key={isClient} src={logoUrl} alt={logo.alt} />}
{title != null && <strong>{title}</strong>} {title != null && <strong>{title}</strong>}
</div> </div>
<div <div