feat(nav): soulignage de la section active dans la topbar

4 files changed, 32 insertions, 18 deletions

diff --git a/sass/juice.scss b/sass/juice.scss
index 9770ed6..0c2afe3 100644
--- a/sass/juice.scss
+++ b/sass/juice.scss
@@ -77,12 +77,17 @@ header ul li {
 }
 
 header .nav-item {
-  padding: 4px 2px;
+  padding: 8px 6px;
+  margin: 0 10px;
   color: var(--primary-text-color);
 
   &:hover, &:active, &:focus {
     text-decoration: none;
-    border-bottom: white solid 2px;
+    border-bottom: white solid 1px;
+  }
+  &.active {
+    text-decoration: none;
+    border-bottom: white solid 3px;
   }
 }
 
diff --git a/templates/_macros.html b/templates/_macros.html
index 8286314..63d6c98 100644
--- a/templates/_macros.html
+++ b/templates/_macros.html
@@ -1,25 +1,32 @@
 {% macro render_header() %}
-{% set section = get_section(path="_index.md") %}
+{% set root_section = get_section(path="_index.md") %}
+{% set active_section = "" %}
+{% if page and page.components  %}
+    {% set active_section = page.components[0] %}
+{% elif section and section.components %}
+    {% set active_section = section.components[0] %}
+{% endif %}
 
-
-<a href="{{ section.permalink }}">
+<a href="{{ root_section.permalink }}">
     <div class="logo">
         <img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo">
         {{ config.extra.juice_logo_name }}
     </div>
 </a>
-
 <nav>
     <ul>
-        {% for subpath in section.subsections %}
+        {% for subpath in root_section.subsections %}
             {% set sub = get_section(path=subpath) %}
+            {% set is_active = sub.components[0] == active_section %}
             {% if not 'hide_from_menu' in sub.extra or not sub.extra.hide_from_menu %}
-                <li><a class="nav-item text" href="{{ sub.permalink }}">{{ sub.title }}</a></li>
+                <li>
+                    <a class="nav-item text{% if is_active %} active{% endif %}" href="{{ sub.permalink }}">{{ sub.title }}</a>
+                </li>
             {% endif %}
         {% endfor %}
         {% if config.extra.juice_extra_menu %}
             {% for menu in config.extra.juice_extra_menu %}
-            <li><a class="nav-item text" href="{{ menu.link }}">{{ menu.title }}</a></li>
+                <li><a class="nav-item text" href="{{ menu.link }}">{{ menu.title }}</a></li>
             {% endfor %}
         {% endif %}
     </ul>
diff --git a/templates/_nav.html b/templates/_nav.html
index 270f028..600ec4d 100644
--- a/templates/_nav.html
+++ b/templates/_nav.html
@@ -17,9 +17,11 @@
   {{ nav::hamburger(root=root) }}
   
   {# Section title #}
-  <!-- <div class="toc-item toc-section"> -->
-  <!--   <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a> -->
-  <!-- </div> -->
+  {# 
+  <div class="toc-item toc-section">
+    <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a> 
+  </div> 
+  #}
 
   {# Choose between "tree" (has extra.parent) and "list" (default) collections #}
   {% set root_tree = root.pages | group_by(attribute="extra.parent") %}
@@ -46,7 +48,12 @@
 
 {# (Private) Build a breadcrumb for the page #}
 {# It's ugly because this is the hacky part of the project #}
-{% macro breadcrumb(corpus, root, target) %}{% if 'parent' in target.extra and target.extra.parent != root %}{% set new_target = get_page(path=target.extra.parent) %}{{ nav::breadcrumb(corpus=corpus, root=root, target=new_target) }}:{{ new_target.relative_path }}{% endif %}{% endmacro %}
+{% macro breadcrumb(corpus, root, target) %}
+  {% if 'parent' in target.extra and target.extra.parent != root %}
+    {% set new_target = get_page(path=target.extra.parent) %}
+    {{ nav::breadcrumb(corpus=corpus, root=root, target=new_target) }}:{{ new_target.relative_path }}
+  {% endif %}
+{% endmacro %}
 
 {# (Private) Render a list menu (this is the simple fallback when extra.parent is not defined #}
 {% macro list(list, selected) %}
diff --git a/templates/page.html b/templates/page.html
index 61e8811..a3a03dc 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -3,11 +3,6 @@
 
 {% block title %}{{ page.title }} | {{ super() }} {% endblock title %}
 
-{% block header %}
-<header class="box-shadow">
-    {{ macros::render_header() }}
-</header>
-{% endblock header %}
 
 {% block content %}
 <div class="heading-text">{{ page.description }}</div>