Zobrazení sub-položek hlavní navigace do sloupců

Položky v každé sekci jsou řazeny do dvou sloupců, implicitně do levého.
Pokud má položka atribut `nav_right = true`, bude vyrenderována v pravém
sloupci. Řazení položek se vyhodnocuje vahou. Sloupcům je možné nastavit
názvy, a to v hlavičce hlavní sekce pomocí atributů `nav_title_left` a
`nav_title_right`.

Closes: #11
remotes/1726908188925722499/search
Emil Miler 4 years ago
parent d24c9d1d50
commit e2b66c1c0e

@ -3,6 +3,8 @@ title = "Katedra"
[extra]
color = "#B48EAD"
nav_title_left = "Informace o katedře"
nav_title_right = "Pravidla a předpisy"
heading = "Katedra informačních technologií a technické výchovy"
+++

@ -0,0 +1,7 @@
+++
title = "Bezpečnost práce"
[extra]
nav_right = true
icon = "icon-skull-line"
+++

@ -1,4 +1,8 @@
+++
title = "Galerie"
weight = 4
[extra]
icon = "icon-book-3-line"
+++

@ -1,5 +1,6 @@
+++
title = "Pracovníci"
weight = 1
template = "people-list.html"
page_template = "people-profile.html"

@ -0,0 +1,7 @@
+++
title = "Pravidla pro práci v síti"
[extra]
nav_right = true
icon = "icon-node-tree"
+++

@ -1,4 +1,8 @@
+++
title = "Sídlo pracoviště"
weight = 2
[extra]
icon = "icon-map-pin-line"
+++

@ -0,0 +1,7 @@
+++
title = "Studijní řád"
[extra]
nav_right = true
icon = "icon-file-paper-2-line"
+++

@ -1,4 +1,8 @@
+++
title = "Učebny"
weight = 3
[extra]
icon = "icon-artboard-line"
+++

@ -57,12 +57,13 @@ header {
a { padding: .9rem }
li:hover { color: var(--color) }
li:hover ul { display: grid }
li:hover div { display: grid }
ul {
grid-template-columns: auto auto;
li>div {
display: none;
position: absolute;
grid-template-columns: 1fr 1fr;
column-gap: 1em;
left: 0;
top: 100%;
width: 100%;
@ -75,6 +76,16 @@ header {
font-weight: normal;
color: #2E3440;
.title {
margin-bottom: 1em;
padding: .5em;
font-weight: bold;
color: var(--color);
}
ul {
flex-direction: column;
a {
display: flex;
align-items: center;
@ -82,7 +93,8 @@ header {
[class^="icon-"], [class*=" icon-"] {
color: var(--color);
margin-right: .4em;
margin-right: .5em;
}
}
}
}

@ -20,7 +20,7 @@
<div class="wrap">
<a href="{{ config.base_url }}" class="logo"><img src="{{ get_url(path="logo-plain.svg") }}" alt="Logo KITTV"></a>
<nav class="primary">
{{ macro::nav_list_items_recursive(items=config.extra.nav_primary) }}
{{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
</nav>
<nav class="secondary">
<span class="icon-search-line"></span>

@ -9,7 +9,7 @@
{{ macro::nav_list_items(items=config.extra.nav_secondary) }}
</nav>
<nav class="primary">
{{ macro::nav_list_items_recursive(items=config.extra.nav_primary) }}
{{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
</nav>
</section>
</div>

@ -8,7 +8,7 @@
{% endif %}
{% endmacro %}
{% macro nav_list_items_recursive(items) %}
{% macro nav_list_items_main(items) %}
{% if items %}
<ul>
{% for item in items %}
@ -22,9 +22,30 @@
>
<a href="{{ section.permalink }}">{{ section.title }}</a>
{% if section.subsections %}
<div>
{% if section.extra.nav_title_left and section.extra.nav_title_right %}
<div class="title">{{ section.extra.nav_title_left }}</div>
<div class="title">{{ section.extra.nav_title_right }}</div>
{% endif %}
<ul>
{% for subsection in section.subsections %}
{% set subsection = get_section(path=subsection) %}
{% if not subsection.extra.nav_right %}
<li>
<a href="{{ subsection.permalink }}">
{% if subsection.extra.icon %}
<span class="{{ subsection.extra.icon | safe }}"></span>
{% endif %}
{{ subsection.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<ul>
{% for subsection in section.subsections %}
{% set subsection = get_section(path=subsection) %}
{% if subsection.extra.nav_right %}
<li>
<a href="{{ subsection.permalink }}">
{% if subsection.extra.icon %}
@ -33,8 +54,10 @@
{{ subsection.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}

Loading…
Cancel
Save