feat: Sidebar

contents/_includes/patterns/sidebar.njk

@@ -0,0 +1,8 @@
+<div class="sidebar">
+    <div class="sidebar__sidebar">
+        {% lines "hor", 5 %}
+    </div>
+    <div class="sidebar__main">
+        {% lines "hor", 20 %}
+    </div>
+</div>

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 %}
         </div>
     </div>
 

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
+<div class="sidebar">
+    <!-- Sidebar -->
+    <aside class="sidebar__sidebar">
+        ...
+    </aside>
+
+    <!-- Main -->
+    <main class="sidebar__main">
+        ...
+    </main>
+</div>
+```
+
+## 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 %}