diff options
Diffstat (limited to 'vnext/src/App.js')
-rw-r--r-- | vnext/src/App.js | 143 |
1 files changed, 87 insertions, 56 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 15e29017..fab438bc 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -19,6 +19,7 @@ import { useCookies } from 'react-cookie'; import { me, trends } from './api'; import { useVisitor } from './ui/VisitorContext'; +import Avatar from './ui/Avatar'; /** * @@ -91,8 +92,8 @@ export default function App({ footer }) { }, [hash]); useEffect(() => { - const getTrends = async () => { - setAllTrends(await trends()); + const getTrends = async () => { + setAllTrends(await trends()); }; getTrends(); }, []); @@ -111,66 +112,96 @@ export default function App({ footer }) { return ( <> <Header /> - <div id="content_wrapper"> - { - <aside id="sidebar"> - <div id="sidebar_wrapper"> - {visitor.uid > 0 && (<> - <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> + { + <aside id="sidebar"> + <div id="sidebar_wrapper"> + { + <nav id="global"> + {visitor.uid > 0 ? + <> + <div id="ctitle"> + <Avatar user={visitor} /> + </div> + <Link to={{ pathname: '/post' }}> + <Icon name="ei-pencil" size="s" /> + <span className="desktop">Post</span> + </Link> + <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="/settings" rel="nofollow"> + <Icon name="ei-gear" size="s" /> + <span className="desktop">Settings</span> + </Link> + </> : + <Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}> + <Icon name="ei-user" size="s" /> + <span className="desktop">Login</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> - </>)} - <div className="tags desktop"> - <h4>Trends</h4> - { allTrends.map((it, index) => ( - <Fragment key={it.tag}> - {index > 0 && ' '} - <Link to={`/tag/${it.tag}`}>#{it.tag}</Link> - </Fragment> - )) } - </div> - <div id="footer" className="desktop"> - <div id="footer-left">juick.com © 2008-2022 - {footer && (<><br />Sponsors: <span dangerouslySetInnerHTML={{ __html: footer }}></span></>)}</div> - <div id="footer-right"> - · <Link href="/help/contacts" rel="nofollow">Contacts</Link> - · <Link href="/help/tos" rel="nofollow">TOS</Link> - </div> + { + visitor.uid > 0 ? + <Link to={{ pathname: '/' }}> + <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span> + { + visitor.unreadCount && + <span className="badge">{visitor.unreadCount}</span> + } + </Link> + : + <Link to='/?media=1' rel="nofollow"> + <Icon name="ei-camera" size="s" /> + <span className="desktop">Photos</span> + </Link> + } + </nav> + } + <div className="tags desktop"> + <h4>Trends</h4> + {allTrends.map((it, index) => ( + <Fragment key={it.tag}> + {index > 0 && ' '} + <Link to={`/tag/${it.tag}`}>#{it.tag}</Link> + </Fragment> + ))} + </div> + <div id="footer" className="desktop"> + <div id="footer-left">© 2008-2022, Juick team + {footer && (<><br />Sponsors: <span dangerouslySetInnerHTML={{ __html: footer }}></span></>)}</div> + <div id="footer-right"> + · <Link href="/help/contacts" rel="nofollow">Contacts</Link> + · <Link href="/help/tos" rel="nofollow">TOS</Link> </div> </div> - </aside> - } - <section id="content" ref={contentRef}> - <Routes> - <Route exact path="/" element={<Discussions />} /> - <Route exact path="/home" element={<Home />} /> - <Route exact path="/discover" element={<Discover />} /> - <Route exact path="/settings" element={<Settings onChange={auth} />} /> - <Route exact path="/login" element={<Login onAuth={auth} />} /> - <Route exact path="/post" element={<Post />} /> - <Route exact path="/pm" element={<Contacts />} /> - <Route exact path="/pm/:user" element={<Chat connection={eventSource} />} /> - <Route exact path="/:user/friends" element={<Friends />} /> - <Route exact path="/:user/readers" element={<Readers />} /> - <Route exact path="/:user" element={<Blog />} /> - <Route exact path="/tag/:tag" element={<Tag />} /> - <Route exact path="/:user/:mid" element={<Thread connection={eventSource} />} /> - </Routes> - </section> - </div> + </div> + </aside> + } + <section id="content" ref={contentRef}> + <Routes> + <Route exact path="/" element={<Discussions />} /> + <Route exact path="/home" element={<Home />} /> + <Route exact path="/discover" element={<Discover />} /> + <Route exact path="/settings" element={<Settings onChange={auth} />} /> + <Route exact path="/login" element={<Login onAuth={auth} />} /> + <Route exact path="/post" element={<Post />} /> + <Route exact path="/pm" element={<Contacts />} /> + <Route exact path="/pm/:user" element={<Chat connection={eventSource} />} /> + <Route exact path="/:user/friends" element={<Friends />} /> + <Route exact path="/:user/readers" element={<Readers />} /> + <Route exact path="/:user" element={<Blog />} /> + <Route exact path="/tag/:tag" element={<Tag />} /> + <Route exact path="/:user/:mid" element={<Thread connection={eventSource} />} /> + </Routes> + </section> </> ); } |