feat: add the topAppBar.expandBreakpoint parameter

razonyang · Dec 22, 2024 · 6413d01 · 6413d01
1 parent 6fb736b
commit 6413d01
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 32 deletions.
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -285,6 +285,7 @@ subPath = "exampleSite"
 # colorToggle = false # Disable the color toggle
 # coloredInDark = true # Colored in dark mode
 # dropdownMenuToggle = false # Hide the dropdown menu toggle.
+# expandBreakpoint = "xl" # expand the content above the specific breakpoint: lg, xl, xxl.
 [topAppBar.social]
 github = "razonyang/hugo-theme-bootstrap"
 patreon = "razonyang"

diff --git a/exampleSite/content/docs/configuration/site-params/index.md b/exampleSite/content/docs/configuration/site-params/index.md
@@ -92,6 +92,7 @@ The site parameters are located in `config/_default/params.toml` by default.
 | `topAppBar.colorToggle` | Boolean | `true` | Turn on/off the color/mode toggle.
 | `topAppBar.coloredInDark` | Boolean | `false` | Colored in dark mode.
 | `topAppBar.dropdownMenuToggle` | Boolean | `true` | Hide the dropdown menu toggle.
+| `topAppBar.expandBreakpoint` | string | `xxl` | Expand content above this breakpoint, e.g. `lg`, `xl`, `xxl`.
 | **Webmaster Site Verification** 
 | `siteVerification` | Object | - |
 | `siteVerification.google` | String | - | Google

diff --git a/exampleSite/content/docs/configuration/site-params/index.zh-hans.md b/exampleSite/content/docs/configuration/site-params/index.zh-hans.md
@@ -94,6 +94,7 @@ authors = ["RazonYang"]
 | `topAppBar.colorToggle` | Boolean | `true` | 开启或禁用颜色/模式开关。
 | `topAppBar.coloredInDark` | Boolean | `false` | 在深色模式下着色。
 | `topAppBar.dropdownMenuToggle` | Boolean | `true` | 隐藏下拉菜单的按钮。
+| `topAppBar.expandBreakpoint` | string | `xxl` | 在此断点以上展开内容，如：`lg`、`xl`、`xxl`。
 | **Webmaster Site Verification** 
 | `siteVerification` | Object | - |
 | `siteVerification.google` | String | - | Google

diff --git a/exampleSite/content/docs/configuration/site-params/index.zh-hant.md b/exampleSite/content/docs/configuration/site-params/index.zh-hant.md
@@ -94,6 +94,7 @@ authors = ["RazonYang"]
 | `topAppBar.colorToggle` | Boolean | `true` | 開啟或禁用顏色/模式開關。
 | `topAppBar.coloredInDark` | Boolean | `false` | 在深色模式下著色。
 | `topAppBar.dropdownMenuToggle` | Boolean | `true` | 隱藏下拉菜單的按鈕。
+| `topAppBar.expandBreakpoint` | string | `xxl` | 在此斷點以上展開內容，如：`lg`、`xl`、`xxl`。
 | **Webmaster Site Verification** 
 | `siteVerification` | Object | - |
 | `siteVerification.google` | String | - | Google

diff --git a/layouts/partials/header/font-size.html b/layouts/partials/header/font-size.html
@@ -1,8 +1,9 @@
 {{- if isset $.Site.Params "fontsize" }}
-<li class="nav-item dropdown col-6 col-xxl-auto">
-    <a class="nav-link px-0 py-2 px-xxl-1" href="#" id="fontSizeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+{{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
+<li class="nav-item dropdown col-6 col-{{ $expandBreakpoint }}-auto">
+    <a class="nav-link px-0 py-2 px-{{ $expandBreakpoint }}-1" href="#" id="fontSizeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
         <i class="fas fa-fw fa-font"></i>
-        <span class="d-xxl-none">{{ i18n "font_size" }}</span>
+        <span class="d-{{ $expandBreakpoint }}-none">{{ i18n "font_size" }}</span>
     </a>
     <ul class="font-size-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby="fontSizeDropdown">
         {{- range slice "xs" "sm" "md" "lg" "xl" }}

