Fix/responsive docs pages (#1174)

ethanshar · web-flow · commit fae574fce944 · 2021-02-04T11:49:44.000+02:00
* Support showing navbar in mobile

* More minor responsive fixes

* Fix margin top in navbar on mobile
diff --git a/uilib-docs/src/components/fab/index.js b/uilib-docs/src/components/fab/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import menuIcon from '../../images/newDesign/menu.svg';
+import './index.scss';
+
+export default ({onClick}) => {
+  return (
+    <button className="fab" onClick={onClick}>
+      <img src={menuIcon} />
+    </button>
+  );
+};
diff --git a/uilib-docs/src/components/fab/index.scss b/uilib-docs/src/components/fab/index.scss
@@ -0,0 +1,21 @@
+@import 'src/styles/constants';
+
+.fab {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  
+  bottom: 20px;
+  right: 20px;
+  padding: 10px;
+  background-color: $dark80;
+  box-shadow: 1px 1px 5px rgba($dark10, 0.2);
+  z-index: 200;
+  
+
+  @include desktop {
+    display: none;
+  }
+}
diff --git a/uilib-docs/src/components/layout.js b/uilib-docs/src/components/layout.js
@@ -21,15 +21,18 @@ const Layout = ({children, location}) => {
           }
         }
       }
-    `);
+    `
+  );
 
   const {pathname} = location;
-  const {site: {siteMetadata}} = data;
-  
+  const {
+    site: {siteMetadata}
+  } = data;
+
   const metaTitle = siteMetadata.title;
   const metaDescription = siteMetadata.description;
   const pathPrefix = `/${siteMetadata.domain}`;
-  
+
   const showSidebar = _.replace(pathname, pathPrefix, '') !== '/';
   return (
     <div className="layout">
@@ -43,8 +46,17 @@ const Layout = ({children, location}) => {
         <meta property="twitter:title" content={metaTitle} />
         <meta property="twitter:description" content={metaDescription} />
         <link rel="canonical" href="https://wix.github.io/react-native-ui-lib/" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" integrity="sha512-9+422Bs3A87UkWfp+qV80Nfv9arhbCXKY1rxrF2seorI36mIIstMiuBfyKLF1yH1nnzQkEWq2xrzT4XU3Z+vrA==" crossorigin="anonymous"></script>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" />
+        <script
+          src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"
+          integrity="sha512-9+422Bs3A87UkWfp+qV80Nfv9arhbCXKY1rxrF2seorI36mIIstMiuBfyKLF1yH1nnzQkEWq2xrzT4XU3Z+vrA=="
+          crossorigin="anonymous"
+        ></script>
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css"
+          integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg=="
+          crossorigin="anonymous"
+        />
       </Helmet>
       <Header githubDomain={siteMetadata.github} />
       {/* <div className={`main ${!showSidebar ? 'fill' : ''}`}> */}
diff --git a/uilib-docs/src/components/layout.scss b/uilib-docs/src/components/layout.scss
@@ -12,11 +12,15 @@
     display: flex;
     flex: 1;
     height: 100%;
+    width: 100%;
     border-top: 0;
     // overflow-y: auto;
     // overflow-x: hidden;
-    width: 80%;
     min-width: 50vw;
+    
+    @include desktop {
+      width: 80%;
+    }
   }
 
   .content {
@@ -25,7 +29,9 @@
     width: 100%;
 
     &.with-navbar {
-      padding-left: $navbarWidth;
+      @include desktop {
+        padding-left: $navbarWidth;
+      }
     }
   }
 }
diff --git a/uilib-docs/src/components/navbar/index.js b/uilib-docs/src/components/navbar/index.js
@@ -7,9 +7,11 @@ import './index.scss';
 import searchIcon from '../../images/search.svg';
 import clearIcon from '../../images/delete.svg';
 import Item from './item';
+import Fab from '../fab';
 
 class Navbar extends Component {
   state = {
+    showNavbar: false,
     filter: ''
   };
 
@@ -28,7 +30,7 @@ class Navbar extends Component {
       return _.flow(
         p => _.split(p, '/'),
         items => _.filter(items, i => !_.isEmpty(i)),
-        _.last,
+        _.last
       )(path);
     }
   };
