diff --git a/contents/_includes/covers/drawer.njk b/contents/_includes/covers/drawer.njk new file mode 100644 index 0000000..e6a1d62 --- /dev/null +++ b/contents/_includes/covers/drawer.njk @@ -0,0 +1,6 @@ +
+
+ {% lines "hor", 5 %} +
+
+
\ No newline at end of file diff --git a/contents/drawer.md b/contents/drawer.md new file mode 100644 index 0000000..b4119fa --- /dev/null +++ b/contents/drawer.md @@ -0,0 +1,65 @@ +--- +layout: layouts/post.njk +title: Drawer +description: Create a drawer navigation with CSS +keywords: css drawer, css off-canvas +--- + +This pattern is also known as off-canvas. + +## HTML + +```html +
+ +
+ + +
+ ... +
+
+``` + +## CSS + +```css +.drawer { + /* Take full size */ + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + + z-index: 9999; +} + +.drawer__overlay { + /* Take full size */ + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + + /* User still can see the content of main page */ + background-color: rgba(0, 0, 0, 0.5); + + z-index: -1; +} + +.drawer__sidebar { + /* Take full height */ + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 200px; + + /* Background */ + background-color: #fff; +} +``` + +{% demo %}{% include "covers/drawer.njk" %}{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 847eae1..9d40a3b 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -128,6 +128,7 @@ eleventyExcludeFromCollections: true {% pattern "Breadcrumb" %}{% include "covers/breadcrumb.njk" %}{% endpattern %} {% 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 %} diff --git a/pages/drawer/index.tsx b/pages/drawer/index.tsx deleted file mode 100644 index 711267f..0000000 --- a/pages/drawer/index.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
This pattern is also known as off-canvas.
- - -
- - -
- ... -
- -`} - css={` - .container { - /* Container takes full size */ - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - - z-index: 9999; - } - - .container__overlay { - /* Take full size */ - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - - /* User still can see the content of main page */ - background-color: rgba(0, 0, 0, 0.5); - - z-index: -1; - } - - .container__sidebar { - /* Take full height */ - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 200px; - - /* Background */ - background-color: #fff; - } - `} - > -
-
-
- -
-
- - - ); -}; - -export default Details; diff --git a/patterns/drawer/Cover.tsx b/patterns/drawer/Cover.tsx deleted file mode 100644 index b1e9ef4..0000000 --- a/patterns/drawer/Cover.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
- -
-
- -
-
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index ac167ec..dd40da9 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -35,6 +35,7 @@ @import './patterns/docked-at-corner'; @import './patterns/dot-leader'; @import './patterns/dot-navigation'; +@import './patterns/drawer'; @import './patterns/drop-area'; @import './patterns/drop-cap'; @import './patterns/fading-long-section'; diff --git a/styles/patterns/_drawer.scss b/styles/patterns/_drawer.scss new file mode 100644 index 0000000..580c7de --- /dev/null +++ b/styles/patterns/_drawer.scss @@ -0,0 +1,21 @@ +.drawer { + /* Demo */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + height: 100%; + width: 100%; + + display: flex; +} + +.drawer__sidebar { + /* Demo */ + border-right: 1px solid #d1d5db; + width: 25%; +} + +.drawer__overlay { + /* Demo */ + background: #4b5563; + flex: 1; +} \ No newline at end of file