LinusAI/secureguard-austria

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .nav-link {7                    position: relative;8                }9                10                .nav-link::after {11                    content: '';12                    position: absolute;13                    bottom: -2px;14                    left: 0;15                    width: 0;16                    height: 2px;17                    background-color: #e3a300;18                    transition: width 0.3s ease;19                }20                21                .nav-link:hover::after, .nav-link:focus::after {22                    width: 100%;23                }24                25                .mobile-menu {26                    transition: all 0.3s ease;27                }28                29                @media (prefers-reduced-motion) {30                    .nav-link::after, .mobile-menu {31                        transition: none;32                    }33                }34            </style>35            <nav class="bg-white shadow-md sticky top-0 z-50">36                <div class="container mx-auto px-4">37                    <div class="flex justify-between items-center py-4">38                        <!-- Logo -->39                        <a href="index.html" class="flex items-center space-x-2" aria-label="SecureGuard Austria Startseite">40                            <div class="bg-primary p-2 rounded-lg">41                                <i data-feather="shield" class="w-6 h-6 text-white"></i>42                            </div>43                            <span class="text-xl font-bold text-dark">SecureGuard Austria</span>44                        </a>45                        46                        <!-- Desktop Navigation -->47                        <div class="hidden md:flex items-center space-x-8">48                            <a href="index.html" class="nav-link text-dark font-medium">Startseite</a>49                            <a href="ueber-uns.html" class="nav-link text-dark font-medium">Über uns</a>50                            <a href="dienstleistungen.html" class="nav-link text-dark font-medium">Dienstleistungen</a>51                            <a href="faq.html" class="nav-link text-dark font-medium">FAQ</a>52                            <a href="kontakt.html" class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">Kontakt</a>53                        </div>54                        55                        <!-- Mobile Menu Button -->56                        <button id="mobile-menu-button" class="md:hidden focus:outline-none" aria-label="Menü öffnen">57                            <i data-feather="menu" class="w-6 h-6 text-dark"></i>58                        </button>59                    </div>60                    61                    <!-- Mobile Menu -->62                    <div id="mobile-menu" class="hidden md:hidden pb-4">63                        <div class="flex flex-col space-y-4">64                            <a href="index.html" class="text-dark font-medium">Startseite</a>65                            <a href="ueber-uns.html" class="text-dark font-medium">Über uns</a>66                            <a href="dienstleistungen.html" class="text-dark font-medium">Dienstleistungen</a>67                            <a href="faq.html" class="text-dark font-medium">FAQ</a>68                            <a href="kontakt.html" class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 text-center">Kontakt</a>69                        </div>70                    </div>71                </div>72            </nav>73        `;74    }75}76 77customElements.define('custom-navbar', CustomNavbar);