mobile navigation

1 files changed, 19 insertions, 13 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 3a825770..0764281a 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -11,9 +11,10 @@ import Chat from './components/Chat';
 import Post from './components/Post';
 import Thread from './components/Thread';
 import LoginButton from './components/LoginButton';
-import { AvatarLink } from './components/Avatar';
+import Avatar from './components/Avatar';
 import Header from './components/Header';
 import SearchBox from './components/SearchBox';
+import NavigationIcon from './components/NavigationIcon';
 
 import cookies from 'react-cookies';
 
@@ -31,10 +32,12 @@ export default class App extends React.Component {
       visitor: {
         uid: Number(cookies.load('_juick_uid')),
         hash: cookies.load('hash')
-      }
+      },
+      appMarginLeft: 'inherit'
     };
     this.pm = React.createRef();
     this.thread = React.createRef();
+    this.sidebar = React.createRef();
   }
 
   initES = () => {
@@ -85,20 +88,22 @@ export default class App extends React.Component {
     location.search = `?search=${searchString}`;
     history.push(location);
   }
+  toggleSidebar = () => {
+    let width = this.sidebar.current.style.width;
+    this.sidebar.current.style.width = width === '248px' ? '0' : '248px';
+    this.setState({
+      appMarginLeft: this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit'
+    });
+  }
   render() {
     const user = this.state.visitor;
     return (
       <Router>
         <>
-          <Header>
+          <Header style={{ marginLeft: this.state.appMarginLeft }}>
             <div id="header_wrapper">
-              {user.uid > 0 ?
-                <div id="ctitle">
-                  {user.uname ? <AvatarLink user={user} /> : <Icon name="ei-spinner" size="m" />}
-                </div>
-                :
-                <div id="logo"><Link to="/">Juick</Link></div>
-              }
+              <NavigationIcon onToggle={this.toggleSidebar} />
+              <div id="logo" className="desktop"><Link to="/">Juick</Link></div>
               <div id="search" className="desktop">
                 <SearchBox pathname="/discover" onSearch={this.search} {...this.props} />
               </div>
@@ -133,7 +138,7 @@ export default class App extends React.Component {
               </nav>
             </div>
           </Header>
-          <div id="wrapper">
+          <div id="wrapper" style={{ marginLeft: this.state.appMarginLeft }}>
             <section id="content">
               <Switch>
                 <Route exact path="/" render={(props) => <Discussions visitor={user} {...props} />} />
@@ -154,7 +159,8 @@ export default class App extends React.Component {
                 <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
               </Switch>
             </section>
-            <aside id="sidebar">
+            <aside id="sidebar" ref={this.sidebar}>
+              <Avatar user={user} />
               <Link to="/?show=my">
                 <Icon name="ei-clock" size="s" />
                 <span className="desktop">My feed</span>
@@ -173,7 +179,7 @@ export default class App extends React.Component {
               </Link>
             </aside>
           </div>
-          <div id="footer">
+          <div id="footer" style={{ marginLeft: this.state.appMarginLeft }}>
             <div id="footer-right"> &middot;
                 <a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
                 <a href="/help/tos" rel="nofollow">TOS</a>