aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/App.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/App.js')
-rw-r--r--vnext/src/App.js97
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>
);