Agnik7/flowscript-docs-the-scripting-river-guide

1class CustomSidebar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .sidebar {7                    width: 280px;8                    height: calc(100vh - 64px);9                    top: 64px;10                }11                @media (max-width: 768px) {12                    .sidebar {13                        width: 100%;14                        height: auto;15                        position: static;16                    }17                }18            </style>19            <aside class="sidebar bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 sticky overflow-y-auto hidden md:block">20                <div class="p-4">21                    <ul class="space-y-2">22                        <li>23                            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Getting Started</h3>24                            <ul class="space-y-1">25                                <li><a href="/getting-started" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Introduction</a></li>26                                <li><a href="/installation" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Installation</a></li>27                                <li><a href="/configuration" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Configuration</a></li>28                            </ul>29                        </li>30                        <li>31                            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Core Concepts</h3>32                            <ul class="space-y-1">33                                <li><a href="/flows" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Flows</a></li>34                                <li><a href="/operators" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Operators</a></li>35                                <li><a href="/error-handling" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Error Handling</a></li>36                                <li><a href="/performance" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Performance</a></li>37                            </ul>38                        </li>39                        <li>40                            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">API Reference</h3>41                            <ul class="space-y-1">42                                <li><a href="/api/core" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Core API</a></li>43                                <li><a href="/api/operators" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Operators</a></li>44                                <li><a href="/api/plugins" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Plugins</a></li>45                            </ul>46                        </li>47                        <li>48                            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Guides</h3>49                            <ul class="space-y-1">50                                <li><a href="/guides/migration" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Migration Guide</a></li>51                                <li><a href="/guides/best-practices" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Best Practices</a></li>52                                <li><a href="/guides/debugging" class="block px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 rounded">Debugging</a></li>53                            </ul>54                        </li>55                    </ul>56                </div>57            </aside>58        `;59    }60}61customElements.define('custom-sidebar', CustomSidebar);