kosmos/website
8
1
Fork 0
Code Issues Pull Requests Releases Activity

Add mobile nav

Browse Source 
Pure CSS, baby!
This commit is contained in:
Basti
2022-07-03 18:47:45 +02:00
parent 28b79acd1f
commit 05e2d5abd2
3 changed files with 202 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
themes/kosmos-22/layouts/partials/topnav.html
View File

@@ -1,6 +1,6 @@
<header class="max-w-5xl mx-auto px-8 text-left">
<div class="w-full flex items-center justify-items-stretch h-20">
<div class="grow-0 shrink-0">
<div class="w-full h-20 flex items-center justify-items-stretch">
<div class="grow md:grow-0 shrink-0">
<svg class="inline-block align-top -mt-0.5 mr-1.5 w-auto h-6" width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#000"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#000" stroke-width=".65365"/></g></svg>
<h1 class="inline-block uppercase font-bold">{{ .Site.Title }}</h1>
</div>
@@ -8,10 +8,9 @@
<ul class="ml-16 flex items-baseline space-x-8">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">
<li>
<a href="{{ .URL }}" class="font-bold">
{{ .Pre }}
<span>{{ .Name }}</span>
<span class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">{{ .Name }}</span>
</a>
</li>
{{ end }}
@@ -43,5 +42,39 @@
</li>
</ul>
</nav>
<label class="-mr-2 block md:hidden" aria-hidden="true">
<input id="mobile-nav-is-open" type="checkbox" class="hidden" />
<div>
<a id="toggle-mobile-nav" tabindex="0" title="Open menu"
class="inline-flex items-center justify-center p-2 text-black
rounded-md bg-transparent hover:bg-zinc-100
focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-offset-zinc-400 focus:ring-white">
<!-- Heroicon name: outline/menu -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg"
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>
<!-- Heroicon name: outline/x -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</a>
<div class="backdrop absolute top-20 left-0 right-0 bottom-0 bg-zinc-800/70"></div>
<nav class="absolute top-20 left-0 right-0 bg-white px-8 pt-2 pb-8">
<ul class="flex flex-col items-start items-stretch space-y-6">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li>
<a href="{{ .URL }}" class="block font-bold">
<span class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">{{ .Name }}</span>
</a>
</li>
{{ end }}
</ul>
</div>
</div>
</label>
</div>
</header>