securenet579/using-php-lbbv6th

1class CustomSidebar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                .sidebar {7                    backdrop-filter: blur(8px);8                    -webkit-backdrop-filter: blur(8px);9                    transition: transform 0.3s ease;10                }11                12                .sidebar-link:hover {13                    background-color: rgba(255, 255, 255, 0.05);14                }15                16                .sidebar-link.active {17                    background-color: rgba(109, 40, 217, 0.2);18                    border-left: 3px solid #6D28D9;19                }20            </style>21            <aside class="sidebar fixed top-0 left-0 bottom-0 w-64 bg-gray-800/90 border-r border-gray-700 z-40 transform -translate-x-full md:translate-x-0">22                <div class="px-4 py-6">23                    <div class="px-4 py-4">24                        <h2 class="text-xl font-bold text-white">Navigation</h2>25                    </div>26                    27                    <nav class="mt-6">28                        <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-300 hover:text-white active">29                            <i data-feather="home" class="w-5 h-5 mr-3"></i>30                            <span>Dashboard</span>31                        </a>32                        33                        <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-300 hover:text-white">34                            <i data-feather="layout" class="w-5 h-5 mr-3"></i>35                            <span>Projects</span>36                        </a>37                        38                        <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-300 hover:text-white">39                            <i data-feather="database" class="w-5 h-5 mr-3"></i>40                            <span>Database</span>41                        </a>42                        43                        <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-300 hover:text-white">44                            <i data-feather="terminal" class="w-5 h-5 mr-3"></i>45                            <span>Console</span>46                        </a>47                        48                        <div class="px-4 py-3 mt-6">49                            <h3 class="text-xs uppercase text-gray-500 font-semibold">Tools</h3>50                        </div>51                        52                        <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-300 hover:text-white">53                            <i data-feather="settings" class="w-5 h-5 mr-3"></i>54                            <span>Settings</span>55                        </a>56                        57                        <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-300 hover:text-white">58                            <i data-feather="users" class="w-5 h-5 mr-3"></i>59                            <span>Users</span>60                        </a>61                    </nav>62                </div>63            </aside>64        `;65    }66}67customElements.define('custom-sidebar', CustomSidebar);