diff options
Diffstat (limited to 'vnext/src/App.js')
| -rw-r--r-- | vnext/src/App.js | 97 |
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"> · - <a href="/help/contacts" rel="nofollow">Contacts</a> · - <a href="/help/tos" rel="nofollow">TOS</a> - </div> - <div id="footer-left">juick.com © 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> ); |