revert sidebar changes temporarily

mfickett · Aug 7, 2018 · 55ead6c · 55ead6c
1 parent c6e6566
commit 55ead6c
Show file tree

Hide file tree

Showing 7 changed files with 4,789 additions and 157 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "next": "^6.0.3",
-    "perfect-scrollbar": "^1.4.0",
     "raw-loader": "^0.5.1",
     "react": "^16.4.1",
     "react-collapse": "^4.0.3",

diff --git a/pages/doc.js b/pages/doc.js
@@ -7,7 +7,6 @@ import Page from '../src/Page'
 import SearchForm from '../src/SearchForm'
 import DownloadButton from '../src/DownloadButton'
 import Page404 from '../src/Page404'
-import PerfectScrollbar from 'perfect-scrollbar';
 // utils
 import fetch from 'isomorphic-fetch'
 import kebabCase from 'lodash.kebabcase'
@@ -25,7 +24,6 @@ const HeadInjector = ({ sectionName = 'Documentation' }) => (
   <Head>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/perfect-scrollbar@1.4.0/css/perfect-scrollbar.min.css" />
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />
     <title>{sectionName} | Data Science Version Control System</title>
   </Head>
@@ -43,12 +41,7 @@ export default class Documentation extends Component {
   componentDidMount() {
     this.loadStateFromURL();
     this.initDocsearch();
-    window.addEventListener('popstate', this.loadStateFromURL);
-    this.ps = new PerfectScrollbar('#sidebar-menu');
-  }
-
-  componentDidUpdate() {
-    this.ps.update();
+    window.addEventListener('popstate', this.loadStateFromURL)
   }
 
   initDocsearch = () => {
@@ -184,86 +177,85 @@ export default class Documentation extends Component {
     window.removeEventListener('popstate', this.loadStateFromURL)
   }
 
-  renderMenu = ({ currentSection, currentFile, headings }) => (
-    <SectionLinks>
-      {
-        sidebar.map(({ name, files = [], labels = {}, indexFile }, index) => {
-          const isSectionActive = currentSection === index;
-          return (
-            <div key={index}>
-              <SectionLink
-                level={1} 
-                href={this.getLinkHref(index, indexFile ? undefined : files[0])}
-                onClick={(e) => this.onSectionSelect(index, e)}
-                className={isSectionActive ? 'docSearch-lvl0' : ''} 
-                isActive={isSectionActive}
-              >
-                {name}
-              </SectionLink>
-
-              {/* Section Files */}
-              <Collapse isOpen={isSectionActive} items={files.length + headings.length}>
-                {files && files.map((file, fileIndex) => {
-                  const isFileActive = currentFile === file;
-                  return (
-                    <div key={`file-${fileIndex}`}>
-                      <SectionLink 
-                        level={2}
-                        href={this.getLinkHref(index, file)}
-                        onClick={(e) => this.onFileSelect(file, index, e)}
-                        isActive={isFileActive}
-                      >
-                        {labels[file] || startCase(file.slice(0, -3))}
-                      </SectionLink>
-
-                      {/* File Headings */}
-                      <Collapse isOpen={isFileActive} items={headings.length}>
-                        {!!headings.length && headings.map(({ text, slug }, headingIndex) => (
-                          <SectionLink 
-                            level={3}
-                            key={`link-${headingIndex}`}
-                            onClick={() => this.scrollToLink('#' + slug)}
-                            href={`#${slug}`}
-                          >
-                            {text}
-                          </SectionLink>
-                        ))}
-                      </Collapse>
-                    </div>
-                  )}
-                )}
-              </Collapse>
-            </div>
-          )
-        })
-      }
-    </SectionLinks>
-  );
-
   render() {
-    const { currentSection, currentFile, markdown, pageNotFound } = this.state
+    const { currentSection, currentFile, markdown, headings, pageNotFound } = this.state
     const githubLink = `https://github.com/iterative/dvc.org/blob/master${sidebar[currentSection].folder}/${currentFile}`
     const sectionName = sidebar[currentSection].name;
 
     return (
       <Page stickHeader={true}>
         <HeadInjector sectionName={sectionName} />
         <Container>
-          <Side>
-            <SearchArea>
-              <SearchForm />
-            </SearchArea>
-            <Menu id="sidebar-menu">
+          <Side id="doc-sidebar">
+            <Menu>
+              {/* Search */}
+              <SearchArea>
+                <SearchForm />
+              </SearchArea>
+
+              {/* Sections */}
               <Sections>
-                {this.renderMenu(this.state)}
+                <SectionLinks>
+                  {
+                    sidebar.map(({ name, files = [], labels = {}, indexFile }, index) => {
+                      const isSectionActive = currentSection === index;
+                      return (
+                        <div key={index}>
+                          <SectionLink
+                            level={1} 
+                            href={this.getLinkHref(index, indexFile ? undefined : files[0])}
+                            onClick={(e) => this.onSectionSelect(index, e)}
+                            className={isSectionActive ? 'docSearch-lvl0' : ''} 
+                            isActive={isSectionActive}
+                          >
+                            {name}
+                          </SectionLink>
+
+                          {/* Section Files */}
+                          <Collapse isOpen={isSectionActive} items={files.length + headings.length}>
+                            {files && files.map((file, fileIndex) => {
+                              const isFileActive = currentFile === file;
+                              return (
+                                <div key={`file-${fileIndex}`}>
+                                  <SectionLink 
+                                    level={2}
+                                    href={this.getLinkHref(index, file)}
+                                    onClick={(e) => this.onFileSelect(file, index, e)}
+                                    isActive={isFileActive}
+                                  >
+                                    {labels[file] || startCase(file.slice(0, -3))}
+                                  </SectionLink>
+
+                                  {/* File Headings */}
+                                  <Collapse isOpen={isFileActive} items={headings.length}>
+                                    {!!headings.length && headings.map(({ text, slug }, headingIndex) => (
+                                      <SectionLink 
+                                        level={3}
+                                        key={`link-${headingIndex}`}
+                                        onClick={() => this.scrollToLink('#' + slug)}
+                                        href={`#${slug}`}
+                                      >
+                                        {text}
+                                      </SectionLink>
+                                    ))}
+                                  </Collapse>
+                                </div>
+                              )}
+                            )}
+                          </Collapse>
+                        </div>
+                      )
+                    })
+                  }
+                </SectionLinks>
               </Sections>
+
               <OnlyDesktop>
                 <SideFooter>
                   <DownloadButton />
                 </SideFooter>
               </OnlyDesktop>
             </Menu>
-
           </Side>
 
           {pageNotFound
@@ -295,74 +287,51 @@ const Container = styled.div`
 `
 
 const Side = styled.div`
+  position: sticky;
+  top: 0;
+  height: calc(100vh - 80px);
   flex-basis: 33.7%;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-end;
+  justify-content: flex-end;
   background-color: #eef4f8;
+  overflow: auto;
 
-  ${media.phablet`
-    flex-basis: auto;
-    flex: 1;
-    align-items: flex-start;
-  `};
-`
-
-const SearchArea = styled.div`
-  min-width: 280px;
-  height: 60px;
-  margin-right: 25px;
-  display: flex;
-  align-items: center;
-  background-color: #eef4f8;
-  z-index: 10;
-
-  position: sticky;
-  top: 0;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
 
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: rgba(150, 150, 150, 0.5);
+    border-radius: 6px;
+    border-width: 1px 1px 1px 3px;
+  }
 
   ${media.phablet`
-    position: relative;
-    margin-left: 25px;
+    flex-basis: auto;
+    flex: 1;
   `};
-
-  form {
-    height: 40px;
-  }
 `
 
 const Menu = styled.div`
   max-width: 280px;
-  padding-right: 20px;
+  margin-right: 18px;
   margin-left: 10px;
-
-  position: sticky;
-  top: 60px;
-  height: calc(100vh - 140px);
-  overflow-y: scroll;
+  padding: 30px 10px 30px 0;
 
   ${media.phablet`
     width: 100%;
     max-width: none;
-    position: relative;
-    top: 0;
-    height: auto;
-    overflow-y: auto;
-    padding: 0 20px;
+    margin-right: 0px;
+    margin-left: 20px;
   `};
+`
 
-
-  // &::-webkit-scrollbar {
-  //   width: 6px;
-  // }
-
-  // &::-webkit-scrollbar-thumb {
-  //   background-clip: padding-box;
-  //   background-color: rgba(150, 150, 150, 0.5);
-  //   border-radius: 6px;
-  //   border-width: 1px 1px 1px 3px;
-  // }
+const SearchArea = styled.div`
+  margin-top: 10px;
+  margin-bottom: 20px;
+  min-width: 280px;
+  height: 44px;
 `
 
 const Sections = styled.div`
@@ -450,6 +419,5 @@ const Collapse = styled.div`
 `
 
 const SideFooter = styled.div`
-  margin-bottom: 30px;
-  margin-top: 30px;
+  margin-bottom: 20px;
 `
diff --git a/src/DownloadButton/index.js b/src/DownloadButton/index.js
@@ -246,7 +246,8 @@ const Popup = styled.div`
   position: absolute;
   left: 0px;
   right: 0px;
-  bottom: calc(100% + 3px);
+  bottom: 3px;
+  transform: translateY(100%);
   background-color: #ffffff;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
 `

diff --git a/src/Layout/index.js b/src/Layout/index.js
@@ -30,8 +30,6 @@ export default class Layout extends Component {
     this.bodybag = document.getElementById('bodybag');
     this.bodybag.addEventListener('scroll', this.handleScrollThrottled)
     this.handleScroll()
-    this.isDocPage = window.location.pathname.split('/')[1] === 'doc'
-
   }
 
   componentWillUnmount() {
@@ -51,7 +49,7 @@ export default class Layout extends Component {
 
     return (
       <Wrapper>
-        <TopMenu scrolled={this.isDocPage || scrolled} />
+        <TopMenu scrolled={scrolled} />
         <HamburgerMenu />
         <Bodybag id="bodybag" ref={ref => this.bodybag = ref}>
           {children}
@@ -76,5 +74,4 @@ const Bodybag = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
   transition: top .2s linear;
-  scroll-behavior: smooth;
 `