Fixed header

3 files changed, 73 insertions, 53 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 9a0634ff..f39875c1 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -169,48 +169,50 @@ export default function App() {
             }
           </div>
         </div>
-        <section id="content">
-          <Switch>
-            <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} />
-            <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} />
-            <Route exact path="/discover" render={(props) =>
-              <Discover visitor={visitor} {...props} />
-            } />
-            <Route exact path="/settings" render={(props) =>
-              <Settings visitor={visitor} {...props} onChange={auth} />
-            } />
-            <Route exact path="/login" render={(props) => <Login visitor={visitor} {...props} onAuth={auth} />} />
-            <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} />
-            <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} />
-            <Route exact path="/pm/:user" render={(props) => <Chat connection={eventSource} visitor={visitor} {...props} />} />
-            <Route exact path="/:user/friends" render={(props) => <Friends visitor={visitor} {...props} />} />
-            <Route exact path="/:user/readers" render={(props) => <Readers visitor={visitor} {...props} />} />
-            <Route exact path="/:user" render={(props) => <Blog visitor={visitor} {...props} />} />
-            <Route exact path="/tag/:tag" render={(props) => <Tag visitor={visitor} {...props} />} />
-            <Route exact path="/:user/:mid" render={(props) => <Thread connection={eventSource} visitor={visitor} {...props} />} />
-          </Switch>
-        </section>
-        {
-          visitor.uid > 0 &&
-          <aside id="sidebar">
-            <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 id="wrapper">
+          <section id="content">
+            <Switch>
+              <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} />
+              <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} />
+              <Route exact path="/discover" render={(props) =>
+                <Discover visitor={visitor} {...props} />
+              } />
+              <Route exact path="/settings" render={(props) =>
+                <Settings visitor={visitor} {...props} onChange={auth} />
+              } />
+              <Route exact path="/login" render={(props) => <Login visitor={visitor} {...props} onAuth={auth} />} />
+              <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} />
+              <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} />
+              <Route exact path="/pm/:user" render={(props) => <Chat connection={eventSource} visitor={visitor} {...props} />} />
+              <Route exact path="/:user/friends" render={(props) => <Friends visitor={visitor} {...props} />} />
+              <Route exact path="/:user/readers" render={(props) => <Readers visitor={visitor} {...props} />} />
+              <Route exact path="/:user" render={(props) => <Blog visitor={visitor} {...props} />} />
+              <Route exact path="/tag/:tag" render={(props) => <Tag visitor={visitor} {...props} />} />
+              <Route exact path="/:user/:mid" render={(props) => <Thread connection={eventSource} visitor={visitor} {...props} />} />
+            </Switch>
+          </section>
+          {
+            visitor.uid > 0 &&
+            <aside id="sidebar">
+              <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>
       </>
     </Router>
   );
diff --git a/vnext/src/index.css b/vnext/src/index.css
index c01d2aae..a371ae55 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -111,20 +111,30 @@ hr {
 }
 
 #app {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+#wrapper {
     display: grid;
-    grid-template-areas: "header" "content" "footer";
+    grid-template-areas: "content" "footer";
     grid-template-columns: 100%;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: 1fr auto;
     height: 100%;
     width: 100%;
+    overflow: hidden;
 }
 
 #header {
-    grid-area: header;
     background: var(--text-background-color);
     border-bottom: 1px solid var(--border-color);
     transition: transform 0.2s;
+    z-index: 10;
     overflow-x: hidden;
+    position: fixed;
+    width: 100%;
+    top: 0;
 }
 
 .header--hidden {
@@ -153,8 +163,8 @@ hr {
 
 #content {
     grid-area: content;
-    margin-top: 12px;
-    overflow-y: scroll;
+    margin-top: 64px;
+    overflow: auto;
 }
 
 #footer {
@@ -350,9 +360,12 @@ hr {
 
 @media (--viewport-desktop) {
     #app {
-        grid-template-areas: "header header header header"". footer content .";
+        overflow: initial;
+    }
+    #wrapper {
+        grid-template-areas: ". footer content .";
         grid-template-columns: auto 240px 760px auto;
-        grid-template-rows: auto 1fr;
+        overflow: initial;
     }
     #header_wrapper,
     .footer_container {
@@ -367,12 +380,13 @@ hr {
     }
     #content {
         margin-bottom: 12px;
+        overflow: initial;
     }
     #sidebar {
         flex-direction: column;
         justify-content: initial;
         border-top: initial;
-        margin-top: 12px;
+        margin-top: 64px;
     }
     #sidebar a,
     .l a {
diff --git a/vnext/src/index.html b/vnext/src/index.html
index 226b89c6..7c408656 100644
--- a/vnext/src/index.html
+++ b/vnext/src/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html prefix="og: http://ogp.me/ns#">
+
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -26,11 +27,12 @@
     <link rel="icon" type="image/png" sizes="16x16" href="//i.juick.com/favicon-16x16.png" />
     <link rel="manifest" href="//i.juick.com/manifest.json" />
 </head>
+
 <body>
     <div id="app">
         <div id="header">
             <div id="header_wrapper">
-                <div id="logo"><a href="/"/></div>
+                <div id="logo"><a href="/" /></div>
                 <nav id="global">
                     <a href="/">Loading...</a>
                 </nav>
@@ -40,7 +42,8 @@
             <div id="content">
                 <noscript>
                     <article>
-                        Javascript is required to use Juick from browser.<br /> Alternatively we have <a href="mailto:juick@juick.com">maillist-like</a>
+                        Javascript is required to use Juick from browser.<br /> Alternatively we have <a
+                            href="mailto:juick@juick.com">maillist-like</a>
                         and <a href="xmpp:juick@juick.com">chat</a> interfaces.
                     </article>
                 </noscript>
@@ -58,4 +61,5 @@
         </div>
     </div>
 </body>
-</html>
+
+</html>
\ No newline at end of file