diff --git a/v2/lib/load/routes.js b/v2/lib/load/routes.js index 8aaec70059..56b8c11241 100644 --- a/v2/lib/load/routes.js +++ b/v2/lib/load/routes.js @@ -11,9 +11,9 @@ async function genRoutesConfig({docsMetadatas = {}, pagesMetadatas = []}) { render(loaded, props) { let Content = loaded.default; return ( - + - + ); } }) @@ -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 diff --git a/v2/lib/load/theme.js b/v2/lib/load/theme.js index efc472a0c6..5145948067 100644 --- a/v2/lib/load/theme.js +++ b/v2/lib/load/theme.js @@ -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( diff --git a/v2/lib/theme/Docs/index.js b/v2/lib/theme/Doc/index.js similarity index 75% rename from v2/lib/theme/Docs/index.js rename to v2/lib/theme/Doc/index.js index 538545e706..c6f7bc8c71 100644 --- a/v2/lib/theme/Docs/index.js +++ b/v2/lib/theme/Doc/index.js @@ -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 ( - +
{(metadata && metadata.title) || siteConfig.title} {language && } {language && } {version && } +
-
{this.props.children}
@@ -42,8 +44,15 @@ export default class Docs extends React.Component { />
+
- +
); } } + +export default Doc; diff --git a/v2/lib/theme/Docs/styles.css b/v2/lib/theme/Doc/styles.css similarity index 57% rename from v2/lib/theme/Docs/styles.css rename to v2/lib/theme/Doc/styles.css index fc9df832e2..976f93c4e2 100644 --- a/v2/lib/theme/Docs/styles.css +++ b/v2/lib/theme/Doc/styles.css @@ -1,9 +1,5 @@ .mainContainer { - display: flex; - flex-direction: row; - margin-left: auto; - margin-right: auto; - justify-content: space-between; + padding-left: 300px; } .docContainer { diff --git a/v2/lib/theme/Sidebar/index.js b/v2/lib/theme/Sidebar/index.js index 8a78166ef3..ccd69b81ea 100644 --- a/v2/lib/theme/Sidebar/index.js +++ b/v2/lib/theme/Sidebar/index.js @@ -25,7 +25,7 @@ function Sidebar(props) { return (
  • @@ -39,13 +39,21 @@ function Sidebar(props) { const category = thisSidebar[categoryName]; return (
    -

    {categoryName}

    +

    + {categoryName} +

      {Array.isArray(category) ? category.map(renderItemLink) : Object.keys(category).map(subCategoryName => (
      -

      +

      {subCategoryName}

        diff --git a/v2/lib/theme/Sidebar/styles.css b/v2/lib/theme/Sidebar/styles.css index 61e43322a9..ef53985dff 100644 --- a/v2/lib/theme/Sidebar/styles.css +++ b/v2/lib/theme/Sidebar/styles.css @@ -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; }