From 3a4bf0d6d1e2ba6abd2f9b9c3da8ff8568a99cff Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 19 Dec 2019 20:53:10 +0700
Subject: [PATCH] Add sticky sections

---
 client/constants/Pattern.ts                 |  1 +
 client/pages/ExplorePage.tsx                |  1 +
 client/patterns/sticky-sections/Cover.tsx   | 43 ++++++++++++
 client/patterns/sticky-sections/Details.tsx | 77 +++++++++++++++++++++
 public/sitemap.xml                          |  1 +
 5 files changed, 123 insertions(+)
 create mode 100644 client/patterns/sticky-sections/Cover.tsx
 create mode 100644 client/patterns/sticky-sections/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 9f0d193..cd6f121 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -60,6 +60,7 @@ enum Pattern {
     StepperInput = 'Stepper input',
     StickyFooter = 'Sticky footer',
     StickyHeader = 'Sticky header',
+    StickySections = 'Sticky sections',
     Switch = 'Switch',
     Tab = 'Tab',
     Timeline = 'Timeline',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 8c527eb..56e39d5 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -84,6 +84,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.SplitScreen} />
                         <CoverCard pattern={Pattern.StickyFooter} />
                         <CoverCard pattern={Pattern.StickyHeader} />
+                        <CoverCard pattern={Pattern.StickySections} />
                     </div>
                 </section>
 
diff --git a/client/patterns/sticky-sections/Cover.tsx b/client/patterns/sticky-sections/Cover.tsx
new file mode 100644
index 0000000..ee5148d
--- /dev/null
+++ b/client/patterns/sticky-sections/Cover.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                        flex: 1,
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+                        flex: 1,
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        flex: 1,
+                        width: '100%',
+                    }}
+                />
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx
new file mode 100644
index 0000000..160fc41
--- /dev/null
+++ b/client/patterns/sticky-sections/Details.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Sticky sections">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Try to scroll the main content to see each section sticks to the top of page.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                height: '100%',
+                                overflow: 'scroll',
+                            }}
+                        >
+                            <section
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                                    height: '100%',
+                                    position: 'sticky',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            />
+                            <section
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    height: '100%',
+                                    position: 'sticky',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            />
+                            <section
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                                    height: '100%',
+                                    position: 'sticky',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            />
+                        </div>
+                    )}
+                    source={`
+<div style="
+    height: 100%;
+    overflow: scroll;
+">
+    <section style="
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+
+        /* Stick at the top */
+        position: sticky;
+        top: 0;
+    ">
+        ...
+    </section>
+
+    <!-- Repeat other sections -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 396d23c..2894bf3 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -61,6 +61,7 @@
     <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/patterns/sticky-sections</loc></url>
     <url><loc>https://csslayout.io/patterns/switch</loc></url>
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
     <url><loc>https://csslayout.io/patterns/timeline</loc></url>