feat(okidoc-site): Redesign 2 column navigation

wix-incubator · Apr 23, 2019 · cfd6887 · cfd6887
1 parent 03fab59
commit cfd6887
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 16 deletions.
diff --git a/packages/okidoc-site/site/src/assets/stylesheets/_variables.scss b/packages/okidoc-site/site/src/assets/stylesheets/_variables.scss
@@ -55,7 +55,8 @@ $lang-select-pressed-text: #fff !default; // color of language tab text when mou
 ////////////////////
 $content-top-padding: 40px !default;
 $header-height: 60px !default;
-$nav-width: 230px !default; // width of the navbar
+$nav-width: 420px !default; // width of the navbar
+$single-nav-width: 220px;
 $examples-width: 50% !default; // portion of the screen taken up by code examples
 $main-padding: 28px !default; // padding to left and right of content & examples
 $nav-padding: 25px !default; // padding to left and right of navbar

diff --git a/packages/okidoc-site/site/src/assets/stylesheets/screen.scss b/packages/okidoc-site/site/src/assets/stylesheets/screen.scss
@@ -89,6 +89,15 @@ body {
 // TABLE OF CONTENTS
 ////////////////////////////////////////////////////////////////////////////////
 
+#toc {
+  overflow: hidden;
+  font-size: 12px;
+
+  & li {
+    line-height: 26px;
+  }
+}
+
 #toc > ul > li > a > span {
   float: right;
 
@@ -118,6 +127,10 @@ body {
   border-right: 1px solid #f0f4f7;
   background-color: $nav-bg;
 
+  &.single {
+    width: $single-nav-width;
+  }
+
   // language selector for mobile devices
   .lang-selector {
     display: none;
@@ -167,6 +180,8 @@ body {
   }
 
   .toc-h1 {
+    font-size: 14px;
+    line-height: 32px;
     font-weight: 600;
   }
 
@@ -183,10 +198,10 @@ body {
   }
 
   .toc-footer {
-    margin-top: 1em;
-    padding: 1em 0;
-
-    border-top: 1px dashed $nav-footer-border-color;
+    float: left;
+    width: $single-nav-width;
+    border-right: 1px solid #dadada;
+    padding-bottom: 10px;
 
     li,
     a {
@@ -207,7 +222,6 @@ body {
   transition-timing-function: linear;
   transition-duration: 130ms;
   transition-property: background;
-  white-space: nowrap;
   text-decoration: none;
   text-overflow: ellipsis;
 
@@ -276,6 +290,10 @@ body {
 
   background-color: $main-bg;
 
+  &.single-navigation {
+    margin-left: $single-nav-width;
+  }
+
   // The dark box is what gives the code samples their dark background.
   // It sits essentially under the actual content block, which has a
   // transparent background.

diff --git a/packages/okidoc-site/site/src/components/Navigation/Navigation.js b/packages/okidoc-site/site/src/components/Navigation/Navigation.js
@@ -16,7 +16,7 @@ class Navigation extends Component {
   }
 
   render() {
-    const { headings, navigation } = this.props;
+    const { headings, navigation, isSinglenavigationItem } = this.props;
     const { isOpen } = this.state;
 
     return (
@@ -29,14 +29,18 @@ class Navigation extends Component {
             }));
           }}
         />
-        <div className={classNames('toc-wrapper', { open: isOpen })}>
-          <NavigationHeadings headings={headings} />
-          {navigation &&
-            navigation.length > 0 && (
-              <div className="toc-footer">
-                <NavigationItems items={navigation} />
-              </div>
-            )}
+        <div
+          className={classNames('toc-wrapper', {
+            open: isOpen,
+            single: isSinglenavigationItem,
+          })}
+        >
+          {navigation && navigation.length > 0 && (
+            <div className="toc-footer">
+              <NavigationItems items={navigation} />
+            </div>
+          )}
+          {headings.length > 1 && <NavigationHeadings headings={headings} />}
         </div>
       </Fragment>
     );

diff --git a/packages/okidoc-site/site/src/templates/md.js b/packages/okidoc-site/site/src/templates/md.js
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import renderHtmlAst from '../utils/renderHtmlAst';
 
 import Navigation from '../components/Navigation';
@@ -31,15 +32,22 @@ function Template({ match, location, data: { site, page } }) {
 
   const layout = (page.frontmatter && page.frontmatter.layout) || 'two-column';
   const isSimpleLayout = layout === SIMPLE_LAYOUT;
+  const isSinglenavigationItem =
+    (headings && headings.length <= 1) || NAVIGATION.length === 0;
 
   return (
     <Fragment>
       <Navigation
         location={location}
         headings={headings}
         navigation={NAVIGATION}
+        isSinglenavigationItem={isSinglenavigationItem}
       />
-      <div className={`page-wrapper ${layout}-layout`}>
+      <div
+        className={classNames(`page-wrapper ${layout}-layout`, {
+          'single-navigation': isSinglenavigationItem,
+        })}
+      >
         {!isSimpleLayout && <div className="dark-box" />}
         <CatchDemoLinks>
           <div className="content">