Nagadder/field-force-tracker-pro

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);8                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);9                }10                11                .nav-link:hover {12                    background-color: rgba(255, 255, 255, 0.1);13                    transform: translateY(-2px);14                }15                16                .nav-link {17                    transition: all 0.3s ease;18                }19            </style>20            <nav class="text-white">21                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">22                    <div class="flex items-center justify-between h-16">23                        <div class="flex items-center">24                            <div class="flex-shrink-0">25                                <a href="#" class="flex items-center">26                                    <i data-feather="truck" class="h-6 w-6 mr-2"></i>27                                    <span class="text-xl font-bold">Field Force Tracker</span>28                                </a>29                            </div>30                            <div class="hidden md:block">31                                <div class="ml-10 flex items-baseline space-x-4">32                                    <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-white bg-opacity-10">Dashboard</a>33                                    <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-10">Employees</a>34                                    <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-10">Vehicles</a>35                                    <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-10">Reports</a>36                                </div>37                            </div>38                        </div>39                        <div class="hidden md:block">40                            <div class="ml-4 flex items-center md:ml-6">41                                <button class="p-1 rounded-full text-gray-200 hover:text-white focus:outline-none">42                                    <i data-feather="bell"></i>43                                </button>44                                <div class="ml-3 relative">45                                    <div>46                                        <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu">47                                            <span class="sr-only">Open user menu</span>48                                            <div class="h-8 w-8 rounded-full bg-white flex items-center justify-center text-purple-600 font-bold">AD</div>49                                        </button>50                                    </div>51                                </div>52                            </div>53                        </div>54                        <div class="-mr-2 flex md:hidden">55                            <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">56                                <i data-feather="menu"></i>57                            </button>58                        </div>59                    </div>60                </div>61            </nav>62        `;63    }64}65 66customElements.define('custom-navbar', CustomNavbar);