From e83efe1b22c5fc5e9f5079e07d8b1dc03d8905c4 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 30 Nov 2019 19:08:01 +0700
Subject: [PATCH 1/2] Fix cover of radial progress bar

---
 client/patterns/radial-progress-bar/Cover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/patterns/radial-progress-bar/Cover.tsx b/client/patterns/radial-progress-bar/Cover.tsx
index 4c43e26..d272c86 100644
--- a/client/patterns/radial-progress-bar/Cover.tsx
+++ b/client/patterns/radial-progress-bar/Cover.tsx
@@ -28,7 +28,7 @@ const Cover: React.FC<{}> = () => {
                             width: '64px',
                         }}
                     >
-                        45%
+                        33%
                     </div>
                     <div
                         style={{

From f74fb6660e94bb33eca5d4f6f5da8e34016d1d2a Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 30 Nov 2019 20:17:53 +0700
Subject: [PATCH 2/2] Add full screen menu

---
 client/constants/Pattern.ts                  |   1 +
 client/pages/ExplorePage.tsx                 |   1 +
 client/patterns/full-screen-menu/Cover.tsx   |  49 ++++++++
 client/patterns/full-screen-menu/Details.tsx | 121 +++++++++++++++++++
 public/sitemap.xml                           |   1 +
 5 files changed, 173 insertions(+)
 create mode 100644 client/patterns/full-screen-menu/Cover.tsx
 create mode 100644 client/patterns/full-screen-menu/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 86e1dfd..5b3f449 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -15,6 +15,7 @@ enum Pattern {
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
     FloatingLabel = 'Floating label',
+    FullScreenMenu = 'Full screen menu',
     HolyGrail = 'Holy grail',
     InputAddOn = 'Input addon',
     MediaObject = 'Media object',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 3d517ac..c1c98dd 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -99,6 +99,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FloatingLabel} />
+                        <CoverCard pattern={Pattern.FullScreenMenu} />
                         <CoverCard pattern={Pattern.InputAddOn} />
                         <CoverCard pattern={Pattern.MediaObject} />
                         <CoverCard pattern={Pattern.Menu} />
diff --git a/client/patterns/full-screen-menu/Cover.tsx b/client/patterns/full-screen-menu/Cover.tsx
new file mode 100644
index 0000000..bde38cd
--- /dev/null
+++ b/client/patterns/full-screen-menu/Cover.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Rectangle /></div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}><Rectangle /></div>
+                        <div style={{ marginBottom: '4px', width: '50%' }}><Rectangle /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx
new file mode 100644
index 0000000..3367091
--- /dev/null
+++ b/client/patterns/full-screen-menu/Details.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Full screen menu">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <button
+                                style={{
+                                    backgroundColor: 'transparent',
+                                    borderColor: 'transparent',
+                                    padding: 0,
+                                    position: 'absolute',
+                                    right: '16px',
+                                    top: '16px',
+                                }}
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    style={{
+                                        fill: 'none',
+                                        height: 24,
+                                        stroke: '#000',
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
+                                        strokeWidth: 1,
+                                        width: 24,
+                                    }}
+                                >
+                                    <path
+                                        d={`M7,16.999l10-10
+                                        M17,16.999l-10-10
+                                        M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
+                                        S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
+                                    />
+                                </svg>
+                            </button>
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '100%',
+                                    justifyContent: 'center',
+                                    left: 0,
+                                    position: 'absolute',
+                                    top: 0,
+                                    width: '100%',
+                                }}
+                            >
+                                <ul
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        listStyleType: 'none',
+                                        margin: 0,
+                                        padding: 0,
+                                    }}
+                                >
+                                    <li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
+                                    <li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
+                                    <li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
+                                    <li style={{ width: '160px' }}><Rectangle /></li>
+                                </ul>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Full screen overlay */
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+">
+    <!-- The close button -->
+    <button style="
+        /* Shown at top right corner */
+        position: absolute;
+        right: 16px;
+        top: 16px;
+    ">
+        ...
+    </button>
+
+    <!-- The navigation menu -->
+    <ul>
+        ...
+    </ul>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index cdc60c3..e27127b 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -21,6 +21,7 @@
     <url><loc>https://csslayout.io/patterns/feature-list</loc></url>
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
+    <url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
     <url><loc>https://csslayout.io/patterns/media-object</loc></url>
     <url><loc>https://csslayout.io/patterns/menu</loc></url>