3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-25 20:48:50 +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) { 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

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

@ -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(

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 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;

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

@ -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 {

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

@ -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}>

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

@ -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;
} }