ag_kommunikation/webseite
6
4
Fork 5
Code Issues 17 Pull Requests 1 Projects Releases Activity

fix: Menü in mobile und PC-Version gesplittet.

Browse Source 
Etwas Overhead im Template, dafür weniger verschwurbelte Logik.
This commit is contained in:
muli 2024-03-22 23:48:42 +01:00
parent 6307c4f728
commit 9e36de87a1
4 changed files with 116 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/css/style.css
View File

@ -82,6 +82,11 @@ body {
color: var(--wtf-nearly-black);
}
.primary_nav__mobile_navlist {
display: none;
z-index: 16;
}
.primary_nav__navlist {
margin: 0;
display: flex;
@ -1222,6 +1227,10 @@ footer {
display: flex !important;
}
.primary_nav__mobile_navlist {
display: none;
}
.content__inner_box {
margin: -0.5rem 1.5rem 0 1.5rem;
}
@ -1237,6 +1246,10 @@ footer {
display: none;
}
.primary_nav__mobile_navlist {
display: none;
}
.primary_nav__navlist {
display: flex !important;
}
@ -1259,6 +1272,10 @@ footer {
display: none;
}
.primary_nav__mobile_navlist {
display: none;
}
.primary_nav__navlist {
display: flex !important;
}
@ -1295,6 +1312,10 @@ footer {
display: none;
}
.primary_nav__mobile_navlist {
display: none;
}
.primary_nav__navlist {
display: flex !important;
}
@ -1377,6 +1398,10 @@ footer {
display: none;
}
.primary_nav__mobile_navlist {
display: none;
}
.primary_nav__navlist {
display: flex !important;
}
@ -1445,6 +1470,10 @@ footer {
display: none;
}
.primary_nav__mobile_navlist {
display: none;
}
.primary_nav__navlist {
width: 100%;
justify-content: space-evenly;
@ -1619,6 +1648,10 @@ footer {
margin-right: 1rem;
}
.primary_nav__mobile_navlist {
display: none;
}
.primary_nav__navlist {
display: flex !important;
margin-right: 1.5rem;
@ -1923,6 +1956,10 @@ footer {
.primary_nav__navlist {
display: none;
}
.primary_nav__mobile_navlist {
display: none;
position: absolute;
top: 6.5rem;
right: 0;

8
assets/js/nav_toggle.js
View File

@ -1,9 +1,9 @@
document.getElementsByClassName('primary_nav__toggle')[0].addEventListener('click', function(){
let nav_list = document.getElementsByClassName('primary_nav__navlist')[0]
if (nav_list.style.display === 'block') {
nav_list.style.display = 'none';
let mobile_nav_list = document.getElementsByClassName('primary_nav__mobile_navlist')[0]
if (mobile_nav_list.style.display === 'block') {
mobile_nav_list.style.display = 'none';
} else {
nav_list.style.display = 'block';
mobile_nav_list.style.display = 'block';
}
});

2
databags/navigation.json
View File

@ -12,7 +12,7 @@
"href": "/aktuelles",
"slug": "aktuelles",
"visible": true,
"list_childs": false,
"list_childs": true,
"items": {
"Blog": "/blog",
"Podcast": "/podcast"

57
templates/blocks/navigation.html
View File

@ -14,22 +14,24 @@
{% if mapping.visible|default(true) %}
<li id="{{ mapping.slug }}" class="primary_nav__navitem">
{%if not mapping.list_childs %}
<a class="primary_nav__navlink {% if this._path == mapping.href or
this._path in mapping['items'].values() or
title == 'Aktuelles' and
('blog' in this._path or 'podcast' in this._path)
%}-active{% endif %}" href="{{ mapping.href|url }}">
<a class="primary_nav__navlink
{% if this._path == mapping.href
or this._path in mapping['items'].values()
-%}-active{% endif %}" href="{{ mapping.href|url }}">
{{ title }}
</a>
{% elif mapping.list_childs %}
<span>{{ title }}</span>
<span class="primary_nav__navlink
{% if this._path == mapping.href
or this._path in mapping['items'].values()
or this._path in mapping.href
or mapping.href == '/aktuelles' and ('blog' in this._path or 'podcast' in this._path)
-%}-active{% endif %}">
{{ title }}
</span>
<ul class="primary_nav__sub_navlist -closed">
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path == mapping.href or
this._path in mapping['items'].values() or
title == 'Aktuelles' and
('blog' in this._path or 'podcast' in this._path)
%}-active{% endif %}" href="{{ mapping.href|url }}">
<a class="primary_nav__sub_navlink " href="{{ mapping.href|url }}">
{{ title }}
</a>
</li>
@ -40,8 +42,9 @@
{{ sub_title }}
</a>
</li>
{% if sub_title == 'Blog' %}
{% if sub_title == 'Blog' or sub_title == 'Podcast' %}
{% set children = site.get(href).children %}
<ul>
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem">
@ -51,9 +54,36 @@
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% if sub_title == 'Podcast' %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
<ul class="primary_nav__mobile_navlist">
{% for title, mapping in bag("navigation").items() %}
{% if mapping.visible|default(true) %}
<li id="{{ mapping.slug }}" class="primary_nav__navitem">
<a class="primary_nav__navlink {% if this._path == mapping.href -%}-active{% endif %}" href="{{ mapping.href|url }}">
{{ title }}
</a>
{% if mapping.list_childs %}
<ul class="primary_nav__sub_navlist">
{% set sub_menu = mapping['items'].items() %}
{% for sub_title, href in sub_menu %}
<li class="primary_nav__sub_navitem">
<a class="primary_nav__sub_navlink {% if this._path == href %}-active{% endif %}" href="{{ href|url }}">
{{ sub_title }}
</a>
</li>
{% if sub_title == 'Blog' or sub_title == 'Podcast' %}
{% set children = site.get(href).children %}
<ul>
{% for child in children %}
{% if loop.index <= 3 %}
<li class="primary_nav__sub_navitem">
@ -63,6 +93,7 @@
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</ul>