Add left-hand navigation to pricing pages

So that you don’t have to use the footer navigation to switch between
these related pages. Matches the template we use for organising
features-related content.

app/main/views/index.py

@@ -16,7 +16,7 @@ from app import email_branding_client, letter_branding_client, status_api_client
 from app.main import main
 from app.main.forms import FieldWithNoneOption, SearchByNameForm
 from app.main.views.feedback import QUESTION_TICKET_TYPE
-from app.main.views.sub_navigation_dictionaries import features_nav
+from app.main.views.sub_navigation_dictionaries import features_nav, pricing_nav
 from app.utils import get_logo_cdn_domain
 
 
@@ -76,6 +76,7 @@ def pricing():
             for cc, country in INTERNATIONAL_BILLING_RATES.items()
         ], key=lambda x: x[0]),
         search_form=SearchByNameForm(),
+        navigation_links=pricing_nav(),
     )
 
 
@@ -83,7 +84,8 @@ def pricing():
 def how_to_pay():
     return render_template(
         'views/pricing/how-to-pay.html',
-        support_link=url_for('main.feedback', ticket_type=QUESTION_TICKET_TYPE)
+        support_link=url_for('main.feedback', ticket_type=QUESTION_TICKET_TYPE),
+        navigation_links=pricing_nav(),
     )
 
 

app/main/views/sub_navigation_dictionaries.py

@@ -39,3 +39,16 @@ def features_nav():
             "link": "main.terms",
         },
     ]
+
+
+def pricing_nav():
+    return [
+        {
+            "name": "Pricing",
+            "link": "main.pricing",
+        },
+        {
+            "name": "How to pay",
+            "link": "main.how_to_pay",
+        },
+    ]

app/templates/views/pricing/how-to-pay.html

@@ -1,4 +1,5 @@
 {% from "components/page-header.html" import page_header %}
+{% from "components/sub-navigation.html" import sub_navigation %}
 
 {% extends "withoutnav_template.html" %}
 
@@ -9,6 +10,9 @@
 {% block maincolumn_content %}
 
   <div class="grid-row">
+    <div class="column-one-third">
+      {{ sub_navigation(navigation_links) }}
+    </div>
     <div class="column-two-thirds">
 
       {{ page_header('How to pay') }}

app/templates/views/pricing/index.html

@@ -1,6 +1,7 @@
 {% from "components/table.html" import mapping_table, row, text_field, field, row_heading %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/live-search.html" import live_search %}
+{% from "components/sub-navigation.html" import sub_navigation %}
 
 {% extends "withoutnav_template.html" %}
 
@@ -11,6 +12,9 @@
 {% block maincolumn_content %}
 
 <div class="grid-row">
+  <div class="column-one-third">
+    {{ sub_navigation(navigation_links) }}
+  </div>
   <div class="column-two-thirds">
 
     <h1 class="heading-large">Pricing</h1>