mobile navigation

7 files changed, 34 insertions, 9 deletions

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>
+            </>
         );
     }
 }