feat: navbar width toggle (#710)

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>

src/App.js

@@ -18,23 +18,32 @@ 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'>
+            <NavBar open={isNavOpen} onToggle={this.onToggleNavbar} />
           </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>

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}>Explore</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}>Explore</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} />
   )
 }
 

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>
   ))