1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-07 14:35:26 +02:00

Changed navigator component by passing objects, removed navigator wrapper

This commit is contained in:
slaveeks 2022-08-01 16:53:53 +03:00
parent 81afc966fb
commit 385c475a34
3 changed files with 32 additions and 19 deletions

View file

@ -1,13 +1,12 @@
{#
Reusable navigaor component.
Available props:
- label
- direction: previous, next
- url: navigation link
- class: additional class for the button
- previousPage
- nextPage
- class: additional class for the navigator
Usage example:
{% include 'components/navigator.twig' with {label: 'Previous page', direction: 'previous'} %}
{% include 'components/navigator.twig' with {previousPage: previousPage, nextPage: nextPage} %}
#}
{% set mainClass = 'navigator' %}
@ -15,23 +14,39 @@ Usage example:
{% set tag = 'div' %}
{% if url is not empty %}
{% set tag = 'a' %}
{% endif %}
{% set tag = 'a' %}
<div class="navigator--wrapper">
{% if label and url %}
<div>
{% if previousPage %}
<{{ tag }}
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
class="{{ mainClass }} {{ mainClass }}--{{ direction|default('previous') }} {{ class ?? '' }}"
{{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
class="{{ mainClass }} {{ mainClass }}--previous {{ class ?? '' }}"
href="/{{ previousPage.uri }}"
>
<div class="{{ mainClass }}__direction">
{{ direction }}
<div class="{{ mainClass }}-direction">
previous
</div>
<div class="{{ mainClass }}__label">
{{ label }}
<div class="{{ mainClass }}-label">
{{ previousPage.title }}
</div>
</{{ tag }}>
{% endif %}
</div>
<div>
{% if nextPage %}
<{{ tag }}
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
class="{{ mainClass }} {{ mainClass }}--next {{ class ?? '' }}"
href="/{{ nextPage.uri }}"
>
<div class="{{ mainClass }}-direction">
next
</div>
<div class="{{ mainClass }}-label">
{{ nextPage.title }}
</div>
</{{ tag }}>
{% endif %}
</div>

View file

@ -40,8 +40,7 @@
{% endfor %}
</section>
<footer class="page__footer">
{% include 'components/navigator.twig' with {label: previousPage.title, direction: 'previous', url: '/' ~ previousPage.uri} %}
{% include 'components/navigator.twig' with {label: nextPage.title, direction: 'next', url: '/' ~ nextPage.uri} %}
{% include 'components/navigator.twig' with {previousPage: previousPage, nextPage: nextPage} %}
</footer>
</article>

View file

@ -34,4 +34,3 @@
}