feat(nav): soulignage de la section active dans la topbar
This commit is contained in:
parent
322457d8e5
commit
953a3593f9
4 changed files with 32 additions and 18 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) %}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue