From 8ab880739827e30bbd04556a40309ea91805b33b Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 27 Dec 2025 15:05:22 +0800 Subject: [PATCH] feat: better mobile menu --- assets/css/compiled/main.css | 294 ++++++++++++++---- assets/css/main.css | 65 +++- assets/js/mobilemenu.js | 33 -- layouts/_default/baseof.html | 3 +- layouts/partials/head.html | 1 - layouts/partials/header/basic.html | 262 ++-------------- layouts/partials/header/components/a11y.html | 88 ++++++ .../header/components/desktop-menu.html | 116 +++++++ .../header/components/mobile-menu.html | 152 +++++++++ .../header/components/translations.html | 23 ++ .../header/header-mobile-option-nested.html | 41 --- .../header/header-mobile-option-simple.html | 23 -- .../partials/header/header-mobile-option.html | 5 - .../partials/header/header-option-nested.html | 50 --- .../partials/header/header-option-simple.html | 17 - layouts/partials/header/header-option.html | 5 - layouts/partials/toc.html | 2 +- layouts/partials/translations.html | 29 -- 18 files changed, 678 insertions(+), 531 deletions(-) delete mode 100644 assets/js/mobilemenu.js create mode 100644 layouts/partials/header/components/a11y.html create mode 100644 layouts/partials/header/components/desktop-menu.html create mode 100644 layouts/partials/header/components/mobile-menu.html create mode 100644 layouts/partials/header/components/translations.html delete mode 100644 layouts/partials/header/header-mobile-option-nested.html delete mode 100644 layouts/partials/header/header-mobile-option-simple.html delete mode 100644 layouts/partials/header/header-mobile-option.html delete mode 100644 layouts/partials/header/header-option-nested.html delete mode 100644 layouts/partials/header/header-option-simple.html delete mode 100644 layouts/partials/header/header-option.html delete mode 100644 layouts/partials/translations.html diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 92cac91b..ea544d32 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -11,6 +11,7 @@ --spacing: 0.25rem; --container-2xs: 18rem; --container-xs: 20rem; + --container-md: 28rem; --container-xl: 36rem; --container-3xl: 48rem; --container-7xl: 80rem; @@ -36,6 +37,7 @@ --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; + --tracking-tight: -0.025em; --tracking-normal: 0em; --leading-snug: 1.375; --leading-relaxed: 1.625; @@ -267,12 +269,18 @@ .end-6 { inset-inline-end: calc(var(--spacing) * 6); } + .end-8 { + inset-inline-end: calc(var(--spacing) * 8); + } .top-0 { top: calc(var(--spacing) * 0); } .top-1\/2 { top: calc(1/2 * 100%); } + .top-5 { + top: calc(var(--spacing) * 5); + } .top-20 { top: calc(var(--spacing) * 20); } @@ -303,9 +311,6 @@ .z-10 { z-index: 10; } - .z-30 { - z-index: 30; - } .z-50 { z-index: 50; } @@ -408,6 +413,9 @@ .ms-6 { margin-inline-start: calc(var(--spacing) * 6); } + .ms-7 { + margin-inline-start: calc(var(--spacing) * 7); + } .ms-auto { margin-inline-start: auto; } @@ -1015,29 +1023,6 @@ height: var(--scrollbar-height, 16px); } } - .scrollbar-thin { - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track); - border-radius: var(--scrollbar-track-radius); - } - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); - border-radius: var(--scrollbar-thumb-radius); - } - &::-webkit-scrollbar-corner { - background-color: var(--scrollbar-corner); - border-radius: var(--scrollbar-corner-radius); - } - @supports (-moz-appearance:none) { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial); - } - &::-webkit-scrollbar { - display: block; - width: 8px; - height: 8px; - } - } .line-clamp-3 { overflow: hidden; display: -webkit-box; @@ -1068,6 +1053,9 @@ .inline-block { display: inline-block; } + .inline-flex { + display: inline-flex; + } .table { display: table; } @@ -1090,6 +1078,9 @@ .h-3 { height: calc(var(--spacing) * 3); } + .h-4 { + height: calc(var(--spacing) * 4); + } .h-5 { height: calc(var(--spacing) * 5); } @@ -1099,9 +1090,15 @@ .h-8 { height: calc(var(--spacing) * 8); } + .h-10 { + height: calc(var(--spacing) * 10); + } .h-12 { height: calc(var(--spacing) * 12); } + .h-14 { + height: calc(var(--spacing) * 14); + } .h-24 { height: calc(var(--spacing) * 24); } @@ -1168,6 +1165,9 @@ .w-3 { width: calc(var(--spacing) * 3); } + .w-4 { + width: calc(var(--spacing) * 4); + } .w-5 { width: calc(var(--spacing) * 5); } @@ -1177,6 +1177,9 @@ .w-8 { width: calc(var(--spacing) * 8); } + .w-10 { + width: calc(var(--spacing) * 10); + } .w-12 { width: calc(var(--spacing) * 12); } @@ -1231,6 +1234,9 @@ .max-w-full { max-width: 100%; } + .max-w-md { + max-width: var(--container-md); + } .max-w-prose { max-width: 65ch; } @@ -1359,6 +1365,9 @@ .appearance-none { appearance: none; } + .grid-rows-\[0fr\] { + grid-template-rows: 0fr; + } .flex-col { flex-direction: column; } @@ -1386,16 +1395,12 @@ .gap-2 { gap: calc(var(--spacing) * 2); } + .gap-3 { + gap: calc(var(--spacing) * 3); + } .gap-4 { gap: calc(var(--spacing) * 4); } - .space-y-2 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); - } - } .space-y-3 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -1410,6 +1415,13 @@ margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } } + .space-y-6 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); + } + } .space-y-10 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -1420,6 +1432,9 @@ .gap-x-5 { column-gap: calc(var(--spacing) * 5); } + .gap-x-6 { + column-gap: calc(var(--spacing) * 6); + } .space-x-2 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -1658,15 +1673,15 @@ .bg-neutral-50 { background-color: rgba(var(--color-neutral-50), 1); } + .bg-neutral-50\/97 { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-50), 1), 1) 97%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-50), 1) 97%, transparent); + } + } .bg-neutral-100 { background-color: rgba(var(--color-neutral-100), 1); } - .bg-neutral-100\/50 { - background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent); - } - } .bg-neutral-100\/75 { background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1772,6 +1787,9 @@ .p-1\.5 { padding: calc(var(--spacing) * 1.5); } + .p-2 { + padding: calc(var(--spacing) * 2); + } .p-4 { padding: calc(var(--spacing) * 4); } @@ -1835,6 +1853,9 @@ .py-16 { padding-block: calc(var(--spacing) * 16); } + .py-20 { + padding-block: calc(var(--spacing) * 20); + } .py-\[0\.4rem\] { padding-block: 0.4rem; } @@ -1871,9 +1892,6 @@ .pt-16 { padding-top: calc(var(--spacing) * 16); } - .pt-\[5px\] { - padding-top: 5px; - } .pr-8 { padding-right: calc(var(--spacing) * 8); } @@ -1892,6 +1910,9 @@ .pb-32 { padding-bottom: calc(var(--spacing) * 32); } + .pl-0 { + padding-left: calc(var(--spacing) * 0); + } .text-center { text-align: center; } @@ -2005,6 +2026,10 @@ --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } + .tracking-tight { + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); + } .text-wrap { text-wrap: wrap; } @@ -2221,11 +2246,21 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[grid-template-rows\] { + transition-property: grid-template-rows; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .transition-\[height\] { transition-property: height; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-\[opacity\,visibility\] { + transition-property: opacity,visibility; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .transition-\[transform\,_opacity\] { transition-property: transform, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -2302,12 +2337,6 @@ .\!\[clip\:rect\(0\,0\,0\,0\)\] { clip: rect(0,0,0,0) !important; } - .scrollbar-thumb-neutral-400 { - --scrollbar-thumb: oklch(70.8% 0 0); - } - .scrollbar-track-neutral-200 { - --scrollbar-track: oklch(92.2% 0 0); - } .group-open\:rotate-0 { &:is(:where(.group):is([open], :popover-open, :open) *) { rotate: 0deg; @@ -2403,6 +2432,21 @@ border-top-color: transparent; } } + .peer-checked\:visible { + &:is(:where(.peer):checked ~ *) { + visibility: visible; + } + } + .peer-checked\:opacity-100 { + &:is(:where(.peer):checked ~ *) { + opacity: 100%; + } + } + .peer-checked\/full\:grid-rows-\[1fr\] { + &:is(:where(.peer\/full):checked ~ *) { + grid-template-rows: 1fr; + } + } .before\:absolute { &::before { content: var(--tw-content); @@ -3025,6 +3069,11 @@ rotate: 180deg; } } + .dark\:block { + &:is(.dark *) { + display: block; + } + } .dark\:flex { &:is(.dark *) { display: flex; @@ -3148,6 +3197,11 @@ } } } + .dark\:bg-neutral-900 { + &:is(.dark *) { + background-color: rgba(var(--color-neutral-900), 1); + } + } .dark\:bg-neutral-900\/50 { &:is(.dark *) { background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent); @@ -3156,6 +3210,14 @@ } } } + .dark\:bg-neutral-900\/99 { + &:is(.dark *) { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 99%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 99%, transparent); + } + } + } .dark\:bg-primary-300 { &:is(.dark *) { background-color: rgba(var(--color-primary-300), 1); @@ -3260,16 +3322,6 @@ opacity: 60%; } } - .dark\:scrollbar-thumb-neutral-600 { - &:is(.dark *) { - --scrollbar-thumb: oklch(43.9% 0 0); - } - } - .dark\:scrollbar-track-neutral-800 { - &:is(.dark *) { - --scrollbar-track: oklch(26.9% 0 0); - } - } .dark\:hover\:\!bg-primary-700 { &:is(.dark *) { &:hover { @@ -3345,6 +3397,30 @@ display: none; } } + .\[\&_\.translation_\.menuhide_span\]\:text-sm\! { + & .translation .menuhide span { + font-size: var(--text-sm) !important; + line-height: var(--tw-leading, var(--text-sm--line-height)) !important; + } + } + .\[\&_\.translation_button_\.icon\]\:text-4xl\! { + & .translation button .icon { + font-size: var(--text-4xl) !important; + line-height: var(--tw-leading, var(--text-4xl--line-height)) !important; + } + } + .\[\&_\.translation_button_span\]\:text-base\! { + & .translation button span { + font-size: var(--text-base) !important; + line-height: var(--tw-leading, var(--text-base--line-height)) !important; + } + } + .\[\&_span\]\:text-2xl { + & span { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + } } @layer utilities { .highlight-wrapper { @@ -4170,6 +4246,9 @@ body.zen-mode-enable { color: var(--adm-todo-text); } } +html:not(.dark) { + color-scheme: light; +} html.dark { color-scheme: dark; } @@ -4407,21 +4486,98 @@ pre { .medium-zoom-image--opened { z-index: 100; } -.nested-menu:hover + .menuhide { - visibility: visible; - opacity: 1; - transition: visibility 0.3s, opacity 0.3s ease-in-out; +@layer utilities { + .bf-border-color { + border-color: rgba(var(--color-neutral-300), 1); + &:is(.dark *) { + border-color: rgba(var(--color-neutral-700), 1); + } + } + .bf-border-color-hover { + &:hover { + @media (hover: hover) { + border-color: rgba(var(--color-primary-600), 1); + } + } + &:is(.dark *) { + &:hover { + @media (hover: hover) { + border-color: rgba(var(--color-primary-400), 1); + } + } + } + } + .bf-icon-color-hover { + &:hover { + @media (hover: hover) { + color: rgba(var(--color-primary-600), 1); + } + } + &:is(.dark *) { + &:hover { + @media (hover: hover) { + color: rgba(var(--color-primary-400), 1); + } + } + } + } + .bf-scrollbar { + &::-webkit-scrollbar-track { + background-color: var(--scrollbar-track); + border-radius: var(--scrollbar-track-radius); + } + &::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: var(--scrollbar-thumb-radius); + } + &::-webkit-scrollbar-corner { + background-color: var(--scrollbar-corner); + border-radius: var(--scrollbar-corner-radius); + } + @supports (-moz-appearance:none) { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial); + } + &::-webkit-scrollbar { + display: block; + width: 8px; + height: 8px; + } + --scrollbar-thumb: oklch(70.8% 0 0); + --scrollbar-track: oklch(92.2% 0 0); + &:is(.dark *) { + --scrollbar-thumb: oklch(43.9% 0 0); + } + &:is(.dark *) { + --scrollbar-track: oklch(26.9% 0 0); + } + } } -.menuhide:hover { - visibility: visible; - opacity: 1; - transition: visibility 0.3s, opacity 0.3s ease-in-out; +body:has(#mobile-menu-toggle:checked) { + overflow: hidden; +} +@media (min-width: 853px) { + body { + position: static !important; + } +} +#bmc-wbtn { + z-index: 50 !important; +} +.nested-menu { + position: relative; } .menuhide { - visibility: hidden; - opacity: 0; - transition: visibility 0.3s, opacity 0.3s ease-in-out; + position: absolute; z-index: 1000; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: visibility 0.3s, opacity 0.3s ease-in-out; +} +.nested-menu:hover .menuhide, .nested-menu:focus-within .menuhide { + opacity: 1; + visibility: visible; } .active { text-decoration-line: underline; diff --git a/assets/css/main.css b/assets/css/main.css index 6a36911d..9482c139 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -9,6 +9,10 @@ @import "./components/a11y.css"; @import "./components/admonition.css" layer(components); +html:not(.dark) { + color-scheme: light; +} + html.dark { color-scheme: dark; } @@ -247,29 +251,62 @@ pre { z-index: 100; } -.nested-menu:hover + .menuhide { - visibility: visible; - opacity: 1; - transition: - visibility 0.3s, - opacity 0.3s ease-in-out; +@layer utilities { + .bf-border-color { + @apply border-neutral-300 dark:border-neutral-700; + } + + .bf-border-color-hover { + @apply hover:border-primary-600 dark:hover:border-primary-400; + } + + .bf-icon-color-hover { + @apply hover:text-primary-600 dark:hover:text-primary-400; + } + + .bf-scrollbar { + @apply scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600; + } } -.menuhide:hover { - visibility: visible; - opacity: 1; - transition: - visibility 0.3s, - opacity 0.3s ease-in-out; +/* Prevent body scroll when mobile menu is open */ +body:has(#mobile-menu-toggle:checked) { + overflow: hidden; +} + +/* Reset body position for desktop after it was modified on mobile */ +@media (min-width: 853px) { + body { + position: static !important; + } +} + +/* Hide buy me a coffee in mobile menu */ +#bmc-wbtn { + z-index: 50 !important; +} + +.nested-menu { + position: relative; } .menuhide { - visibility: hidden; + position: absolute; + z-index: 1000; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: visibility 0.3s, opacity 0.3s ease-in-out; - z-index: 1000; +} + +.nested-menu:hover .menuhide, +.nested-menu:focus-within .menuhide { + opacity: 1; + visibility: visible; } .active { diff --git a/assets/js/mobilemenu.js b/assets/js/mobilemenu.js deleted file mode 100644 index a6503650..00000000 --- a/assets/js/mobilemenu.js +++ /dev/null @@ -1,33 +0,0 @@ -var menuButton = document.getElementById("menu-button"); -var menuCloseButton = document.getElementById("menu-close-button"); -var menuWrapper = document.getElementById("menu-wrapper"); - -var menuOpen = false; - -var openMenu = function () { - if (!menuOpen) { - menuOpen = true; - document.body.style.overflowY = "hidden"; - menuButton.style.visibility = "hidden"; - menuWrapper.style.visibility = "visible"; - menuWrapper.style.opacity = "1"; - window.onbeforeunload = function () { - closeMenu(); - }; - } -}; - -var closeMenu = function (e) { - if (menuOpen) { - menuOpen = false; - document.body.style.overflowY = "auto"; - menuButton.style.visibility = "visible"; - menuWrapper.style.visibility = "hidden"; - menuWrapper.style.opacity = "0"; - window.onbeforeunload = function () {}; - e.stopPropagation(); - } -}; - -menuButton && menuButton.addEventListener("click", openMenu); -menuCloseButton && menuCloseButton.addEventListener("click", closeMenu); diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6370e932..44c6acfe 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -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" }} - +
{{ if .Site.Params.Logo }} {{ $logo := resources.Get .Site.Params.Logo }} {{ if $logo }} @@ -21,245 +20,19 @@
{{ end }} - {{- end }} -{{ end }} - -{{/* Desktop navigation */}} -{{ define "HeaderDesktopNavigation" }} - -{{ end }} - -{{/* Mobile navigation - now includes toolbar functions */}} -{{ define "HeaderMobileNavigation" }} -
- {{ partial "translations.html" . }} - {{ if .Site.Params.enableA11y | default false }} - {{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }} - {{ end }} - - {{ if .Site.Params.enableSearch | default false }} - - {{ end }} - - {{ if .Site.Params.footer.showAppearanceSwitcher | default false }} - - {{ end }} - - {{/* Hamburger menu button */}} - {{ if .Site.Menus.main }} - - {{ end }} -
- - {{/* Mobile menu overlay */}} - {{ if .Site.Menus.main }} - {{ end }} -{{ end }} - -{{ define "HeaderA11y" }} - {{- $prefix := .prefix | default "" -}} -
- - - - - -
-{{ end }} - -{{/* ========== Render HTML ========== */}} -
- {{ template "HeaderLogo" . }} {{ if not .Site.Params.disableTextInHeader | default true }} - + {{ .Site.Title | markdownify }} {{ end }}
- {{ template "HeaderDesktopNavigation" . }} - {{ template "HeaderMobileNavigation" . }} + +
+ {{ partial "header/components/mobile-menu.html" . }} +
@@ -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 }} {{ partial "icon.html" .Pre }} {{ end }} -

+ {{ .Name | markdownify }} -

+ {{ end }} @@ -293,10 +66,17 @@ {{ if .Site.Params.highlightCurrentMenuArea }} diff --git a/layouts/partials/header/components/a11y.html b/layouts/partials/header/components/a11y.html new file mode 100644 index 00000000..85ec3779 --- /dev/null +++ b/layouts/partials/header/components/a11y.html @@ -0,0 +1,88 @@ +{{- $prefix := .prefix | default "" -}} +
+ + + + + +
diff --git a/layouts/partials/header/components/desktop-menu.html b/layouts/partials/header/components/desktop-menu.html new file mode 100644 index 00000000..54602580 --- /dev/null +++ b/layouts/partials/header/components/desktop-menu.html @@ -0,0 +1,116 @@ + + +{{ define "DesktopMenu" }} + {{ if .HasChildren }} +
+
+ + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + + {{ partial "icon.html" "chevron-down" }} + + +
+
+
+
+ {{ range .Children }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + + {{ end }} +
+
+
+
+ {{ else }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + {{ if .Name }} + + {{ .Name | markdownify }} + + {{ end }} + + {{ end }} +{{ end }} diff --git a/layouts/partials/header/components/mobile-menu.html b/layouts/partials/header/components/mobile-menu.html new file mode 100644 index 00000000..7a644dbb --- /dev/null +++ b/layouts/partials/header/components/mobile-menu.html @@ -0,0 +1,152 @@ +
+ {{ if .Site.Params.enableSearch | default false }} + + {{ end }} + + {{ if .Site.Params.footer.showAppearanceSwitcher | default false }} + + {{ end }} + + {{ if or + .Site.Menus.main + .Site.Menus.subnavigation + .Site.Params.enableA11y + }} + + + + + {{ end }} +
+ +{{ define "mobile-main-menu" }} + {{ range .Site.Menus.main }} + {{ $submenuId := printf "fullscreen-submenu-%s" (.Identifier | default .Name | anchorize) }} +
+ + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + {{ if .HasChildren }} + + {{ end }} + + + {{ if .HasChildren }} + + +
+
+
+ {{ range .Children }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + + {{ end }} +
+
+
+ {{ end }} +
+ {{ end }} +{{ end }} + +{{ define "mobile-subnavigation" }} + {{ if .Site.Menus.subnavigation }} +
+ {{ range .Site.Menus.subnavigation }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + {{ .Name | markdownify }} + + {{ end }} +
+ {{ end }} +{{ end }} + +{{ define "mobile-footer-components" }} + {{ if or + hugo.IsMultilingual + .Site.Params.enableA11y + }} +
+ {{ partial "header/components/translations.html" . }} + + {{ if .Site.Params.enableA11y | default false }} + {{ partial "header/components/a11y.html" (dict "prefix" "mobile-menu-") }} + {{ end }} +
+ {{ end }} +{{ end }} diff --git a/layouts/partials/header/components/translations.html b/layouts/partials/header/components/translations.html new file mode 100644 index 00000000..c0a24d9f --- /dev/null +++ b/layouts/partials/header/components/translations.html @@ -0,0 +1,23 @@ +{{ if .IsTranslated }} +
+ + +
+{{ end }} diff --git a/layouts/partials/header/header-mobile-option-nested.html b/layouts/partials/header/header-mobile-option-nested.html deleted file mode 100644 index 3614e496..00000000 --- a/layouts/partials/header/header-mobile-option-nested.html +++ /dev/null @@ -1,41 +0,0 @@ -
  • - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} -

    - {{ .Name | markdownify }} -

    - - {{ partial "icon.html" "chevron-down" }} - -     -
    • -{{ range .Children }} -
  • - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} -

    - {{ .Name | markdownify }} -

    -     -
    • -{{ end }} -
  • diff --git a/layouts/partials/header/header-mobile-option-simple.html b/layouts/partials/header/header-mobile-option-simple.html deleted file mode 100644 index ff6cdab5..00000000 --- a/layouts/partials/header/header-mobile-option-simple.html +++ /dev/null @@ -1,23 +0,0 @@ -
  • - - {{ if .Pre }} -
    - {{ partial "icon.html" .Pre }} -
    - {{ end }} - {{ if .Name }} -

    - {{ .Name | markdownify }} -

    - {{ end }} -     -
    • diff --git a/layouts/partials/header/header-mobile-option.html b/layouts/partials/header/header-mobile-option.html deleted file mode 100644 index ab37b369..00000000 --- a/layouts/partials/header/header-mobile-option.html +++ /dev/null @@ -1,5 +0,0 @@ -{{ if .HasChildren }} - {{ partial "header/header-mobile-option-nested.html" . }} -{{ else }} - {{ partial "header/header-mobile-option-simple.html" . }} -{{ end }} diff --git a/layouts/partials/header/header-option-nested.html b/layouts/partials/header/header-option-nested.html deleted file mode 100644 index b1d7ad7b..00000000 --- a/layouts/partials/header/header-option-nested.html +++ /dev/null @@ -1,50 +0,0 @@ -
    -
    - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} - -

    - {{ .Name | markdownify }} -

    -     - - {{ partial "icon.html" "chevron-down" }} - -
    -
    -
    -
    - {{ range .Children }} - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} -

    - {{ .Name | markdownify }} -

    -     - {{ end }} -
    -
    -
    -
    diff --git a/layouts/partials/header/header-option-simple.html b/layouts/partials/header/header-option-simple.html deleted file mode 100644 index ccd60b1e..00000000 --- a/layouts/partials/header/header-option-simple.html +++ /dev/null @@ -1,17 +0,0 @@ - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} - {{ if .Name }} -

    - {{ .Name | markdownify }} -

    - {{ end }} -     diff --git a/layouts/partials/header/header-option.html b/layouts/partials/header/header-option.html deleted file mode 100644 index 73cc1b77..00000000 --- a/layouts/partials/header/header-option.html +++ /dev/null @@ -1,5 +0,0 @@ -{{ if .HasChildren }} - {{ partial "header/header-option-nested.html" . }} -{{ else }} - {{ partial "header/header-option-simple.html" . }} -{{ end }} diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index 316d764d..3d55fc1f 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -1,7 +1,7 @@