Simba158/imageflow-optimizer

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .nav-link {7                    position: relative;8                    transition: color 0.3s ease;9                }10                11                .nav-link:hover {12                    color: #3B82F6;13                }14                15                .nav-link::after {16                    content: '';17                    position: absolute;18                    width: 0;19                    height: 2px;20                    bottom: -2px;21                    left: 0;22                    background-color: #3B82F6;23                    transition: width 0.3s ease;24                }25                26                .nav-link:hover::after {27                    width: 100%;28                }29                30                @media (max-width: 768px) {31                    .mobile-menu {32                        transform: translateX(100%);33                        transition: transform 0.3s ease;34                    }35                    36                    .mobile-menu.open {37                        transform: translateX(0);38                    }39                }40            </style>41            <nav class="bg-white shadow-sm">42                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">43                    <div class="flex justify-between h-16">44                        <div class="flex items-center">45                            <a href="#" class="flex items-center">46                                <i data-feather="image" class="text-primary-600 w-6 h-6"></i>47                                <span class="ml-2 text-xl font-bold text-gray-900">ImageFlow</span>48                            </a>49                        </div>50                        51                        <div class="hidden md:flex items-center space-x-8">52                            <a href="#why-important" class="text-gray-600 hover:text-primary-600 nav-link">Преимущества</a>53                            <a href="#tools" class="text-gray-600 hover:text-primary-600 nav-link">Инструменты</a>54                            <a href="#formats" class="text-gray-600 hover:text-primary-600 nav-link">Форматы</a>55                            <a href="#retina" class="text-gray-600 hover:text-primary-600 nav-link">Retina</a>56                            <a href="#animation" class="text-gray-600 hover:text-primary-600 nav-link">Анимации</a>57                        </div>58                        59                        <div class="flex items-center md:hidden">60                            <button id="menu-toggle" class="text-gray-600 hover:text-primary-600 focus:outline-none">61                                <i data-feather="menu" class="w-6 h-6"></i>62                            </button>63                        </div>64                    </div>65                </div>66                67                <!-- Mobile menu -->68                <div class="md:hidden mobile-menu fixed inset-y-0 right-0 w-64 bg-white shadow-lg z-50 py-4 px-6 overflow-y-auto">69                    <div class="flex justify-end mb-6">70                        <button id="menu-close" class="text-gray-600 hover:text-primary-600 focus:outline-none">71                            <i data-feather="x" class="w-6 h-6"></i>72                        </button>73                    </div>74                    75                    <div class="flex flex-col space-y-6">76                        <a href="#why-important" class="text-gray-600 hover:text-primary-600 nav-link">Преимущества</a>77                        <a href="#tools" class="text-gray-600 hover:text-primary-600 nav-link">Инструменты</a>78                        <a href="#formats" class="text-gray-600 hover:text-primary-600 nav-link">Форматы</a>79                        <a href="#retina" class="text-gray-600 hover:text-primary-600 nav-link">Retina</a>80                        <a href="#animation" class="text-gray-600 hover:text-primary-600 nav-link">Анимации</a>81                    </div>82                </div>83            </nav>84            85            <script>86                document.addEventListener('DOMContentLoaded', function() {87                    const menuToggle = this.shadowRoot.getElementById('menu-toggle');88                    const menuClose = this.shadowRoot.getElementById('menu-close');89                    const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');90                    91                    menuToggle.addEventListener('click', function() {92                        mobileMenu.classList.add('open');93                    });94                    95                    menuClose.addEventListener('click', function() {96                        mobileMenu.classList.remove('open');97                    });98                    99                    // Close menu when clicking on link100                    const navLinks = this.shadowRoot.querySelectorAll('.mobile-menu a');101                    navLinks.forEach(link => {102                        link.addEventListener('click', function() {103                            mobileMenu.classList.remove('open');104                        });105                    });106                });107            </script>108        `;109    }110}111 112customElements.define('custom-navbar', CustomNavbar);