Switch back to grid layout

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 &copy; 2008-2022
-                  {footer && (<><br />Sponsors: <span dangerouslySetInnerHTML={{ __html: footer }}></span></>)}</div>
-                <div id="footer-right">
-                  &nbsp;&middot;&nbsp;<Link href="/help/contacts" rel="nofollow">Contacts</Link>
-                  &nbsp;&middot;&nbsp;<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">&copy; 2008-2022, Juick team
+                {footer && (<><br />Sponsors: <span dangerouslySetInnerHTML={{ __html: footer }}></span></>)}</div>
+              <div id="footer-right">
+                &nbsp;&middot;&nbsp;<Link href="/help/contacts" rel="nofollow">Contacts</Link>
+                &nbsp;&middot;&nbsp;<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>
     </>
   );
 }