From 28cf34bc7f9a56802ba407e44a8a4f578079df7e Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Thu, 22 Sep 2022 08:50:23 +0700 Subject: [PATCH] feat: Full screen menu --- .../_includes/covers/full-screen-menu.njk | 4 + contents/full-screen-menu.md | 49 ++++++ contents/index.njk | 1 + pages/full-screen-menu/index.tsx | 140 ------------------ patterns/full-screen-menu/Cover.tsx | 55 ------- styles/index.scss | 1 + styles/patterns/_full-screen-menu.scss | 67 +++++++++ 7 files changed, 122 insertions(+), 195 deletions(-) create mode 100644 contents/_includes/covers/full-screen-menu.njk create mode 100644 contents/full-screen-menu.md delete mode 100644 pages/full-screen-menu/index.tsx delete mode 100644 patterns/full-screen-menu/Cover.tsx create mode 100644 styles/patterns/_full-screen-menu.scss diff --git a/contents/_includes/covers/full-screen-menu.njk b/contents/_includes/covers/full-screen-menu.njk new file mode 100644 index 0000000..7ce4ba5 --- /dev/null +++ b/contents/_includes/covers/full-screen-menu.njk @@ -0,0 +1,4 @@ +
+ {% lines "hor", 5 %} + +
\ No newline at end of file diff --git a/contents/full-screen-menu.md b/contents/full-screen-menu.md new file mode 100644 index 0000000..3df8918 --- /dev/null +++ b/contents/full-screen-menu.md @@ -0,0 +1,49 @@ +--- +layout: layouts/post.njk +title: Full screen menu +description: Create a full screen menu with CSS flexbox +keywords: css fixed, css flexbox, css menu +--- + +## HTML + +```html +
+ + + + + +
+``` + +## CSS + +```css +.full-screen-menu { + /* Full screen overlay */ + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} + +.full-screen-menu__close { + /* Shown at top left corner */ + left: 1rem; + position: absolute; + top: 1rem; +} +``` + +You can use the [close button](/close-button/) to create a button for closing the menu. + +{% demo %}{% include "covers/full-screen-menu.njk" %}{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 1445439..72570ec 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -129,6 +129,7 @@ eleventyExcludeFromCollections: true {% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %} {% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %} {% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %} + {% pattern "Full screen menu" %}{% include "covers/full-screen-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/pages/full-screen-menu/index.tsx b/pages/full-screen-menu/index.tsx deleted file mode 100644 index 664e94a..0000000 --- a/pages/full-screen-menu/index.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -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 ( - - - - - - - - - - - - -
    - ... -
- -`} - css={` - .container { - /* Full screen overlay */ - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - } - - .container__close { - /* Shown at top right corner */ - position: absolute; - right: 16px; - top: 16px; - } - `} - > -
- -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/full-screen-menu/Cover.tsx b/patterns/full-screen-menu/Cover.tsx deleted file mode 100644 index f7aeec6..0000000 --- a/patterns/full-screen-menu/Cover.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
- -
-
- -
-
- -
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index c547d84..db4bf0e 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -46,6 +46,7 @@ @import './patterns/floating-label'; @import './patterns/folder-structure'; @import './patterns/full-background'; +@import './patterns/full-screen-menu'; @import './patterns/holy-grail'; @import './patterns/initial-avatar'; @import './patterns/input-addon'; diff --git a/styles/patterns/_full-screen-menu.scss b/styles/patterns/_full-screen-menu.scss new file mode 100644 index 0000000..c3fa7b6 --- /dev/null +++ b/styles/patterns/_full-screen-menu.scss @@ -0,0 +1,67 @@ +.full-screen-menu { + /* Take full size */ + height: 100%; + width: 100%; + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + position: relative; + + background: #374151; +} + +.full-screen-menu__close { + left: 0.5rem; + position: absolute; + top: 0.5rem; + + /* Reset */ + background-color: transparent; + border-color: transparent; + + /* Cursor */ + cursor: pointer; + + /* Size */ + height: 1rem; + width: 1rem; + + &:before, + &:after { + content: ''; + /* Background color */ + background-color: #d1d5db; + + /* Position */ + position: absolute; + + /* Size */ + height: 1px; + width: 100%; + } + + &:before { + /* Position */ + left: 0px; + top: 50%; + transform: translate(0%, -50%) rotate(45deg); + + /* Size */ + height: 1px; + width: 100%; + } + + &:after { + /* Position */ + left: 50%; + top: 0px; + transform: translate(-50%, 0%) rotate(45deg); + + /* Size */ + height: 100%; + width: 1px; + } +}