mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-23 11:38:48 +02:00
feat(v2): style up sidebar
This commit is contained in:
parent
0e78eff1a7
commit
e0d96a4b38
6 changed files with 69 additions and 45 deletions
|
@ -11,9 +11,9 @@ async function genRoutesConfig({docsMetadatas = {}, pagesMetadatas = []}) {
|
||||||
render(loaded, props) {
|
render(loaded, props) {
|
||||||
let Content = loaded.default;
|
let Content = loaded.default;
|
||||||
return (
|
return (
|
||||||
<Docs {...props} metadata={${JSON.stringify(metadata)}}>
|
<Doc {...props} metadata={${JSON.stringify(metadata)}}>
|
||||||
<Content />
|
<Content />
|
||||||
</Docs>
|
</Doc>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -55,7 +55,7 @@ async function genRoutesConfig({docsMetadatas = {}, pagesMetadatas = []}) {
|
||||||
`import React from 'react';\n` +
|
`import React from 'react';\n` +
|
||||||
`import Loadable from 'react-loadable';\n` +
|
`import Loadable from 'react-loadable';\n` +
|
||||||
`import Loading from '@theme/Loading';\n` +
|
`import Loading from '@theme/Loading';\n` +
|
||||||
`import Docs from '@theme/Docs';\n` +
|
`import Doc from '@theme/Doc';\n` +
|
||||||
`import Pages from '@theme/Pages';\n` +
|
`import Pages from '@theme/Pages';\n` +
|
||||||
`import NotFound from '@theme/NotFound';\n` +
|
`import NotFound from '@theme/NotFound';\n` +
|
||||||
`const routes = [${docsRoutes},${pagesMetadatas
|
`const routes = [${docsRoutes},${pagesMetadatas
|
||||||
|
|
|
@ -7,7 +7,7 @@ module.exports = function loadConfig(siteDir) {
|
||||||
? customThemePath
|
? customThemePath
|
||||||
: path.resolve(__dirname, '../theme');
|
: path.resolve(__dirname, '../theme');
|
||||||
|
|
||||||
const themeComponents = ['Docs', 'Pages', 'Loading', 'NotFound', 'Markdown'];
|
const themeComponents = ['Doc', 'Pages', 'Loading', 'NotFound', 'Markdown'];
|
||||||
themeComponents.forEach(component => {
|
themeComponents.forEach(component => {
|
||||||
if (!require.resolve(path.join(themePath, component))) {
|
if (!require.resolve(path.join(themePath, component))) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
|
|
|
@ -4,35 +4,37 @@ import {Link} from 'react-router-dom';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
|
|
||||||
import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
|
import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
|
||||||
import Layout from '@theme/Layout'; // eslint-disable-line
|
import Footer from '@theme/Footer'; // eslint-disable-line
|
||||||
import Sidebar from '@theme/Sidebar'; // eslint-disable-line
|
import Sidebar from '@theme/Sidebar'; // eslint-disable-line
|
||||||
|
|
||||||
import styles from './styles.css';
|
import styles from './styles.css';
|
||||||
|
|
||||||
export default class Docs extends React.Component {
|
class Doc extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
route,
|
|
||||||
siteConfig,
|
|
||||||
docsMetadatas,
|
docsMetadatas,
|
||||||
docsSidebars,
|
docsSidebars,
|
||||||
|
location,
|
||||||
metadata,
|
metadata,
|
||||||
|
pagesMetadatas,
|
||||||
|
siteConfig,
|
||||||
|
route,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const {language, version} = metadata;
|
const {language, version} = metadata;
|
||||||
return (
|
return (
|
||||||
<Layout {...this.props}>
|
<div>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{(metadata && metadata.title) || siteConfig.title}</title>
|
<title>{(metadata && metadata.title) || siteConfig.title}</title>
|
||||||
{language && <html lang={language} />}
|
{language && <html lang={language} />}
|
||||||
{language && <meta name="docsearch:language" content={language} />}
|
{language && <meta name="docsearch:language" content={language} />}
|
||||||
{version && <meta name="docsearch:version" content={version} />}
|
{version && <meta name="docsearch:version" content={version} />}
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
<Sidebar
|
||||||
|
docsMetadatas={docsMetadatas}
|
||||||
|
docsSidebars={docsSidebars}
|
||||||
|
metadata={metadata}
|
||||||
|
/>
|
||||||
<div className={styles.mainContainer}>
|
<div className={styles.mainContainer}>
|
||||||
<Sidebar
|
|
||||||
docsMetadatas={docsMetadatas}
|
|
||||||
docsSidebars={docsSidebars}
|
|
||||||
metadata={metadata}
|
|
||||||
/>
|
|
||||||
<div className={styles.docContainer}>
|
<div className={styles.docContainer}>
|
||||||
<div className={styles.docContent}>{this.props.children}</div>
|
<div className={styles.docContent}>{this.props.children}</div>
|
||||||
<div className={styles.paginatorContainer}>
|
<div className={styles.paginatorContainer}>
|
||||||
|
@ -42,8 +44,15 @@ export default class Docs extends React.Component {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Footer
|
||||||
|
docsMetadatas={docsMetadatas}
|
||||||
|
location={location}
|
||||||
|
pagesMetadatas={pagesMetadatas}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default Doc;
|
|
@ -1,9 +1,5 @@
|
||||||
.mainContainer {
|
.mainContainer {
|
||||||
display: flex;
|
padding-left: 300px;
|
||||||
flex-direction: row;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.docContainer {
|
.docContainer {
|
|
@ -25,7 +25,7 @@ function Sidebar(props) {
|
||||||
return (
|
return (
|
||||||
<li key={linkID}>
|
<li key={linkID}>
|
||||||
<Link
|
<Link
|
||||||
className={classnames(styles.sidebarLink, {
|
className={classnames(styles.sidebarLink, styles.sidebarItem, {
|
||||||
[styles.sidebarLinkActive]: activeItem,
|
[styles.sidebarLinkActive]: activeItem,
|
||||||
})}
|
})}
|
||||||
to={linkMetadata.permalink}>
|
to={linkMetadata.permalink}>
|
||||||
|
@ -39,13 +39,21 @@ function Sidebar(props) {
|
||||||
const category = thisSidebar[categoryName];
|
const category = thisSidebar[categoryName];
|
||||||
return (
|
return (
|
||||||
<div className={styles.sidebarGroup} key={categoryName}>
|
<div className={styles.sidebarGroup} key={categoryName}>
|
||||||
<h3 className={styles.sidebarGroupTitle}>{categoryName}</h3>
|
<h3
|
||||||
|
className={classnames(styles.sidebarGroupTitle, styles.sidebarItem)}>
|
||||||
|
{categoryName}
|
||||||
|
</h3>
|
||||||
<ul className={styles.sidebarList}>
|
<ul className={styles.sidebarList}>
|
||||||
{Array.isArray(category)
|
{Array.isArray(category)
|
||||||
? category.map(renderItemLink)
|
? category.map(renderItemLink)
|
||||||
: Object.keys(category).map(subCategoryName => (
|
: Object.keys(category).map(subCategoryName => (
|
||||||
<div className={styles.sidebarSubGroup} key={subCategoryName}>
|
<div className={styles.sidebarSubGroup} key={subCategoryName}>
|
||||||
<h4 className={styles.sidebarSubGroupTitle}>
|
<h4
|
||||||
|
className={classnames(
|
||||||
|
styles.sidebarGroupTitle,
|
||||||
|
styles.sidebarGroupSubtitle,
|
||||||
|
styles.sidebarItem,
|
||||||
|
)}>
|
||||||
{subCategoryName}
|
{subCategoryName}
|
||||||
</h4>
|
</h4>
|
||||||
<ul className={styles.sidebarList}>
|
<ul className={styles.sidebarList}>
|
||||||
|
|
|
@ -1,41 +1,52 @@
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
border-right: 1px solid #dadde1;
|
||||||
|
bottom: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 8px;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
top: 0;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarGroup {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarSubGroup {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarSubGroupTitle {
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarGroupTitle {
|
.sidebarGroupTitle {
|
||||||
font-size: 18px;
|
font-size: 1em;
|
||||||
margin: 0;
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebarGroupSubtitle {
|
||||||
|
color: rgb(96, 103, 112);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarList {
|
.sidebarList {
|
||||||
|
margin: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding-left: 0;
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebarItem {
|
||||||
|
line-height: 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarLink {
|
.sidebarLink {
|
||||||
|
border-radius: 4px;
|
||||||
color: #717171;
|
color: #717171;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 8px 0;
|
font-size: 0.875em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: color 0.3s;
|
transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarLink:hover,
|
.sidebarLink:hover {
|
||||||
.sidebarLinkActive {
|
background-color: #f5f6f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebarLinkActive,
|
||||||
|
.sidebarLinkActive:hover {
|
||||||
|
background-color: rgb(0, 163, 136, 0.1);
|
||||||
color: #00a388;
|
color: #00a388;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue