Add sidebar layout

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>

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 />

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

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;

client/helpers/random.js

@@ -0,0 +1,2 @@
+const random = (min, max) => min + Math.round(Math.random() * (max - min));
+export default random;

client/helpers/randomFromArray.js

@@ -0,0 +1,2 @@
+const randomFromArray = (array) => array[Math.floor(Math.random() * array.length)];
+export default randomFromArray;

client/helpers/shuffe.js

@@ -0,0 +1,6 @@
+const shuffe = (array) => {
+    array.sort(() => Math.random() - 0.5);
+    return array;
+};
+
+export default shuffe;

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;

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;

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' }}
         />
     );
 };

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;