From 310996b1349029d6998e595ef4ea2460c5673ba8 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 22 Sep 2022 08:38:35 +0700
Subject: [PATCH] feat: Split navigation

---
 .../_includes/covers/split-navigation.njk     |  6 ++
 contents/index.njk                            |  1 +
 contents/split-navigation.md                  | 52 ++++++++++
 pages/split-navigation/index.tsx              | 94 -------------------
 patterns/split-navigation/Cover.tsx           | 44 ---------
 styles/index.scss                             |  1 +
 styles/patterns/_split-navigation.scss        | 27 ++++++
 7 files changed, 87 insertions(+), 138 deletions(-)
 create mode 100644 contents/_includes/covers/split-navigation.njk
 create mode 100644 contents/split-navigation.md
 delete mode 100644 pages/split-navigation/index.tsx
 delete mode 100644 patterns/split-navigation/Cover.tsx
 create mode 100644 styles/patterns/_split-navigation.scss

diff --git a/contents/_includes/covers/split-navigation.njk b/contents/_includes/covers/split-navigation.njk
new file mode 100644
index 0000000..d724e06
--- /dev/null
+++ b/contents/_includes/covers/split-navigation.njk
@@ -0,0 +1,6 @@
+<ul class="split-navigation">
+    <li class="split-navigation__item">{% rectangle "hor", "sm", 100 %}</li>
+    <li class="split-navigation__item">{% rectangle "hor", "sm", 100 %}</li>
+    <li class="split-navigation__item">{% rectangle "hor", "sm", 100 %}</li>
+    <li class="split-navigation__item split-navigation__item--right">{% rectangle "hor", "sm", 100 %}</li>
+</ul>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 9ff2b39..1445439 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -132,6 +132,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
             {% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
             {% pattern "Previous next buttons" %}{% include "covers/previous-next-buttons.njk" %}{% endpattern %}
+            {% pattern "Split navigation" %}{% include "covers/split-navigation.njk" %}{% endpattern %}
             {% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
             {% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %}
         </div>
diff --git a/contents/split-navigation.md b/contents/split-navigation.md
new file mode 100644
index 0000000..d3c12f7
--- /dev/null
+++ b/contents/split-navigation.md
@@ -0,0 +1,52 @@
+---
+layout: layouts/post.njk
+title: Split navigation
+description: Create a split navigation with CSS flexbox
+keywords: css flexbox, css menu, css navigation, css split navigation
+---
+
+## HTML
+
+```html
+<ul class="split-navigation">
+    <!-- Navigation item -->
+    <li class="split-navigation__item">
+        <a href="">...</a>
+    </li>
+
+    <!-- Navigation item that sticks to the right -->
+    <li class="split-navigation__item split-navigation__item--right">
+        <a href="">...</a>
+    </li>
+</ul>
+```
+
+## CSS
+
+```css
+.split-navigation {
+    /* Content is centered horizontally */
+    align-items: center;
+    display: flex;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0 0 0.5rem 0;
+}
+
+.split-navigation__item {
+    margin-right: 0.25rem;
+
+    /* Demo */
+    width: 1.25rem;
+}
+
+.split-navigation__item--right {
+    /* Sticks to the right */
+    margin-left: auto;
+    margin-right: 0;
+}
+```
+
+{% demo %}{% include "covers/split-navigation.njk" %}{% enddemo %}
diff --git a/pages/split-navigation/index.tsx b/pages/split-navigation/index.tsx
deleted file mode 100644
index b31da5e..0000000
--- a/pages/split-navigation/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.SplitNavigation}>
-            <Head>
-                <meta name="description" content="Create a split navigation with CSS flexbox" />
-                <meta name="og:description" content="Create a split navigation with CSS flexbox" />
-                <meta name="twitter:description" content="Create a split navigation with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
-            </Head>
-            <BrowserFrame
-                html={`
-<ul class="container">
-    <!-- Navigation item -->
-    <li>
-        <a href="">...</a>
-    </li>
-
-    <!-- Navigation item that sticks to the right -->
-    <li class="container__item--right">
-        <a href="">...</a>
-    </li>
-</ul>
-`}
-                css={`
-                    .container {
-                        /* Content is centered horizontally */
-                        align-items: center;
-                        display: flex;
-
-                        /* Reset styles */
-                        list-style-type: none;
-                        margin: 0;
-                    }
-
-                    .container__item--right {
-                        /* Sticks to the right */
-                        margin-left: auto;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <ul
-                        style={{
-                            alignItems: 'center',
-                            border: '1px solid #d1d5db',
-                            borderRadius: '8px',
-                            display: 'flex',
-                            listStyleType: 'none',
-                            margin: 0,
-                            padding: '16px',
-                            width: '60%',
-                        }}
-                    >
-                        <li style={{ marginRight: '4px', width: '20%' }}>
-                            <Rectangle />
-                        </li>
-                        <li style={{ marginRight: '4px', width: '10%' }}>
-                            <Rectangle />
-                        </li>
-                        <li style={{ marginRight: '4px', width: '20%' }}>
-                            <Rectangle />
-                        </li>
-                        <li style={{ marginLeft: 'auto', width: '10%' }}>
-                            <Rectangle />
-                        </li>
-                    </ul>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.PropertyList]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/split-navigation/Cover.tsx b/patterns/split-navigation/Cover.tsx
deleted file mode 100644
index 567480d..0000000
--- a/patterns/split-navigation/Cover.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as 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',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        border: '1px solid #d1d5db',
-                        borderRadius: '8px',
-                        display: 'flex',
-                        padding: '4px',
-                        width: '100%',
-                    }}
-                >
-                    <div style={{ marginRight: '4px', width: '16px' }}>
-                        <Rectangle />
-                    </div>
-                    <div style={{ marginRight: '4px', width: '16px' }}>
-                        <Rectangle />
-                    </div>
-                    <div style={{ marginLeft: 'auto', width: '16px' }}>
-                        <Rectangle />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 119b3b1..c547d84 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -81,6 +81,7 @@
 @import './patterns/simple-grid';
 @import './patterns/slider';
 @import './patterns/spin-button';
+@import './patterns/split-navigation';
 @import './patterns/split-screen';
 @import './patterns/stacked-cards';
 @import './patterns/stamp-border';
diff --git a/styles/patterns/_split-navigation.scss b/styles/patterns/_split-navigation.scss
new file mode 100644
index 0000000..489bafa
--- /dev/null
+++ b/styles/patterns/_split-navigation.scss
@@ -0,0 +1,27 @@
+.split-navigation {
+    /* Content is centered horizontally */
+    align-items: center;
+    display: flex;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0 0 0.5rem 0;
+
+    /* Demo */
+    border-bottom: 1px solid #d1d5db;
+    width: 8rem;
+}
+
+.split-navigation__item {
+    margin-right: 0.25rem;
+
+    /* Demo */
+    width: 1.25rem;
+}
+
+.split-navigation__item--right {
+    /* Sticks to the right */
+    margin-left: auto;
+    margin-right: 0;
+}
\ No newline at end of file