mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
feat: better mobile menu
This commit is contained in:
ZhenShuo Leo
@@ -10,8 +10,7 @@
|
||||
|
||||
{{ $bodyLayout := "flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32" }}
|
||||
{{ $bodyColor := "text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral" }}
|
||||
{{ $bodyScrollbar := "scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600" }}
|
||||
<body class="{{ $bodyLayout }} {{ $bodyColor }} {{ if site.Params.enableStyledScrollbar | default true }}{{ $bodyScrollbar }}{{ end }}">
|
||||
<body class="{{ $bodyLayout }} {{ $bodyColor }} {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
|
||||
<div id="the-top" class="absolute flex self-center">
|
||||
<a
|
||||
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
|
||||
|
||||
@@ -154,7 +154,6 @@
|
||||
{{ if .Site.Params.rtl | default false }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/rtl.js") }}
|
||||
{{ end }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/mobilemenu.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/button-likes.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{{/* Logo section */}}
|
||||
{{ define "HeaderLogo" }}
|
||||
<div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
|
||||
{{ if .Site.Params.Logo }}
|
||||
{{ $logo := resources.Get .Site.Params.Logo }}
|
||||
{{ if $logo }}
|
||||
@@ -21,245 +20,19 @@
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Desktop navigation */}}
|
||||
{{ define "HeaderDesktopNavigation" }}
|
||||
<nav class="hidden md:flex items-center gap-x-5 h-12">
|
||||
{{ if .Site.Menus.main }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ partial "header/header-option.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "translations.html" . }}
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ template "HeaderA11y" (dict "prefix" "desktop-" "Site" .Site) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button"
|
||||
aria-label="Search"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="appearance-switcher"
|
||||
aria-label="Dark mode switcher"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<div class="flex items-center justify-center dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="items-center justify-center hidden dark:flex">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{/* Mobile navigation - now includes toolbar functions */}}
|
||||
{{ define "HeaderMobileNavigation" }}
|
||||
<div class="flex md:hidden items-center gap-x-5 h-12">
|
||||
{{ partial "translations.html" . }}
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button-mobile"
|
||||
aria-label="Search"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<button
|
||||
id="appearance-switcher-mobile"
|
||||
aria-label="Dark mode switcher"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<div class="flex items-center justify-center dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="items-center justify-center hidden dark:flex">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{/* Hamburger menu button */}}
|
||||
{{ if .Site.Menus.main }}
|
||||
<div id="menu-button" class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ partial "icon.html" "bars" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Mobile menu overlay */}}
|
||||
{{ if .Site.Menus.main }}
|
||||
<div
|
||||
id="menu-wrapper"
|
||||
class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
|
||||
<ul
|
||||
class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
|
||||
<li id="menu-close-button">
|
||||
<span
|
||||
class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ partial "icon.html" "xmark" }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ partial "header/header-mobile-option.html" . }}
|
||||
{{ end }}
|
||||
|
||||
</ul>
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<hr>
|
||||
<ul
|
||||
class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
<li class="mb-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "HeaderA11y" }}
|
||||
{{- $prefix := .prefix | default "" -}}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="{{ $prefix }}a11y-toggle"
|
||||
aria-label="Open accessibility panel"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
role="button"
|
||||
aria-pressed="false">
|
||||
{{ partial "icon.html" "a11y" }}
|
||||
</button>
|
||||
|
||||
<div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
|
||||
|
||||
<div
|
||||
id="{{ $prefix }}a11y-panel"
|
||||
role="dialog"
|
||||
aria-labelledby="{{ $prefix }}a11y-panel-title"
|
||||
class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
|
||||
style="min-width: 20rem;">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3
|
||||
id="{{ $prefix }}a11y-panel-title"
|
||||
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{{ i18n "a11y.title" }}
|
||||
</h3>
|
||||
<button
|
||||
id="{{ $prefix }}a11y-close"
|
||||
class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
aria-label="Close a11y panel">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
{{ $toggles := slice }}
|
||||
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
|
||||
{{ $shouldDisableBackgroundImage := or
|
||||
(eq site.Params.homepage.layout "background")
|
||||
(eq site.Params.article.heroStyle "background")
|
||||
(eq site.Params.list.heroStyle "background")
|
||||
(eq site.Params.taxonomy.heroStyle "background")
|
||||
(eq site.Params.term.heroStyle "background")
|
||||
}}
|
||||
{{ if $shouldDisableBlur }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
|
||||
{{ end }}
|
||||
{{ if $shouldDisableBackgroundImage }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images")) }}
|
||||
{{ end }}
|
||||
{{- $toggles = $toggles | append
|
||||
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
|
||||
(dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
|
||||
-}}
|
||||
|
||||
{{- range $toggles }}
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ .label }}
|
||||
</label>
|
||||
<div class="ios-toggle">
|
||||
<input type="checkbox" id="{{ .id }}">
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="{{ $prefix }}font-size-select"
|
||||
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ i18n "a11y.font_size" }}
|
||||
</label>
|
||||
<select
|
||||
id="{{ $prefix }}font-size-select"
|
||||
class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
|
||||
{{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
|
||||
{{ range $fontSizes }}
|
||||
<option value="{{ . }}">{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* ========== Render HTML ========== */}}
|
||||
<div class="main-menu flex items-center w-full gap-2 p-1">
|
||||
{{ template "HeaderLogo" . }}
|
||||
{{ if not .Site.Params.disableTextInHeader | default true }}
|
||||
<a
|
||||
href="{{ "" | relLangURL }}"
|
||||
class="text-base font-medium truncate min-w-0 shrink">
|
||||
<a href="{{ "" | relLangURL }}" class="text-base font-medium truncate min-w-0 shrink">
|
||||
{{ .Site.Title | markdownify }}
|
||||
</a>
|
||||
{{ end }}
|
||||
<div class="flex items-center ms-auto">
|
||||
{{ template "HeaderDesktopNavigation" . }}
|
||||
{{ template "HeaderMobileNavigation" . }}
|
||||
<div class="hidden md:flex">
|
||||
{{ partial "header/components/desktop-menu.html" . }}
|
||||
</div>
|
||||
<div class="flex md:hidden">
|
||||
{{ partial "header/components/mobile-menu.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -275,15 +48,15 @@
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center">
|
||||
class="flex items-center bf-icon-color-hover">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-xs font-light" title="{{ .Title }}">
|
||||
<span class="text-xs font-light" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -293,10 +66,17 @@
|
||||
{{ if .Site.Params.highlightCurrentMenuArea }}
|
||||
<script>
|
||||
(function () {
|
||||
var $mainmenu = $(".main-menu");
|
||||
var mainmenu = document.querySelector(".main-menu");
|
||||
if (!mainmenu) return;
|
||||
|
||||
var path = window.location.pathname;
|
||||
$mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
|
||||
$(e).children("p").addClass("active");
|
||||
var links = mainmenu.querySelectorAll('a[href="' + path + '"]');
|
||||
|
||||
links.forEach(function (link) {
|
||||
var targets = link.querySelectorAll("span");
|
||||
targets.forEach(function (el) {
|
||||
el.classList.add("active");
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
88
layouts/partials/header/components/a11y.html
Normal file
88
layouts/partials/header/components/a11y.html
Normal file
@@ -0,0 +1,88 @@
|
||||
{{- $prefix := .prefix | default "" -}}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="{{ $prefix }}a11y-toggle"
|
||||
aria-label="Open accessibility panel"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="bf-icon-color-hover"
|
||||
role="button"
|
||||
aria-pressed="false">
|
||||
{{ partial "icon.html" "a11y" }}
|
||||
</button>
|
||||
|
||||
<div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 hidden" style="z-index:9999;"></div>
|
||||
|
||||
<div
|
||||
id="{{ $prefix }}a11y-panel"
|
||||
role="dialog"
|
||||
aria-labelledby="{{ $prefix }}a11y-panel-title"
|
||||
class="a11y-panel-enter fixed hidden p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700"
|
||||
style="min-width: 20rem; z-index:9999;">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3
|
||||
id="{{ $prefix }}a11y-panel-title"
|
||||
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{{ i18n "a11y.title" }}
|
||||
</h3>
|
||||
<button
|
||||
id="{{ $prefix }}a11y-close"
|
||||
class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
aria-label="Close a11y panel">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
{{ $toggles := slice }}
|
||||
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
|
||||
{{ $shouldDisableBackgroundImage := or
|
||||
(eq site.Params.homepage.layout "background")
|
||||
(eq site.Params.article.heroStyle "background")
|
||||
(eq site.Params.list.heroStyle "background")
|
||||
(eq site.Params.taxonomy.heroStyle "background")
|
||||
(eq site.Params.term.heroStyle "background")
|
||||
}}
|
||||
{{ if $shouldDisableBlur }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
|
||||
{{ end }}
|
||||
{{ if $shouldDisableBackgroundImage }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images")) }}
|
||||
{{ end }}
|
||||
{{- $toggles = $toggles | append
|
||||
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
|
||||
(dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
|
||||
-}}
|
||||
|
||||
{{- range $toggles }}
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ .label }}
|
||||
</label>
|
||||
<div class="ios-toggle">
|
||||
<input type="checkbox" id="{{ .id }}">
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="{{ $prefix }}font-size-select"
|
||||
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ i18n "a11y.font_size" }}
|
||||
</label>
|
||||
<select
|
||||
id="{{ $prefix }}font-size-select"
|
||||
class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
|
||||
{{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
|
||||
{{ range $fontSizes }}
|
||||
<option value="{{ . }}">{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
116
layouts/partials/header/components/desktop-menu.html
Normal file
116
layouts/partials/header/components/desktop-menu.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<nav class="flex items-center gap-x-5 h-12">
|
||||
{{ if .Site.Menus.main }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ template "DesktopMenu" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "header/components/translations.html" . }}
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ partial "header/components/a11y.html" (dict "prefix" "desktop-") }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button"
|
||||
aria-label="Search"
|
||||
class="text-base bf-icon-color-hover"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="appearance-switcher"
|
||||
aria-label="Dark mode switcher"
|
||||
type="button"
|
||||
class="text-base bf-icon-color-hover">
|
||||
<div class="flex items-center justify-center dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="items-center justify-center hidden dark:flex">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
||||
{{ define "DesktopMenu" }}
|
||||
{{ if .HasChildren }}
|
||||
<div class="nested-menu">
|
||||
<div class="cursor-pointer flex items-center">
|
||||
<a
|
||||
{{ if .URL }}
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
tabindex="0"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center text-base font-medium bf-icon-color-hover"
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span class="text-bg font-bg break-normal" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menuhide">
|
||||
<div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
|
||||
<div class="flex flex-col space-y-3">
|
||||
{{ range .Children }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center bf-icon-color-hover">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center bf-icon-color-hover"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ if .Name }}
|
||||
<span class="text-base font-medium break-normal">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
152
layouts/partials/header/components/mobile-menu.html
Normal file
152
layouts/partials/header/components/mobile-menu.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<div class="flex items-center h-14 gap-4">
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button-mobile"
|
||||
aria-label="Search"
|
||||
class="flex items-center justify-center bf-icon-color-hover"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<button
|
||||
id="appearance-switcher-mobile"
|
||||
type="button"
|
||||
aria-label="Dark mode switcher"
|
||||
class="flex items-center justify-center text-neutral-900 hover:text-primary-600 dark:text-neutral-200 dark:hover:text-primary-400">
|
||||
<div class="dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="hidden dark:block">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if or
|
||||
.Site.Menus.main
|
||||
.Site.Menus.subnavigation
|
||||
.Site.Params.enableA11y
|
||||
}}
|
||||
<input type="checkbox" id="mobile-menu-toggle" autocomplete="off" class="hidden peer">
|
||||
<label for="mobile-menu-toggle" class="flex items-center justify-center cursor-pointer bf-icon-color-hover">
|
||||
{{ partial "icon.html" "bars" }}
|
||||
</label>
|
||||
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style="scrollbar-gutter: stable;"
|
||||
class="fixed inset-0 z-50 invisible overflow-y-auto px-6 py-20 opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100 bg-neutral-50/97 dark:bg-neutral-900/99
|
||||
{{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
|
||||
<label
|
||||
for="mobile-menu-toggle"
|
||||
class="fixed end-8 top-5 flex items-center justify-center z-50 h-12 w-12 cursor-pointer select-none rounded-full bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
|
||||
{{ partial "icon.html" "xmark" }}
|
||||
</label>
|
||||
<nav class="mx-auto max-w-md space-y-6">
|
||||
{{ template "mobile-main-menu" . }}
|
||||
{{ template "mobile-subnavigation" . }}
|
||||
{{ template "mobile-footer-components" . }}
|
||||
</nav>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ define "mobile-main-menu" }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ $submenuId := printf "fullscreen-submenu-%s" (.Identifier | default .Name | anchorize) }}
|
||||
<div class="px-2">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
|
||||
{{ if .Pre }}
|
||||
<span class="flex items-center justify-center h-8 w-8 text-2xl">
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span title="{{ .Title }}" class="text-2xl font-bold tracking-tight">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
{{ if .HasChildren }}
|
||||
<label
|
||||
for="{{ $submenuId }}"
|
||||
class="ms-auto flex items-center justify-center h-10 w-10 cursor-pointer rounded-lg bf-icon-color-hover border bf-border-color bf-border-color-hover">
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</label>
|
||||
{{ end }}
|
||||
</a>
|
||||
|
||||
{{ if .HasChildren }}
|
||||
<input checked type="checkbox" id="{{ $submenuId }}" autocomplete="off" class="hidden peer/full">
|
||||
|
||||
<div
|
||||
class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-checked/full:grid-rows-[1fr]">
|
||||
<div class="overflow-hidden">
|
||||
<div class="ms-7 mt-4">
|
||||
{{ range .Children }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center gap-3 p-2 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
|
||||
{{ if .Pre }}
|
||||
<span class="flex items-center justify-center h-5 w-5">
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span title="{{ .Title }}" class="text-lg">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "mobile-subnavigation" }}
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<div class="flex flex-wrap gap-4 mt-8 pt-8 border-t bf-border-color">
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="inline-flex items-center gap-2 px-2 py-2 bf-icon-color-hover rounded-full text-sm">
|
||||
{{ if .Pre }}
|
||||
<span class="flex items-center justify-center h-4 w-4">
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span title="{{ .Title }}">{{ .Name | markdownify }}</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "mobile-footer-components" }}
|
||||
{{ if or
|
||||
hugo.IsMultilingual
|
||||
.Site.Params.enableA11y
|
||||
}}
|
||||
<div
|
||||
class="flex flex-wrap items-center [&_span]:text-2xl [&_.translation_button_.icon]:text-4xl! [&_.translation_button_span]:text-base! [&_.translation_.menuhide_span]:text-sm! gap-x-6 ps-2 mt-8 pt-8 border-t bf-border-color">
|
||||
{{ partial "header/components/translations.html" . }}
|
||||
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ partial "header/components/a11y.html" (dict "prefix" "mobile-menu-") }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
23
layouts/partials/header/components/translations.html
Normal file
23
layouts/partials/header/components/translations.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{{ if .IsTranslated }}
|
||||
<div class="translation nested-menu">
|
||||
<button class="cursor-pointer flex items-center">
|
||||
<span class="me-1">
|
||||
{{ partial "icon.html" "language" }}
|
||||
</span>
|
||||
<span class="text-sm font-medium bf-icon-color-hover" title="{{ .Title }}">
|
||||
{{- i18n "global.language" | markdownify -}}
|
||||
</span>
|
||||
</button>
|
||||
<ul class="menuhide">
|
||||
<li class="rounded-xl backdrop-blur shadow-2xl p-2 flex flex-col gap-1">
|
||||
{{ range .AllTranslations }}
|
||||
<a href="{{ .RelPermalink }}" class="flex items-center bf-icon-color-hover px-3 py-1">
|
||||
<span class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Language.Params.displayName | emojify }}
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,41 +0,0 @@
|
||||
<li class="mt-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-bg font-bg" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ range .Children }}
|
||||
<li class="mt-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
|
||||
)
|
||||
}}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-small" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
<li class="mb-2"></li>
|
||||
@@ -1,23 +0,0 @@
|
||||
<li class="mt-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
|
||||
)
|
||||
}}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<div {{ if and .Pre .Name }}class="mr-2"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .Name }}
|
||||
<p class="text-bg font-bg">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
@@ -1,5 +0,0 @@
|
||||
{{ if .HasChildren }}
|
||||
{{ partial "header/header-mobile-option-nested.html" . }}
|
||||
{{ else }}
|
||||
{{ partial "header/header-mobile-option-simple.html" . }}
|
||||
{{ end }}
|
||||
@@ -1,50 +0,0 @@
|
||||
<div>
|
||||
<div class="cursor-pointer flex items-center nested-menu">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<a
|
||||
{{ if .URL }}
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ .Title }}">
|
||||
<p class="break-normal">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute menuhide">
|
||||
<div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
|
||||
<div class="flex flex-col space-y-3">
|
||||
{{ range .Children }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}target="_blank"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ if .Name }}
|
||||
<p class="text-base font-medium break-normal">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</a>
|
||||
@@ -1,5 +0,0 @@
|
||||
{{ if .HasChildren }}
|
||||
{{ partial "header/header-option-nested.html" . }}
|
||||
{{ else }}
|
||||
{{ partial "header/header-option-simple.html" . }}
|
||||
{{ end }}
|
||||
@@ -1,7 +1,7 @@
|
||||
<details
|
||||
open
|
||||
id="TOCView"
|
||||
class="toc-right mt-0 overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
|
||||
class="toc-right mt-0 overflow-y-auto overscroll-contain bf-scrollbar rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
|
||||
<summary
|
||||
class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 -ms-5 ps-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
|
||||
{{ i18n "article.table_of_contents" }}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
{{ if .IsTranslated }}
|
||||
<div>
|
||||
<div class="cursor-pointer flex items-center nested-menu">
|
||||
<span class="me-1">
|
||||
{{ partial "icon.html" "language" }}
|
||||
</span>
|
||||
<div
|
||||
class="text-sm font-medium hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ .Title }}">
|
||||
{{- i18n "global.language" | markdownify -}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute menuhide">
|
||||
<div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
|
||||
<div class="flex flex-col space-y-3">
|
||||
{{ range .AllTranslations }}
|
||||
<a href="{{ .RelPermalink }}" class="flex items-center">
|
||||
<p
|
||||
class="text-sm font-sm hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ .Title }}">
|
||||
{{ .Language.Params.displayName | emojify }}
|
||||
</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user