179 lines
14 KiB
HTML
179 lines
14 KiB
HTML
<div class="top-0 z-50 w-full text-gray-200 bg-gray-900 border-2 border-gray-900 md:sticky border-b-stone-200/10">
|
|
<div x-data="{ open: false }"
|
|
class="flex flex-col max-w-full px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
|
|
<div class="flex flex-row items-center justify-between p-4">
|
|
<a href="/" class="flex text-gray-100 transition duration-1000 ease-in-out group">
|
|
<img src="/images/site-logo.svg"
|
|
class="transition-opacity h-9 w-9 group-hover:opacity-50 group-focus:opacity-70"
|
|
alt="{{ .Site.Title }} Logo" />
|
|
<div
|
|
class="mt-1 ml-3 text-xl font-black tracking-tight text-gray-100 transition-colors group-hover:text-gray-400/60">
|
|
{{ .Site.Title }}</div>
|
|
</a>
|
|
<button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open" role="navigation" aria-expanded="false" aria-label="Main" aria-controls="menuItems">
|
|
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
|
|
<path x-show="!open" fill-rule="evenodd"
|
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
|
|
clip-rule="evenodd"></path>
|
|
<path x-show="open" fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<nav :class="{'flex': open, 'hidden': !open}"
|
|
class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
|
|
{{ range site.Menus.main }}
|
|
{{ $menuCtx := (dict "lang" $.Site.Language.Lang "menu" .Params) }}
|
|
{{ if (eq "complexdropdown" .Pre) }}
|
|
<div @click.away="open = false" class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open"
|
|
class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
|
|
<span>{{ or (T .Identifier) .Name | safeHTML }}</span>
|
|
<svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}"
|
|
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
|
|
<path fill-rule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute right-0 z-30 w-full mt-2 origin-top-right md:max-w-sm md:w-screen">
|
|
<div class="px-2 pt-2 pb-4 bg-white rounded-md shadow-lg text-zinc-900">
|
|
<div class="grid grid-cols-1 gap-4">
|
|
{{ range (index site.Menus .Identifier) }}
|
|
<a class="flex items-start p-2 bg-transparent rounded-lg group row hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline"
|
|
href="{{ partial "menu-url.html" $menuCtx }}">
|
|
<div class="p-3 text-white bg-primary-600 rounded-lg group-hover:bg-gray-900">
|
|
{{ if (eq .Pre "stars") }}
|
|
<svg fill="none" stroke="currentColor" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
|
|
class="w-4 h-4 md:h-6 md:w-6">
|
|
<path
|
|
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
|
|
</path>
|
|
</svg>
|
|
{{ else if (eq .Pre "comments") }}
|
|
<svg fill="none" stroke="currentColor" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
|
|
class="w-4 h-4 md:h-6 md:w-6">
|
|
<path
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
|
|
</path>
|
|
</svg>
|
|
{{ else }}
|
|
<svg fill="none" stroke="currentColor" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
|
|
class="w-4 h-4 md:h-6 md:w-6">
|
|
<path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z">
|
|
</path>
|
|
<path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z">
|
|
</path>
|
|
</svg>
|
|
{{ end }}
|
|
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="font-semibold">{{ or (T .Identifier) .Name | safeHTML }}</p>
|
|
<p class="text-sm">{{ or (T .Post) .Post | safeHTML }}</p>
|
|
</div>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ else if (eq "dropdown" .Pre) }}
|
|
<div @click.away="open = false" class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open"
|
|
class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
|
|
<span>{{ or (T .Identifier) .Name | safeHTML }}</span>
|
|
<svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}"
|
|
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
|
|
<path fill-rule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute right-0 z-30 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48">
|
|
<div class="px-2 py-2 text-primary-900 bg-white rounded-md shadow">
|
|
{{ range (index site.Menus .Identifier) }}
|
|
<a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline"
|
|
href="{{ partial "menu-url.html" $menuCtx }}">{{- or (T .Identifier) .Name | safeHTML -}}
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline"
|
|
href="{{ partial "menu-url.html" $menuCtx }}" title="{{ .Title | default .Name }}">
|
|
{{ or (T .Identifier) .Name | safeHTML }}
|
|
</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ if not .Site.Params.Disable_theme_toggle }}
|
|
<button id="theme-toggle" type="button"
|
|
class="p-2 text-sm text-gray-500 rounded-lg md: dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 md:ml-2 max-w-5 xs:hidden">
|
|
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">
|
|
</path>
|
|
</svg>
|
|
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
|
|
aria-label="Dark or Light Mode" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
|
fill-rule="evenodd" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
{{ end }}
|
|
<div @click.away="open = false" class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open"
|
|
class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg md:w-auto md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
|
|
</svg>
|
|
<span class="ml-1">{{ .Site.Language.Lang }}</span>
|
|
</button>
|
|
<div x-show="open" x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute right-0 z-30 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48">
|
|
<div class="px-2 py-2 text-primary-900 bg-white rounded-md shadow">
|
|
{{- $currentURL := trim .Page.RelPermalink "/" -}}
|
|
{{ range (.Site.Languages) }}
|
|
<a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline"
|
|
{{- $url := "" -}}
|
|
{{- if eq .Lang $.Site.Language.Lang -}}
|
|
{{ $url = "." -}}
|
|
{{- else if isset $.Params "url_de" -}}
|
|
{{- $url = $.Params.url_de -}}
|
|
{{- else if isset $.Params "url_en" -}}
|
|
{{- $url = $.Params.url_en -}}
|
|
{{- else -}}
|
|
{{- $url = relURL (replace $currentURL $.Site.Language.Lang .Lang 1) -}}
|
|
{{- end }}
|
|
href="{{- $url | safeURL -}}">
|
|
{{ .LanguageName }}
|
|
</a>
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div> |