make mobile menu header fit the theme

This commit is contained in:
dusk 2022-08-23 09:16:23 +03:00
parent 84c5d7d336
commit a805c22ce4
Signed by: dusk
GPG Key ID: 1D8F8FAF2294D6EA

View File

@ -0,0 +1,47 @@
<nav id="breadcrumbs" class="w-full text-gray-200 md:hidden">
<div class="flex justify-left">
<div class="w-full px-2 py-2 bg-black">
<ul class="flex flex-wrap text-lg">
<li class="inline-flex items-center">
<ema:metadata>
<with var="template">
<img style="width: 1rem;" src="${value:iconUrl}" />
</with>
</ema:metadata>
</li>
<ema:breadcrumbs>
<each-crumb>
<li class="inline-flex items-center">
<a class="px-1 font-bold" href="${crumb:url}">
<crumb:title />
</a>
<svg fill="currentColor" viewBox="0 0 20 20" class="w-auto h-5 text-gray-400">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</li>
</each-crumb>
</ema:breadcrumbs>
</ul>
</div>
<button class="inline px-2 py-1 bg-black outline-none cursor-pointer focus:outline-none"
title="Search (Ctrl+K)" type="button" onclick="window.emanote.stork.toggleSearch()">
<apply template="stork/stork-icon" />
</button>
<button
class="inline px-2 py-1 text-white bg-${theme}-600 outline-none cursor-pointer focus:outline-none"
title="Toggle sidebar" type="button" onclick="toggleHidden('sidebar')">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4" 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>
<script>
function toggleHidden(elemId) {
document.getElementById(elemId).classList.toggle("hidden");
}
</script>
</div>
</nav>