{% if site.data.menu.minimal_menu %}
<aside class="menu"> <div class="menu-top"> <ul class="navigation"> {% for menu_item in site.data.menu.menu_pages %} <li> <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}"> <i class="{{ menu_item.icon_name }}"> </i> </a> </li> {% endfor %} </ul> </div> <div class="menu-contact"> {% for contact in site.data.menu.menu_contacts %} <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}"> <i class="{{ contact.faicon }}"></i> </a> {% endfor %} </div> </aside>
{% else %}
<aside class="menu"> <div class="menu-top"> <div class="profile"> <div class="avatar"> <a href="{{ '/about.html' | relative_url }}" > <img src="{{ site.data.menu.menu_logo | relative_url }}" alt="avatar" onerror="this.style.display='none'"> </a> </div> <h1>{{ site.data.menu.menu_title }}</h1> <h2>{{ site.data.menu.menu_headline }}</h2> <p>{{ site.data.menu.menu_intro }}</p> </div> <ul class="navigation"> {% for menu_item in site.data.menu.menu_pages %} <li> <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}"> <i class="{{ menu_item.icon_name }}"> </i> <span>{{ menu_item.title }}</span> </a> </li> {% endfor %} </ul> </div> <div class="menu-contact"> {% for contact in site.data.menu.menu_contacts %} <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}"> <i class="{{ contact.faicon }}"></i> </a> {% endfor %} </div> </aside>
{% endif %}
<script>
(function() { window.addEventListener("load", () => { const navigation = document.getElementsByClassName("navigation")[0]; const selectedCategory = navigation.getElementsByTagName("a"); const currCategory = "{{ page.category }}"; for(menuItem of selectedCategory) { if(menuItem.getAttribute("category") === currCategory) { menuItem.classList.add("selected"); return; } } }); })();
</script>