{% capture siteUrl %}{{ “/” | relative_url }}{% endcapture %} {% capture siteTitle %}{{ site.title }}{% endcapture %}
{% capture categoriesUrl %}{{ “/categories” | relative_url }}{% endcapture %} {% capture categoriesLabel %}{{ site.acg.categories.label | default: “Categories” }}{% endcapture %}
{% capture tagsUrl %}{{ “/tags” | relative_url }}{% endcapture %} {% capture tagsLabel %}{{ site.acg.tags.label | default: “Tags” }}{% endcapture %}
{% capture aboutUrl %}{{ “/about” | relative_url }}{% endcapture %} {% capture aboutLabel %}{{ site.acg.about.label | default: “About” }}{% endcapture %}
{% capture friendsUrl %}{{ “/friends” | relative_url }}{% endcapture %} {% capture friendsLabel %}{{ site.acg.friends.label | default: “Friends” }}{% endcapture %}
{% assign friends = site.data.friends %}
<header class=“w-full fixed z-50 select-none bg-{{ color }}-600 bg-opacity-10 bg-blur”>
<nav class="p-4 font-serif text-xl text-{{ color }}-50 flex justify-between"> <a class="hover:text-{{ color }}-400 text-2xl" href="{{ siteUrl }}">{{ siteTitle }}</a> <div class="hidden md:block space-x-4"> <a class="hover:text-{{ color }}-400" href="{{ categoriesUrl }}">{{ categoriesLabel }}</a> <a class="hover:text-{{ color }}-400" href="{{ tagsUrl }}">{{ tagsLabel }}</a> <a class="hover:text-{{ color }}-400" href="{{ aboutUrl }}">{{ aboutLabel }}</a> {% if friends.size > 0 %} <a class="hover:text-{{ color }}-400" href="{{ friendsUrl }}">{{ friendsLabel }}</a> {% endif %} </div> <style>#theme-menu:hover > #theme-menu-dropdown { display: block; }</style> <div id="theme-menu" class="md:hidden"> <button class="hover:outline-none hover:text-{{ color }}-400"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></svg> </button> <div class="hidden origin-top-right absolute right-1 rounded-md py-1 bg-{{ color }}-100 bg-opacity-50 focus:block focus:outline-none" id="theme-menu-dropdown"> <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ categoriesUrl }}">{{ categoriesLabel }}</a> <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ tagsUrl }}">{{ tagsLabel }}</a> <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ aboutUrl }}">{{ aboutLabel }}</a> {% if friends.size > 0 %} <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ friendsUrl }}">{{ friendsLabel }}</a> {% endif %} </div> </div> </nav>
</header>