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

feat(v2): style up sidebar

Browse source
This commit is contained in:
Yangshun Tay 2018-10-15 23:04:06 -07:00
parent 0e78eff1a7
commit e0d96a4b38
6 changed files with 69 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

6
v2/lib/load/routes.js
View file

@ -11,9 +11,9 @@ async function genRoutesConfig({docsMetadatas = {}, pagesMetadatas = []}) {
render(loaded, props) {
let Content = loaded.default;
return (
<Docs {...props} metadata={${JSON.stringify(metadata)}}>
<Doc {...props} metadata={${JSON.stringify(metadata)}}>
<Content />
</Docs>
</Doc>
);
}
})
@ -55,7 +55,7 @@ async function genRoutesConfig({docsMetadatas = {}, pagesMetadatas = []}) {
`import React from 'react';\n` +
`import Loadable from 'react-loadable';\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 NotFound from '@theme/NotFound';\n` +
`const routes = [${docsRoutes},${pagesMetadatas

2
v2/lib/load/theme.js
View file

@ -7,7 +7,7 @@ module.exports = function loadConfig(siteDir) {
? customThemePath
: path.resolve(__dirname, '../theme');
const themeComponents = ['Docs', 'Pages', 'Loading', 'NotFound', 'Markdown'];
const themeComponents = ['Doc', 'Pages', 'Loading', 'NotFound', 'Markdown'];
themeComponents.forEach(component => {
if (!require.resolve(path.join(themePath, component))) {
throw new Error(

31
v2/lib/theme/Docs/index.js → v2/lib/theme/Doc/index.js
View file

@ -4,35 +4,37 @@ import {Link} from 'react-router-dom';
import Helmet from 'react-helmet';
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 styles from './styles.css';
export default class Docs extends React.Component {
class Doc extends React.Component {
render() {
const {
route,
siteConfig,
docsMetadatas,
docsSidebars,
location,
metadata,
pagesMetadatas,
siteConfig,
route,
} = this.props;
const {language, version} = metadata;
return (
<Layout {...this.props}>
<div>
<Helmet>
<title>{(metadata && metadata.title) || siteConfig.title}</title>
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
{version && <meta name="docsearch:version" content={version} />}
</Helmet>
<Sidebar
docsMetadatas={docsMetadatas}
docsSidebars={docsSidebars}
metadata={metadata}
/>
<div className={styles.mainContainer}>
<Sidebar
docsMetadatas={docsMetadatas}
docsSidebars={docsSidebars}
metadata={metadata}
/>
<div className={styles.docContainer}>
<div className={styles.docContent}>{this.props.children}</div>
<div className={styles.paginatorContainer}>
@ -42,8 +44,15 @@ export default class Docs extends React.Component {
/>
</div>
</div>
<Footer
docsMetadatas={docsMetadatas}
location={location}
pagesMetadatas={pagesMetadatas}
/>
</div>
</Layout>
</div>
);
}
}
export default Doc;

6
v2/lib/theme/Docs/styles.css → v2/lib/theme/Doc/styles.css
View file

@ -1,9 +1,5 @@
.mainContainer {
display: flex;
flex-direction: row;
margin-left: auto;
margin-right: auto;
justify-content: space-between;
padding-left: 300px;
}
.docContainer {

14
v2/lib/theme/Sidebar/index.js
View file

@ -25,7 +25,7 @@ function Sidebar(props) {
return (
<li key={linkID}>
<Link
className={classnames(styles.sidebarLink, {
className={classnames(styles.sidebarLink, styles.sidebarItem, {
[styles.sidebarLinkActive]: activeItem,
})}
to={linkMetadata.permalink}>
@ -39,13 +39,21 @@ function Sidebar(props) {
const category = thisSidebar[categoryName];
return (
<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}>
{Array.isArray(category)
? category.map(renderItemLink)
: Object.keys(category).map(subCategoryName => (
<div className={styles.sidebarSubGroup} key={subCategoryName}>
<h4 className={styles.sidebarSubGroupTitle}>
<h4
className={classnames(
styles.sidebarGroupTitle,
styles.sidebarGroupSubtitle,
styles.sidebarItem,
)}>
{subCategoryName}
</h4>
<ul className={styles.sidebarList}>

55
v2/lib/theme/Sidebar/styles.css
View file

@ -1,41 +1,52 @@
.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;
padding: 0 20px;
}
.sidebarGroup {
margin-bottom: 20px;
}
.sidebarSubGroup {
margin-top: 10px;
margin-left: 10px;
}
.sidebarSubGroupTitle {
font-size: 16px;
margin: 0;
}
.sidebarGroupTitle {
font-size: 18px;
margin: 0;
font-size: 1em;
font-weight: 500;
}
.sidebarGroupSubtitle {
color: rgb(96, 103, 112);
}
.sidebarList {
margin: 0;
list-style-type: none;
padding-left: 0;
padding-left: 8px;
}
.sidebarItem {
line-height: 20px;
margin: 0;
padding: 8px 12px;
}
.sidebarLink {
border-radius: 4px;
color: #717171;
display: block;
padding: 8px 0;
font-size: 0.875em;
text-decoration: none;
transition: color 0.3s;
transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
}
.sidebarLink:hover,
.sidebarLinkActive {
.sidebarLink:hover {
background-color: #f5f6f7;
}
.sidebarLinkActive,
.sidebarLinkActive:hover {
background-color: rgb(0, 163, 136, 0.1);
color: #00a388;
}