From 7d935751262ae83b04e2e4bde1785824cccb22c6 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 15 Nov 2019 17:38:15 +0700
Subject: [PATCH] Add sticky footer layout

---
 client/App.jsx                  |  2 ++
 client/Home.jsx                 |  2 +-
 client/layouts/StickyFooter.jsx | 57 +++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 client/layouts/StickyFooter.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 53134a2..a2cb1f1 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -3,6 +3,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';
 
 const App = () => {
     return (
@@ -10,6 +11,7 @@ const App = () => {
             <Switch>
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
+                <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
             </Switch>
         </Router>
     );
diff --git a/client/Home.jsx b/client/Home.jsx
index 3213f84..7de1170 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -15,7 +15,7 @@ const Home = () => {
 
             <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">
+                    <Link to="/sticky-footer" className="link flex flex-column items-center justify-center bg-black-05 br2 pa3">
                         <StickyFooterCover />
                         <h4 className="f4 mv0 pv3">Sticky footer</h4>
                     </Link>
diff --git a/client/layouts/StickyFooter.jsx b/client/layouts/StickyFooter.jsx
new file mode 100644
index 0000000..c26ed41
--- /dev/null
+++ b/client/layouts/StickyFooter.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const StickyFooter = () => {
+    useDocumentTitle('CSS Layout ∙ Sticky footer');
+
+    return (
+        <DetailsLayout name="Sticky footer">
+            <div className="lh-copy mb3">
+                The footer is always sticky at the bottom if the main content is short.
+            </div>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column ba b--black-30 bw1">
+                        <div className="flex-shrink-0 bb b--black-30 bw1 pa3">
+                            Header
+                        </div>
+                        <div className="flex-grow-1 pa3">
+                            Content
+                        </div>
+                        <div className="flex-shrink-0 bt b--black-30 bw1 pa3">
+                            Footer
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    display: flex;
+    flex-direction: column;
+    height: '100%';
+">
+    <header style="flex-shrink: 0;">
+        ...
+    </header>
+    <main style="flex-grow: 1;">
+        ...
+    </main>
+    <footer style="flex-shrink: 0;">
+        ...
+    </footer>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default StickyFooter;