✨ site: make document side bar sticky

close ant-design#3800
smileluo · Dec 24, 2018 · e047bb1 · e047bb1
1 parent 4bd107f
commit e047bb1
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 43 deletions.
diff --git a/site/theme/static/common.less b/site/theme/static/common.less
@@ -33,17 +33,25 @@ a {
   background: #fff;
   min-height: 500px;
   overflow: hidden;
-  border-left: 1px solid @site-border-color-split;
   position: relative;
-  margin-left: -1px;
 }
 
 .main-menu {
   z-index: 1;
+
+  &-inner {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    max-height: 100vh;
+  }
+
+  &:hover &-inner {
+    overflow-y: auto;
+  }
 }
 
 .aside-container {
-  padding-bottom: 50px;
+  padding-bottom: 48px;
   font-family: Avenir, @font-family;
 
   &.ant-menu-inline .ant-menu-submenu-title h4,

diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less
@@ -8,8 +8,9 @@ footer {
   background-color: #000;
   position: relative;
   z-index: 100;
+  margin-left: -1px;
   color: rgba(255, 255, 255, 0.65);
-  box-shadow: 0 1000px 0 1000px #fff;
+
   .ant-row {
     text-align: center;
     .footer-center {

diff --git a/site/theme/static/page-nav.less b/site/theme/static/page-nav.less
@@ -1,9 +1,7 @@
 .prev-next-nav {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: ~'calc(100% - 194px - 64px)';
   margin-left: 64px;
+  margin-right: 64px;
+  overflow: hidden;
   font-size: 14px;
   border-top: 1px solid @site-border-color-split;
 

diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'bisheng/router';
-import { Row, Col, Menu, Icon } from 'antd';
+import { Row, Col, Menu, Icon, Affix } from 'antd';
 import classNames from 'classnames';
 import MobileMenu from 'rc-drawer';
 import Article from './Article';
+import PrevAndNext from './PrevAndNext';
+import Footer from '../Layout/Footer';
 import ComponentDoc from './ComponentDoc';
 import * as utils from '../utils';
 
@@ -277,39 +279,21 @@ export default class MainContent extends React.PureComponent {
             </MobileMenu>
           ) : (
             <Col xxl={4} xl={5} lg={6} md={24} sm={24} xs={24} className="main-menu">
-              {menuChild}
+              <Affix>
+                <section className="main-menu-inner">{menuChild}</section>
+              </Affix>
             </Col>
           )}
-          <Col xxl={20} xl={19} lg={18} md={24} sm={24} xs={24} className={mainContainerClass}>
-            {props.demos ? (
-              <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} />
-            ) : (
-              <Article {...props} content={localizedPageData} />
-            )}
-          </Col>
-        </Row>
-
-        <Row>
-          <Col
-            xxl={{ span: 20, offset: 4 }}
-            xl={{ span: 19, offset: 5 }}
-            lg={{ span: 18, offset: 6 }}
-            md={24}
-            sm={24}
-            xs={24}
-          >
-            <section className="prev-next-nav">
-              {prev
-                ? React.cloneElement(prev.props.children || prev.children[0], {
-                    className: 'prev-page',
-                  })
-                : null}
-              {next
-                ? React.cloneElement(next.props.children || next.children[0], {
-                    className: 'next-page',
-                  })
-                : null}
+          <Col xxl={20} xl={19} lg={18} md={24} sm={24} xs={24}>
+            <section className={mainContainerClass}>
+              {props.demos ? (
+                <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} />
+              ) : (
+                <Article {...props} content={localizedPageData} />
+              )}
             </section>
+            <PrevAndNext prev={prev} next={next} />
+            <Footer />
           </Col>
         </Row>
       </div>

diff --git a/site/theme/template/Content/PrevAndNext.jsx b/site/theme/template/Content/PrevAndNext.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default ({ prev, next }) => (
+  <section className="prev-next-nav">
+    {prev
+      ? React.cloneElement(prev.props.children || prev.children[0], {
+          className: 'prev-page',
+        })
+      : null}
+    {next
+      ? React.cloneElement(next.props.children || next.children[0], {
+          className: 'next-page',
+        })
+      : null}
+  </section>
+);
diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx
@@ -6,6 +6,8 @@ import Banner from './Banner';
 import Page1 from './Page1';
 import Page2 from './Page2';
 import Page3 from './Page3';
+import Footer from '../Layout/Footer';
+
 // To store style which is only for Home and has conflicts with others.
 function getStyle() {
   return `
@@ -67,13 +69,14 @@ class Home extends React.Component {
     const childProps = { ...this.props, isMobile, locale: intl.locale };
     return (
       <DocumentTitle title={`Ant Design - ${intl.formatMessage({ id: 'app.home.slogan' })}`}>
-        <div className="main-wrapper">
+        <>
           <style dangerouslySetInnerHTML={{ __html: getStyle() }} /> {/* eslint-disable-line */}
           <Banner {...childProps} />
           <Page1 {...childProps} />
           <Page2 {...childProps} />
           <Page3 {...childProps} />
-        </div>
+          <Footer />
+        </>
       </DocumentTitle>
     );
   }

diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx
@@ -7,7 +7,6 @@ import 'moment/locale/zh-cn';
 import { LocaleProvider } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import Header from './Header';
-import Footer from './Footer';
 import enLocale from '../../en-US';
 import cnLocale from '../../zh-CN';
 import * as utils from '../utils';
@@ -102,7 +101,6 @@ export default class Layout extends React.Component {
             <div className="page-wrapper">
               <Header {...restProps} />
               {children}
-              <Footer {...restProps} />
             </div>
           </LocaleProvider>
         </IntlProvider>