Add sidebar to news posts (#561)

This PR adds a sidebar using [Zolas TOC](https://www.getzola.org/documentation/content/table-of-contents/). In desktop first two levels are shown, in mobile just the top level headers.

**DESKTOP**
![image](https://user-images.githubusercontent.com/188612/222731870-76394e64-797d-4523-b9f6-7d0ef0febaa6.png)

**MOBILE**
![image](https://user-images.githubusercontent.com/188612/222724600-56e5bafa-f4ef-4d72-8a7f-dc38f8232f18.png)

Author: doup

sass/components/_page-with-menu.scss

@@ -1,5 +1,6 @@
 .page-with-menu {
     $margin-top: 24px;
+    $sidebar-width: 250px;
 
     display: grid;
     grid-gap: 24px;
@@ -9,7 +10,7 @@
 
     @media #{$bp-tablet-landscape-up} {
         margin-top: $margin-top;
-        grid-template-columns: 250px 1fr;
+        grid-template-columns: $sidebar-width 1fr;
         grid-template-areas: 'menu content';
     }
 
@@ -28,7 +29,7 @@
 
         position: sticky;
         top: calc(var(--header-height) + #{$margin-top});
-        height: calc(100vh - var(--header-height) - #{$margin-top});
+        height: calc(100vh - var(--header-height) - #{$margin-top * 2});
         overflow-y: auto;
         padding-bottom: $margin-top;
     }
@@ -37,4 +38,11 @@
         grid-area: content;
         overflow-x: hidden;
     }
+
+    &--news {
+        @media #{$bp-tablet-landscape-up} {
+            grid-template-columns: 1fr $sidebar-width;
+            grid-template-areas: 'content menu';
+        }
+    }
 }

templates/layouts/page-with-menu.html

@@ -16,7 +16,7 @@
 {% endblock %}
 
 {% block content %}
-    <div class="page-with-menu">
+    <div class="page-with-menu {% block page_with_menu_extra_class %}{% endblock %}">
         <div class="page-with-menu__menu-wrapper">
             <div class="page-with-menu__menu">
                 {% block page_menu %}{% endblock %}

templates/macros/news.html

@@ -0,0 +1,40 @@
+{% macro news_menu_row(header, max_levels, level) %}
+    {% set id = 'news-menu-' ~ level ~ '-' ~ header.title | slugify %}
+    {% set label_class = "tree-menu__label" %}
+    {% set total_children = header.children | length %}
+    {% set has_children = total_children > 0 %}
+    {% set show_children = has_children and level < max_levels %}
+
+    {% if show_children %}
+        {% set label_class = label_class ~ " tree-menu__label--with-chevron" %}
+        <input id="{{id}}" class="tree-menu__state" type="checkbox" checked>
+    {% endif %}
+
+    <li class="tree-menu__item">
+        <div class="{{label_class}}">
+            <a class="tree-menu__link" href="{{ header.permalink | safe }}">{{ header.title }}</a>
+            {% if show_children %}
+                <label class="tree-menu__toggle" for="{{id}}">
+                    <img class="tree-menu__chevron" src="/assets/icon-chevron-down.svg">
+                </label>
+            {% endif %}
+        </div>
+        {% if show_children %}
+            <ul class="tree-menu">
+                {% for sub_header in header.children %}
+                    {{ self::news_menu_row(header=sub_header, max_levels=max_levels, level=level + 1)}}
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </li>
+{% endmacro %}
+
+{% macro news_menu(toc, max_levels) %}
+    {% if toc %}
+        <ul class="tree-menu">
+            {% for header in toc %}
+                {{ self::news_menu_row(header=header, max_levels=max_levels, level=1)}}
+            {% endfor %}
+        </ul>
+    {% endif %}
+{% endmacro %}

templates/news-page.html

@@ -1,7 +1,19 @@
-{% extends "layouts/base.html" %}
+{% extends "layouts/page-with-menu.html" %}
+{% import "macros/news.html" as news_macros %}
 
-{% block content %}
-<div class="padded-content">
+{% block page_with_menu_extra_class %}page-with-menu--news{% endblock %}
+
+{% block page_name %}Post{% endblock %}
+
+{% block mobile_page_menu %}
+  {{news_macros::news_menu(toc=page.toc, max_levels=1)}}
+{% endblock %}
+
+{% block page_menu %}
+  {{news_macros::news_menu(toc=page.toc, max_levels=2)}}
+{% endblock %}
+
+{% block page_content %}
   <h1 class="news-title">
     {{ page.title }}
   </h1>
@@ -44,5 +56,4 @@ <h2 class="news-subtitle">Posted on {{ page.date | date(format="%B %d, %Y") }} b
   </div>
   {% endif %}
   <div class="media-content news-content">{{ page.content | safe }}</div>
-</div>
 {% endblock content %}