mobile navigation

9 files changed, 66 insertions, 28 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>
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index dfa197c1..9cb03267 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -6,13 +6,13 @@ import { UserType } from './Types';
 
 const Avatar = React.memo(props => {
     return (
-        <div style={{ display: 'flex' }}>
+        <div style={{ display: 'flex', padding: '12px' }}>
             <div className="msg-avatar">
                 <Link to={{ pathname: props.link || `/${props.user.uname}/` }}>
                     <img src={props.user.avatar} alt={`${props.user.uname}`} />
                 </Link>
             </div>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                 <span>
                     <Link to={{ pathname: `/${props.user.uname}/` }}>
                         <span>{props.user.uname}</span>
diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
index be9a1573..e8558084 100644
--- a/vnext/src/components/Feeds.js
+++ b/vnext/src/components/Feeds.js
@@ -42,7 +42,9 @@ export function Blog(props) {
   };
   return (
     <>
-      <UserInfo user={user} />
+      <div className="msg-cont">
+        <UserInfo user={user} />
+      </div>
       <Feed authRequired={false} query={query} {...props} />
     </>
   );
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 43b4a676..8bf4bc8d 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -66,10 +66,11 @@ export default class Header extends React.Component {
         this.wScrollBefore = this.wScrollCurrent;
     }
     render() {
-        return (<header id="header" ref={this.header}>{this.props.children}</header>);
+        return (<header id="header" ref={this.header} style={this.props.style}>{this.props.children}</header>);
     }
 }
 
 Header.propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    style: PropTypes.style
 };
diff --git a/vnext/src/components/NavigationIcon.css b/vnext/src/components/NavigationIcon.css
new file mode 100644
index 00000000..bc5f5ac9
--- /dev/null
+++ b/vnext/src/components/NavigationIcon.css
@@ -0,0 +1,3 @@
+#navicon {
+    padding: 12px;
+}
\ No newline at end of file
diff --git a/vnext/src/components/NavigationIcon.js b/vnext/src/components/NavigationIcon.js
new file mode 100644
index 00000000..5c5415ef
--- /dev/null
+++ b/vnext/src/components/NavigationIcon.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from './Icon';
+
+import './NavigationIcon.css';
+
+export default function NavigationIcon(props) {
+    return (
+        <div id="navicon" className="mobile" onClick={props.onToggle}>
+            <Icon name="ei-navicon" size="s"/>
+        </div>
+    );
+}
+
+NavigationIcon.propTypes = {
+    onToggle: PropTypes.func.isRequired
+};
+
diff --git a/vnext/src/components/Post.js b/vnext/src/components/Post.js
index ce64018a..1776fe78 100644
--- a/vnext/src/components/Post.js
+++ b/vnext/src/components/Post.js
@@ -42,11 +42,11 @@ export default class Post extends React.Component {
   render() {
     return (
       <div className="msgs">
-        <article className="msg-cont">
+        <div className="msg-cont">
           <MessageInput rows="7" text={this.state.body} data={{ mid: 0, timestamp: '0' }} onSend={this.postMessage}>
             *weather It is very cold today!
       </MessageInput>
-        </article>
+        </div>
       </div>
     );
   }
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js
index bd9cbc5f..7b4ae2ee 100644
--- a/vnext/src/components/UserInfo.js
+++ b/vnext/src/components/UserInfo.js
@@ -27,7 +27,7 @@ export default class UserInfo extends React.Component {
     render() {
         const { user } = this.state;
         return (
-            <div className="msg-cont">
+            <>
                 <Avatar user={user}>
                     <div className="msg-ts">Was online recently</div>
                 </Avatar>
@@ -78,7 +78,7 @@ export default class UserInfo extends React.Component {
                         </>
                     }
                 </div>
-            </div>
+            </>
         );
     }
 }
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 20ff7978..69e638f6 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -45,7 +45,7 @@ img, hr {
     display: grid;
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 1fr;
-    grid-template-rows: minmax(1fr, auto) minmax(1fr, auto) auto;
+    grid-template-rows: min-content minmax(1fr, min-content) min-content;
     min-height: 100vh;
     font: -apple-system-body;
     font-family: -apple-system, Segoe UI;
@@ -56,6 +56,8 @@ img, hr {
     grid-area: header;
     background: #fff;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
+    transition: margin-left 0.4s;
+    overflow-x: hidden;
 }
 #header_wrapper, .footer_container {
     display: flex;
@@ -64,14 +66,15 @@ img, hr {
     flex-wrap: wrap;
 }
 #sidebar {
-    border-right: 1px solid #ccc;
     color: #222;
     transition: width 0.4s;
     position: fixed;
     width: 0;
     top: 0;
     left: 0;
+    margin-right: 2px;
     overflow-x: hidden;
+    overflow-y: auto;
     height: 100%;
     z-index: 1;
     display: flex;
@@ -87,7 +90,9 @@ img, hr {
     grid-area: content;
     height: 100%;
     width: 100%;
-    margin-top: 12px;    
+    margin-top: 12px;
+    overflow-x: hidden;
+    transition: margin-left 0.4s;   
 }
 
 #footer {
@@ -96,6 +101,8 @@ img, hr {
     border-top: 1px solid #ccc;
     color: #222;
     padding: 10px;
+    transition: margin-left 0.4s;
+    overflow-x: hidden;
 }
 
 .desktop {
@@ -127,7 +134,7 @@ img, hr {
     display: flex;
 }
 
-#ctitle img {
+#ctitle:first-child {
     margin-right: 5px;
     vertical-align: middle;
     max-width: 48px;
@@ -150,7 +157,7 @@ img, hr {
     padding: 14px 16px;
 }
 
-#sidebar a {
+#sidebar > a {
     color: #88958d;
     border-right: 2px solid transparent;
     display: flex;
@@ -158,7 +165,7 @@ img, hr {
     align-items: center;
     vertical-align: middle;
 }
-#sidebar a:hover {
+#sidebar > a:hover {
     background-color: #f8f8f8;
     border-right: 2px solid #ff339a;
     cursor: pointer;