zainmax/bytebard-tech-tales-tips
0
1class CustomHeader extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 :host {7 display: block;8 position: sticky;9 top: 0;10 z-index: 50;11 background-color: rgba(255, 255, 255, 0.8);12 backdrop-filter: blur(5px);13 }14 .dark :host {15 background-color: rgba(17, 24, 39, 0.8);16 }17 nav {18 max-width: 1280px;19 margin: 0 auto;20 padding: 1rem 2rem;21 display: flex;22 align-items: center;23 justify-content: space-between;24 }25 .logo {26 font-size: 1.5rem;27 font-weight: 700;28 color: var(--primary-600);29 text-decoration: none;30 }31 .dark .logo {32 color: var(--primary-400);33 }34 .nav-links {35 display: flex;36 gap: 2rem;37 }38 .nav-link {39 font-weight: 500;40 color: var(--gray-700);41 text-decoration: none;42 transition: color 0.2s;43 }44 .dark .nav-link {45 color: var(--gray-300);46 }47 .nav-link:hover {48 color: var(--primary-600);49 }50 .dark .nav-link:hover {51 color: var(--primary-400);52 }53 .theme-toggle {54 display: flex;55 align-items: center;56 justify-content: center;57 width: 2.5rem;58 height: 2.5rem;59 border-radius: 50%;60 background-color: var(--gray-100);61 cursor: pointer;62 transition: all 0.2s;63 }64 .dark .theme-toggle {65 background-color: var(--gray-700);66 }67 .theme-toggle:hover {68 background-color: var(--gray-200);69 }70 .dark .theme-toggle:hover {71 background-color: var(--gray-600);72 }73 .mobile-menu-button {74 display: none;75 }76 @media (max-width: 768px) {77 .nav-links {78 display: none;79 }80 .mobile-menu-button {81 display: block;82 }83 #mobile-menu {84 position: absolute;85 top: 100%;86 left: 0;87 right: 0;88 background-color: var(--white);89 padding: 1rem;90 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);91 }92 .dark #mobile-menu {93 background-color: var(--gray-800);94 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);95 }96 .mobile-nav-link {97 display: block;98 padding: 0.5rem 1rem;99 color: var(--gray-700);100 text-decoration: none;101 }102 .dark .mobile-nav-link {103 color: var(--gray-300);104 }105 .mobile-nav-link:hover {106 color: var(--primary-600);107 }108 .dark .mobile-nav-link:hover {109 color: var(--primary-400);110 }111 }112 </style>113 <nav>114 <a href="/" class="logo">ByteBard</a>115 <div class="nav-links">116 <a href="/" class="nav-link">Home</a>117 <a href="/articles.html" class="nav-link">Articles</a>118 <a href="/create.html" class="nav-link">Create</a>119 <a href="/about.html" class="nav-link">About</a>120 </div>121<div class="flex items-center gap-4">122 <button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()">123 <i data-feather="sun" class="hidden dark:block w-5 h-5"></i>124 <i data-feather="moon" class="dark:hidden w-5 h-5"></i>125 </button>126 127 <button class="mobile-menu-button p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700" onclick="toggleMobileMenu()">128 <i data-feather="menu" class="w-5 h-5"></i>129 </button>130 </div>131 </nav>132 133 <div id="mobile-menu" class="hidden">134 <a href="#" class="mobile-nav-link">Articles</a>135 <a href="#" class="mobile-nav-link">Categories</a>136 <a href="#" class="mobile-nav-link">About</a>137 <a href="#" class="mobile-nav-link">Contact</a>138 </div>139 `;140 141 // Initialize feather icons in shadow DOM142 setTimeout(() => {143 const icons = this.shadowRoot.querySelectorAll('[data-feather]');144 if (feather) {145 feather.replace({ nodes: icons });146 }147 }, 100);148 }149}150 151customElements.define('custom-header', CustomHeader);