@@ -57,6 +59,12 @@ class Navbar extends Component {
     return filteredComponents;
   }
 
+  toggleNavbar = value => {
+    this.setState({
+      showNavbar: _.isBoolean(value) ? value : !this.state.showNavbar
+    });
+  };
+
   renderSearch = () => {
     const {filter} = this.state;
     const clearButtonClassName = classnames('clear-button', {
@@ -65,11 +73,7 @@ class Navbar extends Component {
     return (
       <div className="search">
         <img src={searchIcon} />
-        <input
-          placeholder="Search..."
-          onChange={this.setFilter}
-          value={filter}
-        />
+        <input placeholder="Search..." onChange={this.setFilter} value={filter} />
         <button className={clearButtonClassName} onClick={this.resetSearch}>
           <img src={clearIcon} />
         </button>
@@ -79,37 +83,42 @@ class Navbar extends Component {
 
   renderNavbar = data => {
     const currentPage = this.getCurrentPage();
-    const {filter} = this.state;
+    const {filter, showNavbar} = this.state;
     const markdowns = this.getMarkdownPages(data);
     const components = this.getNavbarComponents(data);
     const filteredComponents = _.filter(components, component =>
       _.includes(_.lowerCase(component.node.displayName), _.lowerCase(filter))
     );
 
-    const componentsByGroups = _.groupBy(
-      filteredComponents,
-      c => _.split(c.node.displayName, '.')[0]
-    );
+    const componentsByGroups = _.groupBy(filteredComponents, c => _.split(c.node.displayName, '.')[0]);
+
+    const navbarClassName = classnames('navbar', {
+      visible: showNavbar
+    });
 
     return (
-      <div className="navbar">
-        {this.renderSearch()}
-        <ul>
-          {_.map(markdowns, page => {
-            return <Item id={page.title} link={page.path} />;
-          })}
-          <li className="separator" />
-          {_.map(componentsByGroups, (components, key) => {
-            return (
-              <Item
-                id={key}
-                components={components}
-                currentPage={currentPage}
-              ></Item>
-            );
-          })}
-        </ul>
-      </div>
+      <>
+        <div className={navbarClassName}>
+          {this.renderSearch()}
+          <ul>
+            {_.map(markdowns, page => {
+              return <Item id={page.title} link={page.path} onLinkClick={() => this.toggleNavbar(false)} />;
+            })}
+            <li className="separator" />
+            {_.map(componentsByGroups, (components, key) => {
+              return (
+                <Item
+                  id={key}
+                  components={components}
+                  currentPage={currentPage}
+                  onLinkClick={() => this.toggleNavbar(false)}
+                ></Item>
+              );
+            })}
+          </ul>
+        </div>
+        <Fab onClick={this.toggleNavbar} />
+      </>
     );
   };
 
@@ -125,7 +134,12 @@ class Navbar extends Component {
                 }
               }
             }
-            allFile(filter: {sourceInstanceName: {eq: "markdown-pages"}, childMarkdownRemark: {frontmatter: {path: {ne: null}}}}) {
+            allFile(
+              filter: {
+                sourceInstanceName: {eq: "markdown-pages"}
+                childMarkdownRemark: {frontmatter: {path: {ne: null}}}
+              }
+            ) {
               edges {
                 node {
                   childMarkdownRemark {
diff --git a/uilib-docs/src/components/navbar/index.scss b/uilib-docs/src/components/navbar/index.scss
@@ -1,16 +1,30 @@
 @import 'src/styles/constants';
 
 .navbar {
+  display: none;
   position: fixed;
-  width: $navbarWidth;
   height: calc(100% - #{$headerHeight});
+  width: 100%;
+  background-color: $white;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 20px;
   padding-top: 0;
   border-radius: 2px;
-  margin-top: 20px;
   border-right: 2px solid $dark80;
+  z-index: 100;
+
+  &.visible {
+    display: initial;
+  }
+
+  @include desktop {
+    opacity: 1;
+    display: initial;
+    width: $navbarWidth;
+    background-color: initial;
+    margin-top: 20px;
+  }
 
   .search {
     position: sticky;
diff --git a/uilib-docs/src/components/navbar/item.js b/uilib-docs/src/components/navbar/item.js
@@ -5,26 +5,26 @@ import classnames from 'classnames';
 
 const undocumentedGroups = ['Incubator'];
 
-export default ({id, link, components, currentPage}) => {
+export default ({id, link, components, currentPage, onLinkClick}) => {
   const hasChildren = _.size(components) > 1;
 
   if (!hasChildren) {
-    return <ItemEntry id={id} link={link} currentPage={currentPage} />;
+    return <ItemEntry id={id} link={link} currentPage={currentPage} onLinkClick={onLinkClick} />;
   } else {
     return (
       <li key={id}>
         {undocumentedGroups.includes(id) ? (
           <span class={classnames('entry', {selected: id === currentPage})}>{id}</span>
         ) : (
-          <Link key={id} to={`/docs/${id}/`}>
+          <Link key={id} to={`/docs/${id}/`} onClick={onLinkClick}>
             <span class={classnames('entry', {selected: id === currentPage})}>{id}</span>
           </Link>
         )}
 
         <ul class="nested">
           {_.map(_.filter(components, c => c.node.displayName !== id), c => {
             return (
-              <ItemEntry id={c.node.displayName} currentPage={currentPage} />
+              <ItemEntry id={c.node.displayName} currentPage={currentPage} onLinkClick={onLinkClick}/>
             );
           })}
         </ul>
@@ -33,10 +33,10 @@ export default ({id, link, components, currentPage}) => {
   }
 };
 
-const ItemEntry = ({id, link, currentPage}) => {
+const ItemEntry = ({id, link, currentPage, onLinkClick}) => {
   return (
     <li key={id}>
-      <Link key={id} to={link || `/docs/${id}/`}>
+      <Link key={id} to={link || `/docs/${id}/`} onClick={onLinkClick}>
         <span class={classnames('entry', {selected: id === currentPage})}>
           {id}
         </span>
diff --git a/uilib-docs/src/images/newDesign/menu.svg b/uilib-docs/src/images/newDesign/menu.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="black"/>
+</svg>
diff --git a/uilib-docs/src/pages/index.scss b/uilib-docs/src/pages/index.scss
@@ -39,6 +39,7 @@
   flex-direction: column;
   margin: auto;
   align-items: center;
+  padding: 0 20px;
 
   .main-section {
     position: relative;
@@ -144,7 +145,7 @@
 
       code {
         display: inline-block;
-        white-space: pre;
+        white-space: break-spaces;
         text-align: left;
         background: $dark10;
         padding: 10px;
diff --git a/uilib-docs/src/pages/sections/LibrariesSection.scss b/uilib-docs/src/pages/sections/LibrariesSection.scss
@@ -2,7 +2,7 @@
 
 .libraries-section {
   width: 100vw;
-  padding: 0 20%;
+  padding: 0 40px;
   height: 250px;
   display: flex;
   flex-direction: column;
@@ -13,6 +13,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    padding: 0 20%;
   }
 
   .headline {
diff --git a/uilib-docs/src/templates/components.scss b/uilib-docs/src/templates/components.scss
@@ -215,7 +215,10 @@ $tabletOfContentWidth: 20vw;
   flex-direction: row;
   flex: 1;
   justify-content: center;
-  width: $containerWidth;
+
+  @include desktop {
+    width: $containerWidth;
+  }
 
   div {
     display: block;
@@ -228,6 +231,7 @@ $tabletOfContentWidth: 20vw;
   }
 
   .sidebar {
+    display: none;
     position: fixed;
     right: 0;
     bottom: 0;
@@ -240,6 +244,10 @@ $tabletOfContentWidth: 20vw;
 
     @include tabletOfContent();
     @include visuals();
+
+    @include desktop {
+      display: initial;
+    }
   }
 
   .component-header {
diff --git a/uilib-docs/src/templates/markdown.scss b/uilib-docs/src/templates/markdown.scss
