From b8e8aff61c51e93bfdad0edd1d8c9e64d1b606eb Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 16 Nov 2019 11:14:31 +0700
Subject: [PATCH] Add sidebar layout

---
 client/App.jsx                    |  2 ++
 client/Home.jsx                   |  7 ++++
 client/Layout.jsx                 |  6 ++--
 client/covers/SidebarCover.jsx    | 25 ++++++++++++++
 client/helpers/random.js          |  2 ++
 client/helpers/randomFromArray.js |  2 ++
 client/helpers/shuffe.js          |  6 ++++
 client/layouts/Sidebar.jsx        | 57 +++++++++++++++++++++++++++++++
 client/placeholders/Block.jsx     | 23 +++++++++++++
 client/placeholders/Line.jsx      |  6 ++--
 client/placeholders/Rectangle.jsx | 12 +++++++
 11 files changed, 140 insertions(+), 8 deletions(-)
 create mode 100644 client/covers/SidebarCover.jsx
 create mode 100644 client/helpers/random.js
 create mode 100644 client/helpers/randomFromArray.js
 create mode 100644 client/helpers/shuffe.js
 create mode 100644 client/layouts/Sidebar.jsx
 create mode 100644 client/placeholders/Block.jsx
 create mode 100644 client/placeholders/Rectangle.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 9d47369..709fd87 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 Sidebar from './layouts/Sidebar';
 import StickyFooter from './layouts/StickyFooter';
 import StickyHeader from './layouts/StickyHeader';
 
