From 2cd38e9a8f25dbfcb177be97ef65eb747bff46e5 Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@tableflip.io>
Date: Fri, 6 Jul 2018 09:55:30 +0100
Subject: [PATCH 1/2] feat: navbar width toggle

Click on the logo to collapse the side nav. Click again to get it back.

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>
---
 src/App.js                        | 21 +++++++++++----
 src/navigation/NavBar.js          | 44 ++++++++++++++++++-------------
 src/navigation/NavBar.stories.js  |  5 ++--
 src/navigation/ipfs-logo-text.svg |  1 +
 src/navigation/ipfs-logo.svg      | 18 ++++++++++++-
 5 files changed, 62 insertions(+), 27 deletions(-)
 create mode 100644 src/navigation/ipfs-logo-text.svg

diff --git a/src/App.js b/src/App.js
index 97f11d1c2..46dbe2ef7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,23 +16,34 @@ export class App extends Component {
     ]).isRequired
   }
 
+  state = {
+    isNavOpen: true
+  }
+
+  onToggleNavbar = () => {
+    this.setState(s => ({isNavOpen: !s.isNavOpen}))
+  }
+
   componentWillMount () {
     this.props.doInitIpfs()
   }
 
   render () {
     const Page = this.props.route
+    const {isNavOpen} = this.state
     return (
       <div className='sans-serif' onClick={navHelper(this.props.doUpdateUrl)}>
-        <div className='dt dt--fixed' style={{height: '100vh'}}>
-          <div className='dtc v-top bg-navy' style={{width: 240}}>
-            <NavBar />
+        <div className='flex' style={{minHeight: '100vh'}}>
+          <div className='flex-none bg-navy'>
+            <div className=''>
+              <NavBar open={isNavOpen} onToggle={this.onToggleNavbar} />
+            </div>
           </div>
-          <div className='dtc v-top'>
+          <div className='flex-auto'>
             <div style={{background: '#F0F6FA'}}>
               <IpldExploreForm />
             </div>
-            <main style={{padding: '40px'}}>
+            <main className='bg-white' style={{padding: '40px'}}>
               <Page />
             </main>
           </div>
diff --git a/src/navigation/NavBar.js b/src/navigation/NavBar.js
index 57a9bb996..d331006e6 100644
--- a/src/navigation/NavBar.js
+++ b/src/navigation/NavBar.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
 import ipfsLogo from './ipfs-logo.svg'
+import ipfsLogoText from './ipfs-logo-text.svg'
 import StrokeMarketing from '../icons/StrokeMarketing'
 import StrokeWeb from '../icons/StrokeWeb'
 import StrokeCube from '../icons/StrokeCube'
@@ -10,6 +11,7 @@ import StrokeIpld from '../icons/StrokeIpld'
 const NavLink = ({
   to,
   icon,
+  open,
   exact,
   disabled,
   children,
@@ -22,8 +24,8 @@ const NavLink = ({
   const active = exact ? hash === href : hash && hash.startsWith(href)
   const cls = active ? className + ' ' + activeClassName : className
   return (
-    <a href={disabled ? null : href} className={cls} role='menuitem'>
-      <span className='dtc v-mid tr' style={{width: 100}}>
+    <a href={disabled ? null : href} className={cls} role='menuitem' title={children}>
+      <span className={`dtc v-mid ${open ? 'tr' : 'tc'}`} style={{width: 100}}>
         <Svg
           style={{
             width: 50,
@@ -32,31 +34,35 @@ const NavLink = ({
           className='fill-current-color' />
       </span>
       <span className='dtc v-mid pl3'>
-        {children}
+        {open ? children : null}
       </span>
     </a>
   )
 }
 
-export const NavBar = ({isSettingsEnabled}) => (
-  <div>
-    <a href='#/' className='db' style={{paddingTop: 35}}>
-      <img className='db center' style={{height: 70}} src={ipfsLogo} alt='IPFS' />
-    </a>
-    <nav className='db pt4' role='menubar'>
-      <NavLink to='/' exact icon={StrokeMarketing}>Status</NavLink>
-      <NavLink to='/files/' icon={StrokeWeb}>Files</NavLink>
-      <NavLink to='/explore' icon={StrokeIpld}>IPLD</NavLink>
-      <NavLink to='/peers' icon={StrokeCube}>Peers</NavLink>
-      <NavLink to='/settings' icon={StrokeSettings} disabled={!isSettingsEnabled}>Settings</NavLink>
-    </nav>
-  </div>
-)
+export const NavBar = ({isSettingsEnabled, open, onToggle}) => {
+  const width = open ? 250 : 100
+  return (
+    <div style={{width}}>
+      <div className='pointer' style={{paddingTop: 35}} onClick={onToggle}>
+        <img className='center' style={{height: 70, display: open ? 'block' : 'none'}} src={ipfsLogoText} alt='IPFS' title='Toggle navbar' />
+        <img className='center' style={{height: 70, display: open ? 'none' : 'block'}} src={ipfsLogo} alt='IPFS' title='Toggle navbar' />
+      </div>
+      <nav className='db pt4' role='menubar'>
+        <NavLink to='/' exact icon={StrokeMarketing} open={open}>Status</NavLink>
+        <NavLink to='/files/' icon={StrokeWeb} open={open}>Files</NavLink>
+        <NavLink to='/explore' icon={StrokeIpld} open={open}>IPLD</NavLink>
+        <NavLink to='/peers' icon={StrokeCube} open={open}>Peers</NavLink>
+        <NavLink to='/settings' icon={StrokeSettings} disabled={!isSettingsEnabled} open={open}>Settings</NavLink>
+      </nav>
+    </div>
+  )
+}
 
-export const NavBarContainer = ({configRaw}) => {
+export const NavBarContainer = ({configRaw, ...props}) => {
   const isSettingsEnabled = !!configRaw.data
   return (
-    <NavBar isSettingsEnabled={isSettingsEnabled} />
+    <NavBar isSettingsEnabled={isSettingsEnabled} {...props} />
   )
 }
 
diff --git a/src/navigation/NavBar.stories.js b/src/navigation/NavBar.stories.js
index 9076f49e2..975c600dd 100644
--- a/src/navigation/NavBar.stories.js
+++ b/src/navigation/NavBar.stories.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { checkA11y } from '@storybook/addon-a11y'
+import { action } from '@storybook/addon-actions'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
 
 import { NavBar } from './NavBar'
@@ -9,7 +10,7 @@ storiesOf('Nav', module)
   .addDecorator(checkA11y)
   .addDecorator(withKnobs)
   .add('sidebar', () => (
-    <div className='sans-serif bg-navy' style={{width: 240}}>
-      <NavBar isSettingsEnabled={boolean('isSettingsEnabled', true)} />
+    <div className='sans-serif bg-navy dib'>
+      <NavBar isSettingsEnabled={boolean('isSettingsEnabled', true)} open={boolean('open', true)} onToggle={action('onToggle')} />
     </div>
   ))
diff --git a/src/navigation/ipfs-logo-text.svg b/src/navigation/ipfs-logo-text.svg
new file mode 100644
index 000000000..5d24074b6
--- /dev/null
+++ b/src/navigation/ipfs-logo-text.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 553 235.3"><defs><style>.cls-1{fill:#fff}.cls-2{fill:#469ea2}.cls-3{fill:#6acad1}.cls-4,.cls-5{fill:#083b54}.cls-4{fill-opacity:.15}.cls-5{fill-opacity:.05}</style></defs><title>IPFS logo (new)</title><path class="cls-1" d="M239 63h17.8v105H239V63zm35.6 0h36.3c7.9 0 14.5.9 19.6 2.6s9.2 4.1 12.1 7.1a24.45 24.45 0 0 1 6.2 10.2 40.75 40.75 0 0 1 1.8 12.1 45.69 45.69 0 0 1-1.8 12.9 26.58 26.58 0 0 1-6.2 10.8 30.59 30.59 0 0 1-12.1 7.3c-5.1 1.8-11.5 2.7-19.3 2.7h-19.1V168h-17.5V63zm36.2 51a38.37 38.37 0 0 0 11.1-1.3 16.3 16.3 0 0 0 6.8-3.7 13.34 13.34 0 0 0 3.5-5.8 29.75 29.75 0 0 0 1-7.6 25.68 25.68 0 0 0-1-7.7 12 12 0 0 0-3.6-5.5 17.15 17.15 0 0 0-6.9-3.4 41.58 41.58 0 0 0-10.9-1.2h-18.5V114h18.5zm119.9-51v15.3h-49.2V108h46.3v15.4h-46.3V168h-17.8V63h67zm26.2 72.9c.8 6.9 3.3 11.9 7.4 15s10.4 4.7 18.6 4.7a32.61 32.61 0 0 0 10.1-1.3 20.52 20.52 0 0 0 6.6-3.5 12 12 0 0 0 3.5-5.2 19.08 19.08 0 0 0 1-6.4 16.14 16.14 0 0 0-.7-4.9 12.87 12.87 0 0 0-2.6-4.5 16.59 16.59 0 0 0-5.1-3.6 35 35 0 0 0-8.2-2.4l-13.4-2.5a89.76 89.76 0 0 1-14.1-3.7 33.51 33.51 0 0 1-10.4-5.8 22.28 22.28 0 0 1-6.3-8.8 34.1 34.1 0 0 1-2.1-12.7 26 26 0 0 1 11.3-22.4 36.35 36.35 0 0 1 12.6-5.6 65.89 65.89 0 0 1 15.8-1.8c7.2 0 13.3.8 18.2 2.5a34.46 34.46 0 0 1 11.9 6.5 28.21 28.21 0 0 1 6.9 9.3 42.1 42.1 0 0 1 3.2 11l-16.8 2.6c-1.4-5.9-3.7-10.2-7.1-13.1s-8.7-4.3-16.1-4.3a43.9 43.9 0 0 0-10.5 1.1 19.47 19.47 0 0 0-6.8 3.1 11.63 11.63 0 0 0-3.7 4.6 14.08 14.08 0 0 0-1.1 5.4c0 4.6 1.2 8 3.7 10.3s6.9 4 13.2 5.3l14.5 2.8c11.1 2.1 19.2 5.6 24.4 10.5s7.8 12.1 7.8 21.4a31.37 31.37 0 0 1-2.4 12.3 25.27 25.27 0 0 1-7.4 9.8 36.58 36.58 0 0 1-12.4 6.6 56 56 0 0 1-17.3 2.4c-13.4 0-24-2.8-31.6-8.5s-11.9-14.4-12.6-26.2h18z"/><path class="cls-2" d="M30.3 164l84 48.5 84-48.5V67l-84-48.5-84 48.5v97z"/><path class="cls-3" d="M105.7 30.1l-61 35.2a18.19 18.19 0 0 1 0 3.3l60.9 35.2a14.55 14.55 0 0 1 17.3 0l60.9-35.2a18.19 18.19 0 0 1 0-3.3L123 30.1a14.55 14.55 0 0 1-17.3 0zm84 48.2l-61 35.6a14.73 14.73 0 0 1-8.6 15l.1 70a15.57 15.57 0 0 1 2.8 1.6l60.9-35.2a14.73 14.73 0 0 1 8.6-15V79.9a20 20 0 0 1-2.8-1.6zm-150.8.4a15.57 15.57 0 0 1-2.8 1.6v70.4a14.38 14.38 0 0 1 8.6 15l60.9 35.2a15.57 15.57 0 0 1 2.8-1.6v-70.4a14.38 14.38 0 0 1-8.6-15L38.9 78.7z"/><path class="cls-2" d="M114.3 29l75.1 43.4v86.7l-75.1 43.4-75.1-43.4V72.3L114.3 29m0-10.3l-84 48.5v97l84 48.5 84-48.5v-97l-84-48.5z"/><path class="cls-2" d="M114.9 132h-1.2A15.66 15.66 0 0 1 98 116.3v-1.2a15.66 15.66 0 0 1 15.7-15.7h1.2a15.66 15.66 0 0 1 15.7 15.7v1.2a15.66 15.66 0 0 1-15.7 15.7zm0 64.5h-1.2a15.65 15.65 0 0 0-13.7 8l14.3 8.2 14.3-8.2a15.65 15.65 0 0 0-13.7-8zm83.5-48.5h-.6a15.66 15.66 0 0 0-15.7 15.7v1.2a15.13 15.13 0 0 0 2 7.6l14.3-8.3V148zm-14.3-89a15.4 15.4 0 0 0-2 7.6v1.2a15.66 15.66 0 0 0 15.7 15.7h.6V67.2L184.1 59zm-69.8-40.3L100 26.9a15.73 15.73 0 0 0 13.7 8.1h1.2a15.65 15.65 0 0 0 13.7-8l-14.3-8.3zM44.6 58.9l-14.3 8.3v16.3h.6a15.66 15.66 0 0 0 15.7-15.7v-1.2a16.63 16.63 0 0 0-2-7.7zM30.9 148h-.6v16.2l14.3 8.3a15.4 15.4 0 0 0 2-7.6v-1.2A15.66 15.66 0 0 0 30.9 148z"/><path class="cls-4" d="M114.3 213.2v-97.1l-84-48.5v97.1z"/><path class="cls-5" d="M198.4 163.8v-97l-84 48.5v97.1z"/></svg>
\ No newline at end of file
diff --git a/src/navigation/ipfs-logo.svg b/src/navigation/ipfs-logo.svg
index 5d24074b6..a1e2c7f49 100644
--- a/src/navigation/ipfs-logo.svg
+++ b/src/navigation/ipfs-logo.svg
@@ -1 +1,17 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 553 235.3"><defs><style>.cls-1{fill:#fff}.cls-2{fill:#469ea2}.cls-3{fill:#6acad1}.cls-4,.cls-5{fill:#083b54}.cls-4{fill-opacity:.15}.cls-5{fill-opacity:.05}</style></defs><title>IPFS logo (new)</title><path class="cls-1" d="M239 63h17.8v105H239V63zm35.6 0h36.3c7.9 0 14.5.9 19.6 2.6s9.2 4.1 12.1 7.1a24.45 24.45 0 0 1 6.2 10.2 40.75 40.75 0 0 1 1.8 12.1 45.69 45.69 0 0 1-1.8 12.9 26.58 26.58 0 0 1-6.2 10.8 30.59 30.59 0 0 1-12.1 7.3c-5.1 1.8-11.5 2.7-19.3 2.7h-19.1V168h-17.5V63zm36.2 51a38.37 38.37 0 0 0 11.1-1.3 16.3 16.3 0 0 0 6.8-3.7 13.34 13.34 0 0 0 3.5-5.8 29.75 29.75 0 0 0 1-7.6 25.68 25.68 0 0 0-1-7.7 12 12 0 0 0-3.6-5.5 17.15 17.15 0 0 0-6.9-3.4 41.58 41.58 0 0 0-10.9-1.2h-18.5V114h18.5zm119.9-51v15.3h-49.2V108h46.3v15.4h-46.3V168h-17.8V63h67zm26.2 72.9c.8 6.9 3.3 11.9 7.4 15s10.4 4.7 18.6 4.7a32.61 32.61 0 0 0 10.1-1.3 20.52 20.52 0 0 0 6.6-3.5 12 12 0 0 0 3.5-5.2 19.08 19.08 0 0 0 1-6.4 16.14 16.14 0 0 0-.7-4.9 12.87 12.87 0 0 0-2.6-4.5 16.59 16.59 0 0 0-5.1-3.6 35 35 0 0 0-8.2-2.4l-13.4-2.5a89.76 89.76 0 0 1-14.1-3.7 33.51 33.51 0 0 1-10.4-5.8 22.28 22.28 0 0 1-6.3-8.8 34.1 34.1 0 0 1-2.1-12.7 26 26 0 0 1 11.3-22.4 36.35 36.35 0 0 1 12.6-5.6 65.89 65.89 0 0 1 15.8-1.8c7.2 0 13.3.8 18.2 2.5a34.46 34.46 0 0 1 11.9 6.5 28.21 28.21 0 0 1 6.9 9.3 42.1 42.1 0 0 1 3.2 11l-16.8 2.6c-1.4-5.9-3.7-10.2-7.1-13.1s-8.7-4.3-16.1-4.3a43.9 43.9 0 0 0-10.5 1.1 19.47 19.47 0 0 0-6.8 3.1 11.63 11.63 0 0 0-3.7 4.6 14.08 14.08 0 0 0-1.1 5.4c0 4.6 1.2 8 3.7 10.3s6.9 4 13.2 5.3l14.5 2.8c11.1 2.1 19.2 5.6 24.4 10.5s7.8 12.1 7.8 21.4a31.37 31.37 0 0 1-2.4 12.3 25.27 25.27 0 0 1-7.4 9.8 36.58 36.58 0 0 1-12.4 6.6 56 56 0 0 1-17.3 2.4c-13.4 0-24-2.8-31.6-8.5s-11.9-14.4-12.6-26.2h18z"/><path class="cls-2" d="M30.3 164l84 48.5 84-48.5V67l-84-48.5-84 48.5v97z"/><path class="cls-3" d="M105.7 30.1l-61 35.2a18.19 18.19 0 0 1 0 3.3l60.9 35.2a14.55 14.55 0 0 1 17.3 0l60.9-35.2a18.19 18.19 0 0 1 0-3.3L123 30.1a14.55 14.55 0 0 1-17.3 0zm84 48.2l-61 35.6a14.73 14.73 0 0 1-8.6 15l.1 70a15.57 15.57 0 0 1 2.8 1.6l60.9-35.2a14.73 14.73 0 0 1 8.6-15V79.9a20 20 0 0 1-2.8-1.6zm-150.8.4a15.57 15.57 0 0 1-2.8 1.6v70.4a14.38 14.38 0 0 1 8.6 15l60.9 35.2a15.57 15.57 0 0 1 2.8-1.6v-70.4a14.38 14.38 0 0 1-8.6-15L38.9 78.7z"/><path class="cls-2" d="M114.3 29l75.1 43.4v86.7l-75.1 43.4-75.1-43.4V72.3L114.3 29m0-10.3l-84 48.5v97l84 48.5 84-48.5v-97l-84-48.5z"/><path class="cls-2" d="M114.9 132h-1.2A15.66 15.66 0 0 1 98 116.3v-1.2a15.66 15.66 0 0 1 15.7-15.7h1.2a15.66 15.66 0 0 1 15.7 15.7v1.2a15.66 15.66 0 0 1-15.7 15.7zm0 64.5h-1.2a15.65 15.65 0 0 0-13.7 8l14.3 8.2 14.3-8.2a15.65 15.65 0 0 0-13.7-8zm83.5-48.5h-.6a15.66 15.66 0 0 0-15.7 15.7v1.2a15.13 15.13 0 0 0 2 7.6l14.3-8.3V148zm-14.3-89a15.4 15.4 0 0 0-2 7.6v1.2a15.66 15.66 0 0 0 15.7 15.7h.6V67.2L184.1 59zm-69.8-40.3L100 26.9a15.73 15.73 0 0 0 13.7 8.1h1.2a15.65 15.65 0 0 0 13.7-8l-14.3-8.3zM44.6 58.9l-14.3 8.3v16.3h.6a15.66 15.66 0 0 0 15.7-15.7v-1.2a16.63 16.63 0 0 0-2-7.7zM30.9 148h-.6v16.2l14.3 8.3a15.4 15.4 0 0 0 2-7.6v-1.2A15.66 15.66 0 0 0 30.9 148z"/><path class="cls-4" d="M114.3 213.2v-97.1l-84-48.5v97.1z"/><path class="cls-5" d="M198.4 163.8v-97l-84 48.5v97.1z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="512" width="512" viewBox="0 0 511.99999 511.99998">
+    <defs>
+        <linearGradient id="a" y2="771.51" gradientUnits="userSpaceOnUse" x2="527.72" y1="771.51" x1="84.315">
+            <stop stop-color="#4a9ea1" offset="0"/>
+        </linearGradient>
+        <linearGradient id="b" y2="771.48" gradientUnits="userSpaceOnUse" x2="512.36" y1="771.48" x1="99.675">
+            <stop stop-color="#63d3d7" offset="0"/>
+        </linearGradient>
+    </defs>
+    <path d="M84.315 899.51l221.7 128 221.7-128v-256l-221.7-127.99-221.7 128z" fill="url(#a)" transform="translate(-50.017 -515.51)"/>
+    <path fill="url(#b)" d="M283.13 546.35l-160.74 92.806a38.396 38.396 0 0 1 0 8.59l160.75 92.805c13.554-10 32.043-10 45.597 0l160.75-92.807a38.343 38.343 0 0 1-.001-8.588l-160.74-92.806c-13.554 10.001-32.044 10.001-45.599 0zm221.79 127.03L344 767.22c1.884 16.739-7.361 32.751-22.799 39.489l.18 184.58a38.386 38.386 0 0 1 7.439 4.294l160.75-92.805c-1.884-16.739 7.36-32.752 22.799-39.49v-185.61a38.397 38.397 0 0 1-7.44-4.294zm-397.81 1.032a38.387 38.387 0 0 1-7.438 4.295v185.61c15.438 6.738 24.683 22.75 22.799 39.489l160.74 92.806a38.4 38.4 0 0 1 7.44-4.295v-185.61c-15.439-6.738-24.684-22.75-22.8-39.49l-160.74-92.81z" transform="translate(-50.017 -515.51)"/>
+    <g>
+        <path d="M256 512l221.7-128V128L256 256v256z" fill-opacity=".251"/>
+        <path d="M256 512V256L34.3 128v256L256 512z" fill-opacity=".039"/>
+        <path d="M34.298 128l221.7 128 221.7-128-221.7-128-221.7 128z" fill-opacity=".13"/>
+    </g>
+</svg>

From 36ac9eff69a843e82ba7c5b9db0cfbce7c81bed1 Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@tableflip.io>
Date: Fri, 6 Jul 2018 10:09:05 +0100
Subject: [PATCH 2/2] remove redundent div

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>
---
 src/App.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 46dbe2ef7..d115d17a1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -35,9 +35,7 @@ export class App extends Component {
       <div className='sans-serif' onClick={navHelper(this.props.doUpdateUrl)}>
         <div className='flex' style={{minHeight: '100vh'}}>
           <div className='flex-none bg-navy'>
-            <div className=''>
-              <NavBar open={isNavOpen} onToggle={this.onToggleNavbar} />
-            </div>
+            <NavBar open={isNavOpen} onToggle={this.onToggleNavbar} />
           </div>
           <div className='flex-auto'>
             <div style={{background: '#F0F6FA'}}>