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

content/katedra/_index.md

@@ -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"
 +++
 

content/katedra/bezpecnost-prace/_index.md

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

content/katedra/galerie/_index.md

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

content/katedra/pracovnici/_index.md

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

content/katedra/pravidla-site/_index.md

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

content/katedra/sidlo-pracoviste/_index.md

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

content/katedra/studijni-rad/_index.md

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

content/katedra/ucebny/_index.md

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

sass/main.scss

@@ -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,14 +76,25 @@ header {
 				font-weight: normal;
 				color: #2E3440;
 
-				a {
-					display: flex;
-					align-items: center;
+				.title {
+					margin-bottom: 1em;
 					padding: .5em;
+					font-weight: bold;
+					color: var(--color);
+				}
+
+				ul {
+					flex-direction: column;
+
+					a {
+						display: flex;
+						align-items: center;
+						padding: .5em;
 
-					[class^="icon-"], [class*=" icon-"] {
-						color: var(--color);
-						margin-right: .4em;
+						[class^="icon-"], [class*=" icon-"] {
+							color: var(--color);
+							margin-right: .5em;
+						}
 					}
 				}
 			}

templates/base.html

@@ -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>

templates/index.html

@@ -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>

templates/macros.html

@@ -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,19 +22,42 @@
 				>
 					<a href="{{ section.permalink }}">{{ section.title }}</a>
 					{% if section.subsections %}
-						<ul>
-							{% for subsection in section.subsections %}
-								{% set subsection = get_section(path=subsection) %}
-								<li>
-									<a href="{{ subsection.permalink }}">
-											{% if subsection.extra.icon %}
-												<span class="{{ subsection.extra.icon | safe }}"></span>
-											{% endif %}									
-											{{ subsection.title }}
-									</a>
-								</li>
-							{% endfor %}
-						</ul>
+						<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 %}
+													<span class="{{ subsection.extra.icon | safe }}"></span>
+												{% endif %}
+												{{ subsection.title }}
+											</a>
+										</li>
+									{% endif %}
+								{% endfor %}
+							</ul>
+						</div>
 					{% endif %}
 				</li>
 			{% endfor %}