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

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .navbar {7                    backdrop-filter: blur(8px);8                    background-color: rgba(255, 255, 255, 0.8);9                }10                .dark .navbar {11                    background-color: rgba(17, 24, 39, 0.8);12                }13            </style>14            <nav class="navbar border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50">15                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">16                    <div class="flex items-center justify-between h-16">17                        <div class="flex items-center">18                            <a href="/" class="flex items-center">19                                <i data-feather="activity" class="text-blue-600 dark:text-blue-400"></i>20                                <span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">FlowScript</span>21                            </a>22                        </div>23                        24                        <div class="hidden md:block">25                            <div class="ml-10 flex items-center space-x-4">26                                <a href="/docs" class="text-blue-600 dark:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Docs</a>27                                <a href="/examples" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Examples</a>28                                <a href="/api" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">API</a>29                                <a href="https://github.com/flowscript" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">GitHub</a>30                                31                                <div class="relative ml-4">32                                    <div class="relative">33                                        <input id="search-input" type="text" placeholder="Search docs..." class="bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md py-1 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-64">34                                    </div>35                                    <div id="search-results" class="absolute mt-2 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-md border border-gray-200 dark:border-gray-700 z-50 hidden"></div>36                                </div>37                                38                                <button onclick="toggleDarkMode()" class="p-2 rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">39                                    <i data-feather="moon" class="dark:hidden"></i>40                                    <i data-feather="sun" class="hidden dark:block"></i>41                                </button>42                            </div>43                        </div>44                        45                        <div class="md:hidden">46                            <button class="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">47                                <i data-feather="menu"></i>48                            </button>49                        </div>50                    </div>51                </div>52            </nav>53        `;54    }55}56customElements.define('custom-navbar', CustomNavbar);