@@ -12,6 +13,7 @@ const App = () => {
             <Switch>
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
+                <Route exact={true} path='/sidebar'><Sidebar /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
                 <Route exact={true} path='/sticky-header'><StickyHeader /></Route>
             </Switch>
diff --git a/client/Home.jsx b/client/Home.jsx
index 1c4b21c..9deaeea 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import CenterCover from './covers/CenterCover';
+import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
 import StickyHeaderCover from './covers/StickyHeaderCover';
 import Layout from './Layout';
@@ -30,6 +31,12 @@ const Home = () => {
                 <h2 className="f2 lh-copy">Layouts</h2>
 
                 <div className="flex flex-wrap">
+                    <div className="pa2 w-20">
+                        <Link to="/sidebar" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <SidebarCover />
+                            <h4 className="f4 mv0 pt3">Sidebar</h4>
+                        </Link>
+                    </div>
                     <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 />
diff --git a/client/Layout.jsx b/client/Layout.jsx
index 67c38b0..c7714f8 100644
--- a/client/Layout.jsx
+++ b/client/Layout.jsx
@@ -11,22 +11,20 @@ const Layout = ({ children }) => {
                 {children}
             </div>
             <div className="w-100 bt b--black-30">
-                <div className="mw8 center pv4 flex justify-between">
+                <div className="mw8 center pv5 flex justify-between">
                     <div>
                         <div className="f4 fw6 mb2">Other cool things</div>
-                        <ul className="flex items-center list ma0 pa0 lh-copy fw5">
+                        <ul className="list ma0 pa0 lh-copy fw5">
                             <li className="pr2">
                                 <a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
                                     FormValidation
                                 </a>
                             </li>
-                            <li className="pr2">∙</li>
                             <li className="pr2">
                                 <a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
                                     BlurPage
                                 </a>
                             </li>
-                            <li className="pr2">∙</li>
                             <li className="pr2">
                                 <a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank">
                                     React PDF Viewer
diff --git a/client/covers/SidebarCover.jsx b/client/covers/SidebarCover.jsx
new file mode 100644
index 0000000..dbdbf89
--- /dev/null
+++ b/client/covers/SidebarCover.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const SidebarCover = () => {
+    return (
+        <Frame size="medium">
+            <div className="h-100 flex">
+                <div className="b--black-30 br flex flex-column justify-end pa1 w-30">
+                    <div className="mb1"><Line /></div>
+                    <div className="w-80"><Line /></div>
+                </div>
+                <div className="flex-grow-1 pa2">
+                    <div className="mb2"><Line /></div>
+                    <div className="mb2"><Line /></div>
+                    <div className="mb2"><Line /></div>
+                    <div className="w-80"><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default SidebarCover;
diff --git a/client/helpers/random.js b/client/helpers/random.js
new file mode 100644
index 0000000..72658a7
--- /dev/null
+++ b/client/helpers/random.js
@@ -0,0 +1,2 @@
+const random = (min, max) => min + Math.round(Math.random() * (max - min));
+export default random;
diff --git a/client/helpers/randomFromArray.js b/client/helpers/randomFromArray.js
new file mode 100644
index 0000000..1ba00fd
--- /dev/null
+++ b/client/helpers/randomFromArray.js
@@ -0,0 +1,2 @@
+const randomFromArray = (array) => array[Math.floor(Math.random() * array.length)];
+export default randomFromArray;
diff --git a/client/helpers/shuffe.js b/client/helpers/shuffe.js
new file mode 100644
index 0000000..4572f5d
--- /dev/null
+++ b/client/helpers/shuffe.js
@@ -0,0 +1,6 @@
+const shuffe = (array) => {
+    array.sort(() => Math.random() - 0.5);
+    return array;
+};
+
+export default shuffe;
diff --git a/client/layouts/Sidebar.jsx b/client/layouts/Sidebar.jsx
new file mode 100644
index 0000000..2adbe24
--- /dev/null
+++ b/client/layouts/Sidebar.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import Block from '../placeholders/Block';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const Sidebar = () => {
+    useDocumentTitle('CSS Layout ∙ Sidebar');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Sidebar</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex">
+                        <div className="b--black-30 br flex flex-column justify-end pa3 w-30">
+                            <div className="mb3"><Block numberOfBlocks={5} /></div>
+                            <div className="w-80"><Block numberOfBlocks={4} /></div>
+                        </div>
+                        <div className="flex-grow-1 pa3 overflow-scroll">
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="mb4"><Block numberOfBlocks={20} /></div>
+                            <div className="w-80"><Block numberOfBlocks={10} /></div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="display: flex;">
+    <!-- Sidebar -->
+    <aside style="width: 30%;">
+        ...
+    </aside>
+
+    <!-- Main -->
+    <main style="
+        flex-grow: 1;
+        overflow: scroll;
+    ">
+        ...
+    </main>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Sidebar;
diff --git a/client/placeholders/Block.jsx b/client/placeholders/Block.jsx
new file mode 100644
index 0000000..f5e5b52
--- /dev/null
+++ b/client/placeholders/Block.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import random from '../helpers/random';
+import Rectangle from './Rectangle';
+
+const Block = ({ numberOfBlocks }) => {
+    return (
+        <div className="flex flex-wrap w-100">
+            {
+                Array(numberOfBlocks).fill(0).map((_, i) => {
+                    const s = random(1, 5);
+                    return (
+                        <div key={i} className={`mr2 mb2 w-${s * 10}`}>
+                            <Rectangle height={8} />
+                        </div>
+                    );
+                })
+            }
+        </div>
+    );
+};
+
+export default Block;
diff --git a/client/placeholders/Line.jsx b/client/placeholders/Line.jsx
index 1386d8d..7d41c57 100644
--- a/client/placeholders/Line.jsx
+++ b/client/placeholders/Line.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
-const Line = ({ size }) => {
-    const h = (size === 'medium' ? '2px' : '1px');
-
+const Line = () => {
     return (
         <div
             className="w-100 bg-black-30"
-            style={{ height: h }}
+            style={{ height: '1px' }}
         />
     );
 };
diff --git a/client/placeholders/Rectangle.jsx b/client/placeholders/Rectangle.jsx
new file mode 100644
index 0000000..6b3ba59
--- /dev/null
+++ b/client/placeholders/Rectangle.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Rectangle = ({ height }) => {
+    return (
+        <div
+            className="w-100 bg-black-30 br-pill"
+            style={{ height: `${height}px` }}
+        />
+    );
+};
+
+export default Rectangle;