Image genartiona dn temaplte design redesign

plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-table-of-contents.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * IGNY8 Table of Contents
+ * Displays clickable list of H2 headings with smooth scroll
+ *
+ * @package Igny8Bridge
+ */
+
+// Exit if accessed directly
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+// Generate TOC from content
+$toc_items = igny8_generate_table_of_contents($content);
+
+// Only show if we have at least 3 headings (configurable via settings)
+$min_headings = get_option('igny8_toc_min_headings', 3);
+
+if (count($toc_items) < $min_headings) {
+    return;
+}
+?>
+
+<nav class="igny8-table-of-contents">
+    <div class="igny8-toc-header">
+        <svg class="igny8-toc-icon" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/>
+        </svg>
+        <h3>Table of Contents</h3>
+    </div>
+    <ol class="igny8-toc-list">
+        <?php foreach ($toc_items as $item): ?>
+        <li class="igny8-toc-item">
+            <a href="#<?php echo esc_attr($item['id']); ?>" class="igny8-toc-link">
+                <span class="igny8-toc-number"><?php echo $item['number']; ?></span>
+                <span class="igny8-toc-text"><?php echo esc_html($item['text']); ?></span>
+            </a>
+        </li>
+        <?php endforeach; ?>
+    </ol>
+</nav>
+
+<script>
+// Smooth scroll for TOC links
+document.addEventListener('DOMContentLoaded', function() {
+    const tocLinks = document.querySelectorAll('.igny8-toc-link');
+    
+    tocLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href').substring(1);
+            const targetElement = document.getElementById(targetId);
+            
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+                
+                // Update URL without jumping
+                if (history.pushState) {
+                    history.pushState(null, null, '#' + targetId);
+                }
+            }
+        });
+    });
+});
+</script>