Sidebar navigation fixes

4 files changed, 19 insertions, 16 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 835d3b9f..af364fe2 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -91,13 +91,16 @@ export default class App extends React.Component {
     history.push(location);
   }
   toggleSidebar = () => {
-    let width = this.sidebar.current.style.width;
-    this.sidebar.current.style.width = width === '248px' ? '0' : '248px';
-    let leftMargin = this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit';
-    this.setState({
-      appMarginLeft: leftMargin
-    });
-    app.style.marginLeft = leftMargin;
+    const isMobile = window.matchMedia('width < 62.5rem');
+    if (isMobile.matches) {
+      let width = this.sidebar.current.style.width;
+      this.sidebar.current.style.width = width === '248px' ? '0' : '248px';
+      let leftMargin = this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit';
+      this.setState({
+        appMarginLeft: leftMargin
+      });
+      app.style.marginLeft = leftMargin;
+    }
   }
   render() {
     const user = this.state.visitor;
@@ -171,19 +174,19 @@ export default class App extends React.Component {
             user.uid > 0 &&
             <aside id="sidebar" ref={this.sidebar}>
               <Avatar user={user} />
-              <Link to="/?show=my">
+              <Link to="/?show=my" onClick={this.toggleSidebar}>
                 <Icon name="ei-clock" size="s" />
                 <span className="desktop">My feed</span>
               </Link>
-              <Link to="/pm">
+              <Link to="/pm" onClick={this.toggleSidebar}>
                 <Icon name="ei-envelope" size="s" />
                 <span className="desktop">Messages</span>
               </Link>
-              <Link to="/?show=discuss">
+              <Link to="/?show=discuss" onClick={this.toggleSidebar}>
                 <Icon name="ei-bell" size="s" />
                 <span className="desktop">Discussions</span>
               </Link>
-              <Link to="/settings" rel="nofollow">
+              <Link to="/settings" rel="nofollow" onClick={this.toggleSidebar}>
                 <Icon name="ei-gear" size="s" />
                 <span className="desktop">Settings</span>
               </Link>
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 66e6ca02..5766f2ac 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -49,7 +49,7 @@ export default class MessageInput extends React.Component {
     }
 
     componentDidMount() {
-        const isMobile = window.matchMedia('only screen and (max-width: 850px)');
+        const isMobile = window.matchMedia('only screen and (width <62.5rem)');
         if (!isMobile.matches) {
             this.textarea.current.focus();
         }
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js
index 9c15f562..ea632073 100644
--- a/vnext/src/components/Settings.js
+++ b/vnext/src/components/Settings.js
@@ -143,7 +143,7 @@ export default class Settings extends React.Component {
                             <p>
                                 {
                                     me.jids.map(jid =>
-                                        <React.Fragment key="jid">
+                                        <React.Fragment key={jid}>
                                             <label><input type="radio" name="delete" value={jid} />{jid}</label><br />
                                         </React.Fragment>
                                     )
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 187173b0..b35b2e2d 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -81,14 +81,14 @@ hr {
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 1fr;
     grid-template-rows: min-content minmax(1fr, min-content) min-content;
-    transition: margin-left 0.4s;
+    transition: margin-left 0.2s;
 }
 
 #header {
     grid-area: header;
     background: #fff;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
-    transition: transform 0.4s;
+    transition: transform 0.2s;
     overflow-x: hidden;
 }
 .header--hidden {
@@ -105,7 +105,7 @@ hr {
 
 #sidebar {
     color: #222;
-    transition: width 0.4s;
+    transition: width 0.2s;
     position: fixed;
     width: 0;
     top: 0;