diff --git a/contents/_includes/patterns/sidebar.njk b/contents/_includes/patterns/sidebar.njk new file mode 100644 index 0000000..e139703 --- /dev/null +++ b/contents/_includes/patterns/sidebar.njk @@ -0,0 +1,8 @@ +
+
+ {% lines "hor", 5 %} +
+
+ {% lines "hor", 20 %} +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index fe65b89..4de1006 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -113,6 +113,7 @@ eleventyExcludeFromCollections: true {% pattern "Holy grail" %}{% include "patterns/holy-grail.njk" %}{% endpattern %} {% pattern "Masonry grid" %}{% include "patterns/masonry-grid.njk" %}{% endpattern %} {% pattern "Same height columns" %}{% include "patterns/same-height-columns.njk" %}{% endpattern %} + {% pattern "Sidebar" %}{% include "patterns/sidebar.njk" %}{% endpattern %} diff --git a/contents/sidebar.md b/contents/sidebar.md new file mode 100644 index 0000000..6a8698f --- /dev/null +++ b/contents/sidebar.md @@ -0,0 +1,44 @@ +--- +layout: layouts/post.njk +title: Sidebar +description: Create a sidebar with CSS flexbox +keywords: css flexbox, css layout, css sidebar +--- + +## HTML + +```html +
+ + + + +
+ ... +
+
+``` + +## CSS + +```css +.sidebar { + display: flex; +} + +.sidebar__sidebar { + width: 30%; +} + +.sidebar__main { + /* Take the remaining width */ + flex: 1; + + /* Make it scrollable */ + overflow: auto; +} +``` + +{% demo %}{% include "patterns/sidebar.njk" %}{% enddemo %} diff --git a/pages/sidebar/index.tsx b/pages/sidebar/index.tsx deleted file mode 100644 index c34e3a1..0000000 --- a/pages/sidebar/index.tsx +++ /dev/null @@ -1,98 +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 ( - - - - - - - -
Try to scroll the main content!
- - - - - -
- ... -
- -`} - css={` - .container { - display: flex; - } - - .container__sidebar { - width: 30%; - } - - .container__main { - /* Take the remaining width */ - flex: 1; - - /* Make it scrollable */ - overflow: auto; - } - `} - > -
-
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/sidebar/Cover.tsx b/patterns/sidebar/Cover.tsx deleted file mode 100644 index fb97cad..0000000 --- a/patterns/sidebar/Cover.tsx +++ /dev/null @@ -1,55 +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 e36983f..f8dea95 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -70,6 +70,7 @@ @import './patterns/same-height-columns'; @import './patterns/search-box'; @import './patterns/separator'; +@import './patterns/sidebar'; @import './patterns/slider'; @import './patterns/spin-button'; @import './patterns/stacked-cards'; diff --git a/styles/patterns/_sidebar.scss b/styles/patterns/_sidebar.scss new file mode 100644 index 0000000..bac0e62 --- /dev/null +++ b/styles/patterns/_sidebar.scss @@ -0,0 +1,27 @@ +.sidebar { + display: flex; + + /* Demo */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + height: 100%; + width: 100%; +} + +.sidebar__sidebar { + border-right: 1px solid #d1d5db; + width: 30%; + + /* Demo */ + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.sidebar__main { + /* Take the remaining width */ + flex: 1; + + /* Make it scrollable */ + overflow: auto; +} \ No newline at end of file