diff --git a/docs/react/migration-v4.en-US.md b/docs/react/migration-v4.en-US.md
index 298fef8807..ed61d99981 100644
--- a/docs/react/migration-v4.en-US.md
+++ b/docs/react/migration-v4.en-US.md
@@ -1,5 +1,5 @@
---
-order: 1
+order: 7
title: V3 to V4
---
diff --git a/docs/react/migration-v4.zh-CN.md b/docs/react/migration-v4.zh-CN.md
index 09666b512b..eaa3412148 100644
--- a/docs/react/migration-v4.zh-CN.md
+++ b/docs/react/migration-v4.zh-CN.md
@@ -1,5 +1,5 @@
---
-order: 1
+order: 7
title: 从 v3 到 v4
---
diff --git a/site/theme/en-US.js b/site/theme/en-US.js
index 99cac573fc..d2ee67ba1a 100644
--- a/site/theme/en-US.js
+++ b/site/theme/en-US.js
@@ -3,8 +3,7 @@ module.exports = {
messages: {
'app.header.search': 'Search...',
'app.header.menu.home': 'Home',
- 'app.header.menu.practice': 'Practice',
- 'app.header.menu.pattern': 'Patterns',
+ 'app.header.menu.documentation': 'Documentation',
'app.header.menu.components': 'Components',
'app.header.menu.spec': 'Guidelines',
'app.header.menu.resource': 'Resources',
diff --git a/site/theme/static/common.less b/site/theme/static/common.less
index 6ba4a6bafe..ecb078f86a 100644
--- a/site/theme/static/common.less
+++ b/site/theme/static/common.less
@@ -38,6 +38,7 @@ a {
z-index: 1;
&-inner {
+ height: 100%;
max-height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
@@ -46,22 +47,56 @@ a {
&:hover &-inner {
overflow-y: auto;
}
+
+ > div,
+ > div > div {
+ height: 100%;
+ }
}
.aside-container {
+ height: 100%;
padding-bottom: 48px;
font-family: Avenir, @font-family, sans-serif;
- &.ant-menu-inline .ant-menu-submenu-title h4,
- &.ant-menu-inline > .ant-menu-item,
- &.ant-menu-inline .ant-menu-item a {
- overflow: hidden;
- font-size: 14px;
- text-overflow: ellipsis;
- }
+ &.ant-menu-inline {
+ .ant-menu-submenu-title h4,
+ > .ant-menu-item,
+ .ant-menu-item a {
+ overflow: hidden;
+ font-weight: 500;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ }
- &.ant-menu-inline .ant-menu-item-group-title {
- padding-left: 56px;
+ .ant-menu-item-group-title {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ font-size: 13px;
+
+ &::after {
+ position: relative;
+ top: 12px;
+ display: block;
+ width: calc(100% - 20px);
+ height: 1px;
+ background: @border-color-split;
+ content: '';
+ }
+ }
+
+ > .ant-menu-item,
+ > .ant-menu-submenu > .ant-menu-submenu-title,
+ > .ant-menu-item-group > .ant-menu-item-group-title,
+ > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
+ padding-left: 40px !important;
+ }
+
+ .ant-menu-item-group:first-child {
+ .ant-menu-item-group-title {
+ margin-top: 0;
+ }
+ }
}
a[disabled] {
@@ -112,12 +147,6 @@ a {
.ant-menu-item > a:hover {
color: @primary-color;
}
-
- .menu-antd-components-count {
- margin-left: 0.5em;
- color: @disabled-color;
- font-size: 12px;
- }
}
#react-content {
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index a776eee9da..0ce0d8cd16 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'bisheng/router';
import { Row, Col, Menu, Affix } from 'antd';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
import classNames from 'classnames';
import get from 'lodash/get';
import MobileMenu from 'rc-drawer';
@@ -25,15 +25,18 @@ function getModuleData(props) {
.filter(item => item)
.slice(0, 2)
.join('/');
- const moduleData =
- moduleName === 'components' ||
- moduleName === 'docs/react' ||
- moduleName === 'changelog' ||
- moduleName === 'changelog-cn'
- ? [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog]
- : props.picked[moduleName];
const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
- return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
+ let data;
+ switch (moduleName) {
+ case 'docs/react':
+ case 'changelog':
+ case 'changelog-cn':
+ data = [...props.picked['docs/react'], ...props.picked.changelog];
+ break;
+ default:
+ data = props.picked[moduleName];
+ }
+ return data.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
}
function fileNameToPath(filename) {
@@ -52,24 +55,6 @@ const getSideBarOpenKeys = nextProps => {
return shouldOpenKeys;
};
-const getSubMenuTitle = menuItem => {
- if (menuItem.title !== 'Components') {
- return menuItem.title;
- }
- let count = 0;
- menuItem.children.forEach(item => {
- if (item.children) {
- count += item.children.length;
- }
- });
- return (
-
-
- {count}
-
- );
-};
-
class MainContent extends Component {
static contextTypes = {
isMobile: PropTypes.bool.isRequired,
@@ -128,21 +113,19 @@ class MainContent extends Component {
themeConfig.typeOrder,
);
return menuItems.map(menuItem => {
+ if (menuItem.type === 'type') {
+ return (
+
+ {menuItem.children
+ .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
+ .map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))}
+
+ );
+ }
if (menuItem.children) {
return (
-
- {menuItem.children.map(child => {
- if (child.type === 'type') {
- return (
-
- {child.children
- .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
- .map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))}
-
- );
- }
- return this.generateMenuItem(false, child, footerNavIcons);
- })}
+
+ {menuItem.children.map(child => this.generateMenuItem(false, child, footerNavIcons))}
);
}
@@ -298,7 +281,7 @@ class MainContent extends Component {
});
const menuChild = (