Use two columns template and fix current section pagenav underline

content/localization/becoming-tor-translator/contents.lr

@@ -12,7 +12,7 @@ subtitle: Tor Project localization is hosted in the Localization Lab Hub on Tran
 ---
 key: 1
 ---
-html: localization.html
+html: two-columns-page.html
 ---
 body:
 

templates/localization.html

@@ -13,7 +13,9 @@
         <div class="card h-100">
           <div class="card-body">
             <div class="card-body">
-              <h4 class="card-title text-primary"><a href="/{{ this.alt}}{{ child.path }}">{{ _(child.title) }}</a></h4>
+              <h4 class="card-title text-primary">
+                <a href="{{ child.path|url(alt=this.alt) }}">{{ _(child.title) }}</a>
+              </h4>
               <p class="card-text">{{ _(child.subtitle) }}</p>
             </div>
           </div>

templates/pagenav.html

@@ -4,11 +4,13 @@
       <ul class="nav">
         {% set menubag = 'pagenav' + '+' + this.alt %}
         {% for id, item in bag(menubag).items() %}
-        <li{% if this.path == '/' + item.path %} class="nav-item active border-active" {% else %} class="nav-item" {% endif %}>
+        {% set abs_path = item.path %}
+        <li{% if this.is_child_of(abs_path) %} class="nav-item active border-active" {% else %} class="nav-item" {% endif %}>
           {% set elm = site.get(item.path) %}
           {% if elm %}
             <a class="nav-link" href="{{ elm.path|url }}">{{ item.label }}
-          {% elif this.path == '/' + item.path %}
+          {% endif %}
+          {% if this.is_child_of(abs_path) %}
             <span class="sr-only">(current)</span>
           {% endif %}
           </a>

templates/sidenav.html

 <div class="container-fluid sidebar col-xs-12 col-sm-12 col-md-3 col-lg-3">
   <nav class="smalltopics no-background navbar navbar-expand-lg navbar-light bg-white p-0 fixed">
     <a class="text-primary bg-white font-weight-bold navbar-brand" href="#collapseTopicsNav">
-	{{ _('Topics') }}
+	     {{ _('Topics') }}
     </a>
     <label class="side-toggler" for="menu-toggle">
       <a class="btn btn-lg outline-primary text-primary navbar-toggler chevron" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -13,40 +13,28 @@
 
     <div class="collapse navbar-collapse burger-menu" id="navbarSupportedTopicsContent">
       <ul class="nav nav-pills flex-column">
-	{% set topicbag = 'topics+en' %}
-	{% for id, item in bag(topicbag).items() %}
-    <li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
-      <a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %}
-      {% if this.is_child_of(this.parent) %}
-        href="../../{{ item.path }}">
-      {% else %}
-        href="{{ item.path }}">
-      {% endif %}
-      {{ _(item.label) }}</a>
-    </li>
-	{% endfor %}
+        {% for child in this.parent.children %}
+          <li{% if this.is_child_of(child.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item" {% endif %}>
+            <a role="button" {% if this.is_child_of(child.path) %} class="nav-link active" {% else %} class="nav-link" {% endif %}
+              href="{{ child.path|url(alt=this.alt) }}">{{ _(child.title) }}</a>
+          </li>
+      	{% endfor %}
     </ul>
     </div>
     <hr class="mb-0" />
   </nav>
 
-
   <nav class="d-none d-sm-block section-nav bg-white sidetopics sticky" id="sidenav-topics">
-          <h4 class="text-primary pl-4">{{ _('Topics') }}</h4>
+	  <h4 class="text-primary pl-4">{{ _("Topics") }}</h4>
     <ul class="nav nav-pills flex-column">
-      {% set topicbag = 'topics+en' %}
-      {% for id, item in bag(topicbag).items() %}
-        <li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
-          <a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %}
-          {% if this.is_child_of(this.parent) %}
-            href="../../{{ item.path }}">
-          {% else %}
-            href="{{ item.path }}">
-          {% endif %}
-          {{ _(item.label) }}</a>
-      </li>
-
-      {% endfor %}
+    	{% for child in this.parent.children %}
+        <li{% if this.is_child_of(child.path) %} class="toc-entry toc-h2 active nav-item" {% else %} class="toc-entry toc-h2 nav-item" {% endif %}>
+          <a role="button" {% if this.is_child_of(child.path) %} class="nav-link active" {% else %} class="nav-link" {% endif %}
+            href="{{ child.path|url(alt=this.alt) }}">{{ _(child.title) }}</a>
+        </li>
+    	{% endfor %}
     </ul>
   </nav>
+
+
 </div>

templates/two-columns-page.html

+<div class="row pt-5">
+  {% include 'sidenav.html' %}
+  <div class="col-sm-12 col-xs-12  ml-sm-auto col-md-9 col-lg-9 {{ bag('alternatives', this.alt, 'order') }}">
+    {{ this.body }}
+  </div>
+</div>