update active tab and nav item

Author: SoumayaMauthoorMOJ

docs/README.md

@@ -4,13 +4,13 @@
 
     This template is under construction and should only be used for prototyping
 
-The MkDocs Tech Docs Template is an [MkDocs theme](https://www.mkdocs.org/) that you can use to build technical documentation with a GOV.UK style. For a demo visit [mkdocs-tech-docs-template](https://ministryofjustice.github.io/mkdocs-tech-docs-template/).
+The MkDocs Tech Docs Template is an [MkDocs theme](https://www.mkdocs.org/) that you can use to build technical documentation with a [GOV.UK style](https://design-system.service.gov.uk/). For a demo visit [mkdocs-tech-docs-template](https://ministryofjustice.github.io/mkdocs-tech-docs-template/).
 
 The MkDocs Tech Docs Template is a python-based alternative to the ruby-based Middleman [Tech Docs Template](https://github.com/alphagov/tech-docs-template) with the following benefits:
 
 - simple to setup, use and customise
 - exploits the [MkDocs Materials theme](https://squidfunk.github.io/mkdocs-material/) and all it's associated features
-- compatible with the vast and growing ecosystem of [MkDocs Plugins](https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins) see [plugins](plugins/) for some examples
+- compatible with the vast ecosystem of [MkDocs Plugins](https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins), see [plugins](plugins/) for some examples
 - unified tech stack for python-based teams and projects
 - easy to upgrade as new versions of the theme are released
 

setup.cfg

@@ -38,3 +38,4 @@ tech_docs_template =
 	assets/stylesheets/*
 	favicons/*
 	logos/*
+	partials/*

tech_docs_template/__init__.py

@@ -1 +1 @@
-__version__ = "0.0.16"
+__version__ = "0.0.17"

tech_docs_template/assets/stylesheets/extra.css

@@ -71,6 +71,21 @@
   text-underline-offset: 2px;
 }
 
+.md-nav__item--active .md-nav__item--active {
+  font-weight: 700; 
+  margin-left: 10px; 
+  padding-left: 3px;
+  border-left: 3px solid;
+  border-left-color:   #1d70b8;
+}
+
+.md-nav--secondary .md-nav__link--active {
+  /* font-weight: 700;  */
+  padding-left: 3px;
+  border-left: 3px solid;
+  border-left-color:   #1d70b8;
+}
+
 /* Configures the tabs below the header */
 .md-tabs {
   color: #1d70b8;
@@ -87,6 +102,21 @@
   font-weight: 700;
 }
 
+.md-tabs__link:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 3px;
+}
+
+.md-tabs__item--active {
+  border-bottom: 4px solid;
+  border-bottom-color:   #1d70b8;
+  /* text-decoration: underline;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 10px;
+  text-decoration-color:   #1d70b8; */
+}
+
 .md-typeset .admonition,
 .md-typeset details {
   font-size: 16px;

tech_docs_template/partials/tabs-item.html

@@ -0,0 +1,40 @@
+<!-- Work-around until fix merged into mkdocs material -->
+<!-- https://github.com/squidfunk/mkdocs-material/discussions/5048 -->
+
+{% block tab_items %}
+  {% if not class %}
+  {% set class = "md-tabs__link" %}
+  {% set item_class = "md-tabs__item" %}
+  {% if nav_item.active %}
+    {% set class = class ~ " md-tabs__link--active" %}
+    {% set item_class = item_class ~ " md-tabs__item--active" %}
+  {% endif %}
+  {% endif %}
+
+  <!-- Main navigation item with nested items -->
+  {% if nav_item.children %}
+  {% set title = title | d(nav_item.title) %}
+  {% set nav_item = nav_item.children | first %}
+
+  <!-- Recurse, if the first item has further nested items -->
+  {% if nav_item.children %}
+    {% include "partials/tabs-item.html" %}
+
+  <!-- Render item -->
+  {% else %}
+    <li class="{{ item_class }}">
+      <a href="{{ nav_item.url | url }}" class="{{ class }}">
+        {{ title }}
+      </a>
+    </li>
+  {% endif %}
+
+  <!-- Main navigation item -->
+  {% else %}
+  <li class="{{ item_class }}">
+    <a href="{{ nav_item.url | url }}" class="{{ class }}">
+      {{ nav_item.title }}
+    </a>
+  </li>
+  {% endif %}
+{% endblock %}