feat: add a11y panel

layouts/partials/header/basic.html

@@ -35,16 +35,7 @@
 
     {{ partial "translations.html" . }}
     {{ if .Site.Params.enableA11y | default false }}
-      <button
-        id="a11y-toggle"
-        aria-label="Toggle accessibility background animation"
-        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        onclick="toggleA11yMode()"
-        role="button"
-        aria-pressed="false">
-        {{ partial "icon.html" "a11y" }}
-      </button>
+      {{ template "HeaderA11y" . }}
     {{ end }}
 
     {{ if .Site.Params.enableSearch | default false }}
@@ -82,18 +73,8 @@
     <span></span>
 
     {{ partial "translations.html" . }}
-
     {{ if .Site.Params.enableA11y | default false }}
-      <button
-        id="a11y-toggle"
-        aria-label="Toggle accessibility background animation"
-        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        onclick="toggleA11yMode()"
-        role="button"
-        aria-pressed="false">
-        {{ partial "icon.html" "a11y" }}
-      </button>
+      {{ template "HeaderA11y" . }}
     {{ end }}
 
     {{ if .Site.Params.enableSearch | default false }}
@@ -178,6 +159,79 @@
   </div>
 {{ end }}
 
+{{ define "HeaderA11y" }}
+  <div class="flex items-center">
+    <button
+      id="a11y-toggle"
+      aria-label="Open accessibility panel"
+      aria-expanded="false"
+      type="button"
+      class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+      onclick="toggleA11yPanel()"
+      role="button"
+      aria-pressed="false">
+      {{ partial "icon.html" "a11y" }}
+    </button>
+
+    <div id="a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
+
+    <div
+      id="a11y-panel"
+      role="dialog"
+      aria-labelledby="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="a11y-panel-title" class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+          Accessibility settings
+        </h3>
+        <button
+          onclick="toggleA11yPanel()"
+          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
+          (dict "id" "disable-blur" "label" "Disable background blur")
+          (dict "id" "disable-images" "label" "Disable background image")
+          (dict "id" "underline-links" "label" "Show link underline")
+        }}
+
+        {{ 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="font-size-select" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Font size
+          </label>
+          <select
+            id="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 "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 justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 pt-[2px] pr-0 pb-[3px] pl-0">
@@ -198,7 +252,9 @@
 
 {{ if .Site.Menus.subnavigation }}
   <div
-    class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3{{ if .Site.Params.Logo }} -mt-[15px]{{ end }}">
+    class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 {{ if .Site.Params.Logo }}
+      -mt-[15px]
+    {{ end }}">
     <div class="hidden md:flex items-center space-x-5">
       {{ range .Site.Menus.subnavigation }}
         <a