From 32929c27ae8811c9cc94a81806f47fca27f69647 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 21:36:32 +0700
Subject: [PATCH] Add sticky header

---
 client/App.jsx                       |  2 ++
 client/Home.jsx                      | 23 ++++++++-----
 client/covers/StickyFooterCover.jsx  |  4 +--
 client/covers/StickyHeaderCover.jsx  | 30 +++++++++++++++++
 client/layouts/StickyFooter.jsx      |  2 +-
 client/layouts/StickyHeader.jsx      | 50 ++++++++++++++++++++++++++++
 client/placeholders/BrowserFrame.jsx |  2 +-
 7 files changed, 101 insertions(+), 12 deletions(-)
 create mode 100644 client/covers/StickyHeaderCover.jsx
 create mode 100644 client/layouts/StickyHeader.jsx

diff --git a/client/App.jsx b/client/App.jsx
index a2cb1f1..9d47369 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Home from './Home';
 import Centering from './layouts/Centering';
 import StickyFooter from './layouts/StickyFooter';
+import StickyHeader from './layouts/StickyHeader';
 
 const App = () => {
     return (
@@ -12,6 +13,7 @@ const App = () => {
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
+                <Route exact={true} path='/sticky-header'><StickyHeader /></Route>
             </Switch>
         </Router>
     );
diff --git a/client/Home.jsx b/client/Home.jsx
index d2c7434..1c4b21c 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import CenterCover from './covers/CenterCover';
 import StickyFooterCover from './covers/StickyFooterCover';
+import StickyHeaderCover from './covers/StickyHeaderCover';
 import Layout from './Layout';
 import useDocumentTitle from './useDocumentTitle';
 
@@ -28,22 +29,28 @@ const Home = () => {
             <div className="mw8 center pb4">
                 <h2 className="f2 lh-copy">Layouts</h2>
 
-                <div className="flex flex-wrap justify-between">
-                    <div className="w-30">
-                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                <div className="flex flex-wrap">
+                    <div className="pa2 w-20">
+                        <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <StickyFooterCover />
-                            <h4 className="f4 mv0 pv3">Sticky footer</h4>
+                            <h4 className="f4 mv0 pt3">Sticky footer</h4>
+                        </Link>
+                    </div>
+                    <div className="pa2 w-20">
+                        <Link to="/sticky-header" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <StickyHeaderCover />
+                            <h4 className="f4 mv0 pt3">Sticky header</h4>
                         </Link>
                     </div>
                 </div>
 
                 <h2 className="f2 lh-copy">Patterns</h2>
 
-                <div className="flex flex-wrap justify-between">
-                    <div className="w-30">
-                        <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
+                <div className="flex flex-wrap">
+                    <div className="pa2 w-20">
+                        <Link to="/centering" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <CenterCover />
-                            <h4 className="f4 mv0 pv3">Centering</h4>
+                            <h4 className="f4 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
                 </div>
diff --git a/client/covers/StickyFooterCover.jsx b/client/covers/StickyFooterCover.jsx
index 57e3409..abed0cb 100644
--- a/client/covers/StickyFooterCover.jsx
+++ b/client/covers/StickyFooterCover.jsx
@@ -7,7 +7,7 @@ const StickyFooterCover = () => {
     return (
         <Frame size="medium">
             <div className="h-100 flex flex-column">
-                <div className="flex-shrink-0">
+                <div className="flex-shrink-0 b--black-30 br bw2">
                     <div className="w-100 flex items-center pa2">
                         <div className="w1"><Line /></div>
                         <div className="w1 ml-auto"><Line /></div>
@@ -15,7 +15,7 @@ const StickyFooterCover = () => {
                     </div>
                     <Line size="medium" />
                 </div>
-                <div className="flex-grow-1">
+                <div className="flex-grow-1 b--black-30 br bw2">
                     <div className="pa2">
                         <div className="w3 mb2"><Line /></div>
                         <div className="w3 mb2"><Line /></div>
diff --git a/client/covers/StickyHeaderCover.jsx b/client/covers/StickyHeaderCover.jsx
new file mode 100644
index 0000000..7979dc3
--- /dev/null
+++ b/client/covers/StickyHeaderCover.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const StickyHeaderCover = () => {
+    return (
+        <Frame size="medium">
+            <div className="h-100 flex flex-column">
+                <div className="flex-shrink-0">
+                    <div className="w-100 flex items-center pa2">
+                        <div className="w1"><Line /></div>
+                        <div className="w1 ml-auto"><Line /></div>
+                        <div className="w1 ml1"><Line /></div>
+                    </div>
+                    <Line size="medium" />
+                </div>
+                <div className="flex-grow-1 b--black-30 br bw2">
+                    <div className="pa2">
+                        <div className="w3 mb2"><Line /></div>
+                        <div className="w3 mb2"><Line /></div>
+                        <div className="w2"><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default StickyHeaderCover;
diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx
index 8126a5f..2ea0791 100644
--- a/client/layouts/StickyFooter.jsx
+++ b/client/layouts/StickyFooter.jsx
@@ -34,7 +34,7 @@ code={`
 <div style="
     display: flex;
     flex-direction: column;
-    height: '100%';
+    height: 100%;
 ">
     <header style="flex-shrink: 0;">
         ...
diff --git a/client/layouts/StickyHeader.jsx b/client/layouts/StickyHeader.jsx
new file mode 100644
index 0000000..36f5ad5
--- /dev/null
+++ b/client/layouts/StickyHeader.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const StickyHeader = () => {
+    useDocumentTitle('CSS Layout ∙ Sticky header');
+
+    return (
+        <DetailsLayout name="Sticky header">
+            <BrowserFrame
+                content={
+                    <div>
+                        <div className="top-0 bg-white bb b--black-30 bw1 pa3" style={{ position: 'sticky' }}>
+                            Header
+                        </div>
+                        <div className="pa3">
+                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                            <div className="lh-copy mb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                            <div className="lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Urna id volutpat lacus laoreet non curabitur gravida. Eu mi bibendum neque egestas congue quisque egestas. Turpis egestas pretium aenean pharetra magna ac placerat. Proin sagittis nisl rhoncus mattis rhoncus urna. Est velit egestas dui id. Auctor neque vitae tempus quam pellentesque. Convallis a cras semper auctor neque. Consequat nisl vel pretium lectus quam id leo. Netus et malesuada fames ac. Dictum at tempor commodo ullamcorper a. Tellus in metus vulputate eu scelerisque. Morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim. Eu facilisis sed odio morbi. Fermentum iaculis eu non diam phasellus.</div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div>
+    <header style="
+        position: sticky;
+        top: 0;
+    ">
+        ...
+    </header>
+    <main>
+        ...
+    </main>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default StickyHeader;
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index 398cd86..afd086b 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.jsx
@@ -25,7 +25,7 @@ const BrowserFrame = ({ content, source }) => {
                     transform: isContentActive ? '' : 'rotateY(180deg)',
                 }}
             >
-                <div className="absolute top-0 left-0 h-100 w-100" style={{ backfaceVisibility: 'hidden' }}>
+                <div className="overflow-scroll absolute top-0 left-0 h-100 w-100" style={{ backfaceVisibility: 'hidden' }}>
                     {content}
                 </div>
                 <div