From fb543b5cec83b9db663ea30e86dc75c9dbda44c8 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 22 Sep 2022 09:44:29 +0700
Subject: [PATCH] feat: Mega menu

---
 contents/_includes/covers/mega-menu.njk |  11 ++
 contents/index.njk                      |   1 +
 contents/mega-menu.md                   |  66 +++++++++++
 pages/mega-menu/index.tsx               | 147 ------------------------
 patterns/mega-menu/Cover.tsx            |  98 ----------------
 styles/index.scss                       |   1 +
 styles/patterns/_mega-menu.scss         |  64 +++++++++++
 7 files changed, 143 insertions(+), 245 deletions(-)
 create mode 100644 contents/_includes/covers/mega-menu.njk
 create mode 100644 contents/mega-menu.md
 delete mode 100644 pages/mega-menu/index.tsx
 delete mode 100644 patterns/mega-menu/Cover.tsx
 create mode 100644 styles/patterns/_mega-menu.scss

diff --git a/contents/_includes/covers/mega-menu.njk b/contents/_includes/covers/mega-menu.njk
new file mode 100644
index 0000000..b5bc2ec
--- /dev/null
+++ b/contents/_includes/covers/mega-menu.njk
@@ -0,0 +1,11 @@
+<div class="mega-menu">
+    <div class="mega-menu__item">{% rectangle "hor", "sm", 100 %}</div>
+    <div class="mega-menu__item mega-menu__trigger">
+        {% rectangle %}
+        {% triangle "b" %}
+        <div class="mega-menu__content">
+            <div class="mega-menu__body">{% lines "hor", 5 %}</div>
+        </div>
+    </div>
+    <div class="mega-menu__item">{% rectangle "hor", "sm", 100 %}</div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index eb76608..dffecf9 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -131,6 +131,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
             {% pattern "Dropdown" %}{% include "covers/dropdown.njk" %}{% endpattern %}
             {% pattern "Full screen menu" %}{% include "covers/full-screen-menu.njk" %}{% endpattern %}
+            {% pattern "Mega menu" %}{% include "covers/mega-menu.njk" %}{% endpattern %}
             {% 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 %}