diff --git a/layouts/partials/header/index.html b/layouts/partials/header/index.html
@@ -1,6 +1,7 @@
 {{- $baseURL := $.Site.BaseURL }}
 {{- $dropdownMenuToggle := default true $.Site.Params.topAppBar.dropdownMenuToggle }}
-<nav class="top-app-bar shadow navbar navbar-expand-xxl">
+{{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
+<nav class="top-app-bar shadow navbar navbar-expand-{{ $expandBreakpoint }}">
   <div class="{{- partialCached "functions/container-class" . .FirstSection -}}">
     {{- if eq .Type "docs" }}
     <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDocsNav"
@@ -9,20 +10,20 @@
     </button>
     {{- end }}
     {{- partial "header/brand" . }}
-    <div class="offcanvas-xxl offcanvas-end flex-grow-1" data-bs-scroll="true" tabindex="-1" id="navbarMenus" aria-labelledby="navbarMenusLabel">
+    <div class="offcanvas-{{ $expandBreakpoint }} offcanvas-end flex-grow-1" data-bs-scroll="true" tabindex="-1" id="navbarMenus" aria-labelledby="navbarMenusLabel">
       <div class="offcanvas-header px-4 pb-0">
         <div class="offcanvas-title h5" id="navbarMenusLabel">{{- with .Site.Params.brand }}{{ . }}{{ else }}{{ $.Site.Title }}{{ end }}</div>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" data-bs-target="#navbarMenus" aria-label="Close"></button>
       </div>
-      <div class="offcanvas-body p-4 pt-0 p-xxl-0">
-        <hr class="d-xxl-none">
+      <div class="offcanvas-body p-4 pt-0 p-{{ $expandBreakpoint }}-0">
+        <hr class="d-{{ $expandBreakpoint }}-none">
         <ul class="navbar-nav flex-row flex-wrap align-items-center me-auto">
           {{- $currentPage := . }}
           {{- range .Site.Menus.main }}
           {{- $url := .URL | absURL }}
           {{- $active := or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }}
           {{- if .HasChildren }}
-          <li class="nav-item col-12 col-xxl-auto dropdown px-0">
+          <li class="nav-item col-12 col-{{ $expandBreakpoint }}-auto dropdown px-0">
             <a href="#"
               class="nav-link{{ if $dropdownMenuToggle }} dropdown-toggle{{ end }}{{ if $currentPage.HasMenuCurrent "main" . }} active{{ end }}"
               id="navbarDropdown{{ title .Identifier }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -38,7 +39,7 @@
               <li><hr class="dropdown-divider"></li>
               {{- else }}
               <li>
-                <a class="dropdown-item d-flex align-items-center text-wrap text-xxl-nowrap{{ if or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }} active{{ end }}"
+                <a class="dropdown-item d-flex align-items-center text-wrap text-{{ $expandBreakpoint }}-nowrap{{ if or (eq $currentPage.Permalink (absURL .URL)) ($currentPage.IsMenuCurrent "main" .) }} active{{ end }}"
                   href="{{ $childURL }}"{{ if not (hasPrefix $childURL $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
                   {{- .Pre -}}
                   {{- with .Params.icon }}
@@ -62,8 +63,8 @@
             </ul>
           </li>
           {{- else -}}
-          <li class="nav-item col-6 col-xxl-auto">
-            <a class="nav-link py-2 px-0 px-xxl-2{{ if $active }} active{{ end }}" href="{{ $url }}"{{ if not (hasPrefix $url $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
+          <li class="nav-item col-6 col-{{ $expandBreakpoint }}-auto">
+            <a class="nav-link py-2 px-0 px-{{ $expandBreakpoint }}-2{{ if $active }} active{{ end }}" href="{{ $url }}"{{ if not (hasPrefix $url $baseURL) }} target="_blank" rel="noopener noreferrer"{{ end }}>
               {{- partial "helpers/menu-name" . }}
             </a>
           </li>
@@ -72,7 +73,7 @@
         </ul>
         {{ partial "header/search-bar" . }}
         {{- if or (default true .Site.Params.topAppBar.colorToggle) (isset $.Site.Params "fontsize") ( gt (len $.Site.Home.AllTranslations) 1) (.Site.Params.Palettes) (.Site.Params.topAppBar.social) -}}
-        <hr class="d-xxl-none">
+        <hr class="d-{{ $expandBreakpoint }}-none">
         <ul class="navbar-nav flex-row flex-wrap align-items-center ms-md-auto">
           {{- partial "header/social-links" . }}
           {{- partialCached "header/languages" . }}

diff --git a/layouts/partials/header/languages.html b/layouts/partials/header/languages.html
@@ -1,8 +1,9 @@
 {{- if gt (len $.Site.Home.AllTranslations) 1 }}
-<li class="nav-item dropdown py-1 py-xxl-1 col-6 col-xxl-auto">
-    <a class="nav-link px-0 px-xxl-1" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+{{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
+<li class="nav-item dropdown py-1 py-{{ $expandBreakpoint }}-1 col-6 col-{{ $expandBreakpoint }}-auto">
+    <a class="nav-link px-0 px-{{ $expandBreakpoint }}-1" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
         <i class="fas fa-fw fa-globe"></i>
-        <span class="d-xxl-none">{{ i18n "language" }}</span>
+        <span class="d-{{ $expandBreakpoint }}-none">{{ i18n "language" }}</span>
     </a>
     <ul class="language-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
         {{- range $.Site.Home.AllTranslations }}
@@ -14,8 +15,8 @@
         {{- end -}}
     </ul>
 </li>
-<li class="nav-item py-1 col-12 col-xxl-auto">
-  <div class="vr d-none d-xxl-flex h-100 mx-xxl-2 text-white"></div>
-  <hr class="d-xxl-none my-2">
+<li class="nav-item py-1 col-12 col-{{ $expandBreakpoint }}-auto">
+  <div class="vr d-none d-{{ $expandBreakpoint }}-flex h-100 mx-{{ $expandBreakpoint }}-2 text-white"></div>
+  <hr class="d-{{ $expandBreakpoint }}-none my-2">
 </li>
 {{- end -}}
diff --git a/layouts/partials/header/palettes.html b/layouts/partials/header/palettes.html
@@ -1,8 +1,9 @@
 {{- if .Site.Params.Palettes }}
-<li class="nav-item dropdown col-6 col-xxl-auto">
-    <a class="nav-link px-0 py-2 px-xxl-1" href="#" id="paletteDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+{{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
+<li class="nav-item dropdown col-6 col-{{ $expandBreakpoint }}-auto">
+    <a class="nav-link px-0 py-2 px-{{ $expandBreakpoint }}-1" href="#" id="paletteDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
         <i class="fas fa-fw fa-palette"></i>
-        <span class="d-xxl-none">{{ i18n "palette" }}</span>
+        <span class="d-{{ $expandBreakpoint }}-none">{{ i18n "palette" }}</span>
     </a>
     <ul class="palette-dropdown-menu dropdown-menu dropdown-menu-end px-2 row g-2" aria-labelledby="paletteDropdown">
         {{- range .Site.Params.Palettes }}

diff --git a/layouts/partials/header/search-bar.html b/layouts/partials/header/search-bar.html
@@ -1,8 +1,9 @@
 {{- if .Site.Params.searchBar }}
   {{- $page := .Site.GetPage "/search" }}
   {{- if ne $page.RelPermalink .RelPermalink -}}
+    {{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
     {{- $shortcut := partialCached "functions/search-shortcut" . }}
-    <hr class="d-xxl-none">
+    <hr class="d-{{ $expandBreakpoint }}-none">
     <form class="search-bar ms-auto my-auto" action="{{ with $page }}{{ .RelPermalink }}{{ end }}" novalidate>
       <div class="input-group align-items-center">
         <span class="btn btn-search disabled position-absolute left-0 border-0 px-1">

diff --git a/layouts/partials/header/search-button.html b/layouts/partials/header/search-button.html
@@ -5,6 +5,7 @@
       {{- $index := $tmpl | resources.ExecuteAsTemplate "algolia/index.json" . }}
       {{- $indexURL = $index.RelPermalink }}
   {{- end -}}
-  <hr class="vr d-none d-xxl-block ms-xxl-1">
-  <div class="search-button d-flex align-items-center ms-0 ms-xxl-2 p-0" data-search-index="{{ $indexURL }}"></div>
+  {{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
+  <hr class="vr d-none d-{{ $expandBreakpoint }}-block ms-{{ $expandBreakpoint }}-1">
+  <div class="search-button d-flex align-items-center ms-0 ms-{{ $expandBreakpoint }}-2 p-0" data-search-index="{{ $indexURL }}"></div>
 {{- end -}}
diff --git a/layouts/partials/header/social-links.html b/layouts/partials/header/social-links.html
@@ -1,11 +1,12 @@
 {{- if .Site.Params.topAppBar.social }}
-<li class="nav-item py-2 py-xxl-1 col-12 col-xxl-auto">
+{{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
+<li class="nav-item py-2 py-{{ $expandBreakpoint }}-1 col-12 col-{{ $expandBreakpoint }}-auto">
 {{- $data := dict "links" .Site.Params.topAppBar.social "OutputFormats" $.OutputFormats "home" (.GetPage "/") "params" .Site.Params "iconText" true "color" false }}
-{{- $data = merge $data (dict "class" "flex-row" "linkClass" "col-6 col-xxl-auto p-1" "iconTextClass" "ms-1 d-xxl-none") }}
+{{- $data = merge $data (dict "class" "flex-row" "linkClass" (printf "col-6 col-%s-auto p-1" $expandBreakpoint) "iconTextClass" (printf "ms-1 d-%s-none" $expandBreakpoint)) }}
 {{- partial "helpers/social-links" $data }}
 </li>
-<li class="nav-item py-2 py-xxl-1 col-12 col-xxl-auto">
-  <div class="vr d-none d-xxl-flex h-100 mx-xxl-2 text-white"></div>
-  <hr class="d-xxl-none my-2">
+<li class="nav-item py-2 py-{{ $expandBreakpoint }}-1 col-12 col-{{ $expandBreakpoint }}-auto">
+  <div class="vr d-none d-{{ $expandBreakpoint }}-flex h-100 mx-{{ $expandBreakpoint }}-2 text-white"></div>
+  <hr class="d-{{ $expandBreakpoint }}-none my-2">
 </li>
 {{- end -}}
diff --git a/layouts/partials/header/theme.html b/layouts/partials/header/theme.html
@@ -1,13 +1,14 @@
 {{- if default true .Site.Params.topAppBar.colorToggle }}
-<li class="nav-item dropdown col-6 col-xxl-auto">
+{{- $expandBreakpoint := default "xxl" site.Params.topAppBar.expandBreakpoint }}
+<li class="nav-item dropdown col-6 col-{{ $expandBreakpoint }}-auto">
     {{- $modes := dict "light" (dict "icon" "sun") "dark" (dict "icon" "moon") "auto" (dict "icon" "adjust") }}
     {{- $mode := default "auto" $.Site.Params.color }}
     {{- if not (in (slice "light" "dark" "auto") $mode) }}
       {{- $mode = "auto" }}
     {{- end }}
-    <a class="nav-link px-0 py-2 px-xxl-1" href="#" id="modeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <a class="nav-link px-0 py-2 px-{{ $expandBreakpoint }}-1" href="#" id="modeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
         <i class="mode-icon fas fa-fw fa-{{ (index $modes $mode ).icon }}" id="modeIcon"></i>
-        <span class="d-xxl-none">{{ i18n "mode" }}</span>
+        <span class="d-{{ $expandBreakpoint }}-none">{{ i18n "mode" }}</span>
     </a>
     <ul class="mode-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby="modeDropdown">
         {{- range slice "light" "dark" "auto" }}