1 files changed, 53 insertions, 0 deletions
diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html
new file mode 100644
index 00000000..3aef1509
--- /dev/null
+++ b/layouts/_partials/components/toggle-button.html
@@ -0,0 +1,53 @@
+{{/* 
+  Reusable Toggle Button Component
+  
+  Parameters:
+  - id: (string) Unique identifier for the button group (e.g. "comments"). 
+        Used to generate IDs: {id}-toggle, {id}-section, {id}-count.
+  - title: (string) Tooltip title.
+  - icon: (string) Path to the icon image.
+  - countId: (string, optional) Override for count element ID. Defaults to "{id}-count".
+  - sectionId: (string, optional) Override for section element ID. Defaults to "{id}-section".
+  - buttonId: (string, optional) Override for button element ID. Defaults to "{id}-toggle".
+*/}}
+{{ $id := .id }}
+{{ $buttonId := default (printf "%s-toggle" $id) .buttonId }}
+{{ $sectionId := default (printf "%s-section" $id) .sectionId }}
+{{ $countId := default (printf "%s-count" $id) .countId }}
+
+<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
+    id="{{ $buttonId }}" title="{{ .title }}" data-tooltip>
+  <img src="{{ .icon }}" width="20" height="20"
+      alt="{{ .title }}"
+      class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+  <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70"
+      id="{{ $countId }}">...</span>
+</button>
+
+<script>
+  (function() {
+    document.addEventListener('DOMContentLoaded', () => {
+      const button = document.getElementById("{{ $buttonId }}");
+      const section = document.getElementById("{{ $sectionId }}");
+
+      if (!button || !section) return;
+
+      button.addEventListener('click', () => {
+        const isHidden = section.classList.contains('hidden');
+        const entranceAnimation = 'animate-slide-in-down';
+        const exitAnimation = 'animate-slide-out-up';
+
+        if (isHidden) {
+          section.classList.remove('hidden', exitAnimation);
+          section.classList.add(entranceAnimation);
+        } else {
+          section.classList.remove(entranceAnimation);
+          section.classList.add(exitAnimation);
+          setTimeout(() => {
+            section.classList.add('hidden');
+          }, 200);
+        }
+      });
+    });
+  })();
+</script>