diff --git a/contents/mega-menu.md b/contents/mega-menu.md
new file mode 100644
index 0000000..5944d7f
--- /dev/null
+++ b/contents/mega-menu.md
@@ -0,0 +1,66 @@
+---
+layout: layouts/post.njk
+title: Mega menu
+description: Create a mega menu with CSS
+keywords: css mega menu
+---
+
+## HTML
+
+```html
+<div class="mega-menu">
+    <!-- Item -->
+    <div class="mega-menu__item">...</div>
+
+    <!-- An item that triggers displaying the mega menu -->
+    <div class="mega-menu__item mega-menu__trigger">
+        <!-- The trigger item's content -->
+        <div>...</div>
+
+        <!-- Mega menu -->
+        <div class="mega-menu__content">
+            ...
+        </div>
+    </div>
+
+    <!-- Item -->
+    <div class="mega-menu__item">...</div>
+</div>
+```
+
+## CSS
+
+```css
+.mega-menu {
+    /* Used to position the mega menu */
+    position: relative;
+}
+
+.mega-menu__trigger:hover .mega-menu__content {
+    /* Show the mega menu when hovering the trigger item */
+    display: block;
+}
+
+.mega-menu__content {
+    /* Border */
+    border: 1px solid #d1d5db;
+    margin-top: -1px;
+
+    /* Hidden by default */
+    display: none;
+
+    /* Absolute position */
+    left: 0px;
+    position: absolute;
+    top: 100%;
+
+    /* Take full width */
+    width: 100%;
+
+    /* Displayed on top of other elements */
+    background: #fff;
+    z-index: 9999;
+}
+```
+
+{% demo %}{% include "covers/mega-menu.njk" %}{% enddemo %}
diff --git a/pages/mega-menu/index.tsx b/pages/mega-menu/index.tsx
deleted file mode 100644
index 28f7354..0000000
--- a/pages/mega-menu/index.tsx
+++ /dev/null
@@ -1,147 +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 Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.MegaMenu}>
-            <Head>
-                <meta name="description" content="Create a mega menu with CSS" />
-                <meta name="og:description" content="Create a mega menu with CSS" />
-                <meta name="twitter:description" content="Create a mega menu with CSS" />
-                <meta name="keywords" content="css mega menu" />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                Move the mouse over the second navigation item to see the mega menu.
-            </div>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- Item -->
-    ...
-
-    <!-- An item that triggers displaying the mega menu -->
-    <div class="container__trigger">
-        <!-- The trigger item's content -->
-        <div>...</div>
-
-        <!-- Mega menu -->
-        <div class="container__content">
-            ...
-        </div>
-    </div>
-</div>
-`}
-                css={`
-                    .container {
-                        /* Used to position the mega menu */
-                        position: relative;
-                    }
-
-                    .container__trigger:hover .container__content {
-                        /* Show the mega menu when hovering the trigger item */
-                        display: block;
-                    }
-
-                    .container__content {
-                        /* Border */
-                        border: 1px solid #d1d5db;
-                        margin-top: -1px;
-
-                        /* Hidden by default */
-                        display: none;
-
-                        /* Absolute position */
-                        left: 0px;
-                        position: absolute;
-                        top: 100%;
-
-                        /* Take full width */
-                        width: 100%;
-
-                        /* Displayed on top of other elements */
-                        background: #fff;
-                        z-index: 9999;
-                    }
-                `}
-            >
-                <div style={{ padding: '8px' }}>
-                    <div className="p-mega-menu-container">
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                border: '1px solid #d1d5db',
-                                display: 'inline-flex',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    borderRight: '1px solid #d1d5db',
-                                    padding: '16px',
-                                    width: '150px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                            <div
-                                className="p-mega-menu-trigger"
-                                style={{
-                                    borderRight: '1px solid #d1d5db',
-                                    width: '180px',
-                                }}
-                            >
-                                <div style={{ display: 'flex', padding: '16px' }}>
-                                    <div style={{ flex: 1, marginRight: '8px' }}>
-                                        <Rectangle />
-                                    </div>
-                                    <Triangle size={8} corner="b" />
-                                </div>
-                                <div className="p-mega-menu-content">
-                                    <div style={{ display: 'flex' }}>
-                                        <div style={{ flex: 1, padding: '16px' }}>
-                                            <Block numberOfBlocks={10} />
-                                        </div>
-                                        <div style={{ flex: 1, padding: '16px' }}>
-                                            <Block numberOfBlocks={6} />
-                                        </div>
-                                        <div style={{ flex: 1, padding: '16px' }}>
-                                            <Block numberOfBlocks={8} />
-                                        </div>
-                                        <div style={{ flex: 1, padding: '16px' }}>
-                                            <Block numberOfBlocks={6} />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                style={{
-                                    padding: '16px',
-                                    width: '120px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div style={{ marginTop: '16px' }}>
-                        <Block numberOfBlocks={10} />
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/mega-menu/Cover.tsx b/patterns/mega-menu/Cover.tsx
deleted file mode 100644
index 8e60237..0000000
--- a/patterns/mega-menu/Cover.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <div style={{ padding: '4px 8px' }}>
-                        <Circle size={8} />
-                    </div>
-                    <div
-                        style={{
-                            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                            padding: '4px 8px',
-                        }}
-                    >
-                        <Circle size={8} />
-                    </div>
-                    <div style={{ padding: '4px 8px' }}>
-                        <Circle size={8} />
-                    </div>
-                </div>
-                <div
-                    style={{
-                        border: '1px solid #d1d5db',
-                        display: 'flex',
-                        width: '100%',
-                    }}
-                >
-                    <div style={{ flex: 1, padding: '4px' }}>
-                        <div style={{ marginBottom: '4px' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '60%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px' }}>
-                            <Line />
-                        </div>
-                        <div style={{ width: '80%' }}>
-                            <Line />
-                        </div>
-                    </div>
-                    <div style={{ flex: 1, padding: '4px' }}>
-                        <div style={{ marginBottom: '4px', width: '60%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px' }}>
-                            <Line />
-                        </div>
-                        <div style={{ width: '60%' }}>
-                            <Line />
-                        </div>
-                    </div>
-
-                    <div style={{ flex: 1, padding: '4px' }}>
-                        <div style={{ marginBottom: '4px', width: '80%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '40%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px' }}>
-                            <Line />
-                        </div>
-                        <div style={{ width: '80%' }}>
-                            <Line />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index f7a7c80..4d0c851 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -57,6 +57,7 @@
 @import './patterns/lined-paper';
 @import './patterns/masonry-grid';
 @import './patterns/media-object';
+@import './patterns/mega-menu';
 @import './patterns/menu';
 @import './patterns/modal';
 @import './patterns/notification';
diff --git a/styles/patterns/_mega-menu.scss b/styles/patterns/_mega-menu.scss
new file mode 100644
index 0000000..504068e
--- /dev/null
+++ b/styles/patterns/_mega-menu.scss
@@ -0,0 +1,64 @@
+.mega-menu {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    position: relative;
+
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+
+    /* Demo */
+    width: 100%;
+}
+
+.mega-menu__item {
+    display: flex;
+    align-items: center;
+
+    height: 100%;
+    flex: 1;
+
+    padding: 0.25rem 0.5rem;
+}
+.mega-menu__item:not(:last-child) {
+    border-right: 1px solid #d1d5db;
+}
+
+.mega-menu__trigger {
+    cursor: pointer;
+
+    /* Demo */
+    height: 2rem;
+
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.mega-menu__content {
+    /* Border */
+    border: 1px solid #d1d5db;
+    // margin-top: -1px;
+
+    /* Hidden by default */
+    display: none;
+
+    /* Position it right below the trigger element */
+    left: 0;
+    padding-top: 0.25rem;
+    position: absolute;
+    top: 100%;
+
+    /* Take full width */
+    width: 100%;
+
+    /* It should be on the top of other elements */
+    background-color: #fff;
+    z-index: 9999;
+}
+
+/* Show the mega menu when hovering the trigger item */
+.mega-menu__trigger:hover .mega-menu__content {
+    display: block;
+}
\ No newline at end of file