Indent sub navigation items

app/assets/stylesheets/components/navigation.scss

@@ -108,6 +108,10 @@
     a:active {
       text-decoration: underline;
     }
+
+    ol ol & {
+      padding-left: $gutter;
+    }
   }
 
   &__item--active {

app/main/views/sub_navigation_dictionaries.py

@@ -3,18 +3,20 @@ def features_nav():
         {
             "name": "Features",
             "link": "main.features",
-        },
+            "sub_navigation_items": [
-        {
+                {
-            "name": "Emails",
+                    "name": "Emails",
-            "link": "main.features_email",
+                    "link": "main.features_email",
-        },
+                },
-        {
+                {
-            "name": "Text messages",
+                    "name": "Text messages",
-            "link": "main.features_sms",
+                    "link": "main.features_sms",
-        },
+                },
-        {
+                {
-            "name": "Letters",
+                    "name": "Letters",
-            "link": "main.features_letters",
+                    "link": "main.features_letters",
+                },
+            ]
         },
         {
             "name": "Roadmap",

app/templates/components/sub-navigation.html

@@ -1,18 +1,29 @@
+{% macro sub_navigation_item(item) %}
+  <li class="sub-navigation__item {% if item['link'] == request.endpoint %} sub-navigation__item--active {% endif %}"
+      itemprop="itemListElement"
+      itemscope
+      itemtype="http://schema.org/ListItem"
+  >
+    <a href="{{ url_for(item['link']) }}" itemprop="item">
+      <span itemprop="name">{{item['name']}}</span>
+    </a>
+  </li>
+{% endmacro %}
+
 {% macro sub_navigation(
   item_set
 ) %}
   <nav class="sub-navigation">
     <ol itemscope itemtype="http://schema.org/ItemList">
       {% for item in item_set %}
-        <li class="sub-navigation__item {% if item['link'] == request.endpoint %} sub-navigation__item--active {% endif %}"
+        {{ sub_navigation_item(item) }}
-            itemprop="itemListElement"
+        {% if item.sub_navigation_items %}
-            itemscope
+          <ol itemscope itemtype="http://schema.org/ItemList">
-            itemtype="http://schema.org/ListItem"
+            {% for sub_item in item.sub_navigation_items %}
-        >
+              {{ sub_navigation_item(sub_item) }}
-          <a href="{{ url_for(item['link']) }}" itemprop="item">
+            {% endfor %}
-            <span itemprop="name">{{item['name']}}</span>
+          </ol>
-          </a>
+        {% endif %}
-        </li>
       {% endfor %}
     </ol>
   </nav>