ReactDOM.createPortal

1 files changed, 45 insertions, 52 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 0764281a..e59fdb40 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -20,6 +20,8 @@ import cookies from 'react-cookies';
 
 import { me } from './api';
 
+const app = document.getElementById('app');
+
 export default class App extends React.Component {
   constructor(props) {
     super(props);
@@ -91,16 +93,18 @@ export default class App extends React.Component {
   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: this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit'
+      appMarginLeft: leftMargin
     });
+    app.style.marginLeft = leftMargin;
   }
   render() {
     const user = this.state.visitor;
     return (
       <Router>
         <>
-          <Header style={{ marginLeft: this.state.appMarginLeft }}>
+          <Header>
             <div id="header_wrapper">
               <NavigationIcon onToggle={this.toggleSidebar} />
               <div id="logo" className="desktop"><Link to="/">Juick</Link></div>
@@ -138,56 +142,45 @@ export default class App extends React.Component {
               </nav>
             </div>
           </Header>
-          <div id="wrapper" style={{ marginLeft: this.state.appMarginLeft }}>
-            <section id="content">
-              <Switch>
-                <Route exact path="/" render={(props) => <Discussions visitor={user} {...props} />} />
-                <Route exact path="/home" render={(props) => <Home visitor={user} {...props} />} />
-                <Route exact path="/discover" render={(props) =>
-                  <Discover visitor={user} {...props} />
-                } />
-                <Route exact path="/settings" render={(props) =>
-                  <Settings visitor={user} {...props} />
-                } />
-                <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} />
-                <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} />
-                <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} />
-                <Route exact path="/:user/friends" render={(props) => <Friends visitor={user} {...props} />} />
-                <Route exact path="/:user/readers" render={(props) => <Readers visitor={user} {...props} />} />
-                <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={user} {...props} />} />
-                <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} />
-                <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
-              </Switch>
-            </section>
-            <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>
-              </Link>
-              <Link to="/pm">
-                <Icon name="ei-envelope" size="s" />
-                <span className="desktop">Messages</span>
-              </Link>
-              <Link to="/?show=discuss">
-                <Icon name="ei-bell" size="s" />
-                <span className="desktop">Discussions</span>
-              </Link>
-              <Link to="/settings" rel="nofollow">
-                <Icon name="ei-gear" size="s" />
-                <span className="desktop">Settings</span>
-              </Link>
-            </aside>
-          </div>
-          <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>
-            </div>
-            <div id="footer-left">juick.com &copy; 2008-2018
-                <br />
-            </div>
-          </div>
+          <section id="content">
+            <Switch>
+              <Route exact path="/" render={(props) => <Discussions visitor={user} {...props} />} />
+              <Route exact path="/home" render={(props) => <Home visitor={user} {...props} />} />
+              <Route exact path="/discover" render={(props) =>
+                <Discover visitor={user} {...props} />
+              } />
+              <Route exact path="/settings" render={(props) =>
+                <Settings visitor={user} {...props} />
+              } />
+              <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} />
+              <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} />
+              <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} />
+              <Route exact path="/:user/friends" render={(props) => <Friends visitor={user} {...props} />} />
+              <Route exact path="/:user/readers" render={(props) => <Readers visitor={user} {...props} />} />
+              <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={user} {...props} />} />
+              <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} />
+              <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
+            </Switch>
+          </section>
+          <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>
+            </Link>
+            <Link to="/pm">
+              <Icon name="ei-envelope" size="s" />
+              <span className="desktop">Messages</span>
+            </Link>
+            <Link to="/?show=discuss">
+              <Icon name="ei-bell" size="s" />
+              <span className="desktop">Discussions</span>
+            </Link>
+            <Link to="/settings" rel="nofollow">
+              <Icon name="ei-gear" size="s" />
+              <span className="desktop">Settings</span>
+            </Link>
+          </aside>
         </>
       </Router>
     );