File size: 4,053 Bytes
509f3c2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
width: 100%;
position: sticky;
top: 0;
z-index: 50;
}
.nav-container {
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(55, 65, 81, 0.3);
}
.nav-link {
position: relative;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #22c55e;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background: linear-gradient(90deg, #22c55e, #d946ef);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
@media (max-width: 768px) {
.mobile-menu {
animation: slideDown 0.3s ease-out;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<nav class="nav-container">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<!-- Logo -->
<a href="/" class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
<i data-feather="cpu" class="w-5 h-5 text-gray-900"></i>
</div>
<span class="text-xl font-bold">PySQL Labs</span>
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<a href="#features" class="nav-link">Features</a>
<a href="#how-it-works" class="nav-link">How It Works</a>
<a href="#challenges" class="nav-link">Challenges</a>
<a href="#dashboard" class="nav-link">Dashboard</a>
<a href="#login" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
Log In
</a>
<a href="#signup" class="px-4 py-2 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg transition-all">
Sign Up Free
</a>
<button id="dark-mode-toggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700">
<i data-feather="sun" class="w-5 h-5"></i>
</button>
</div>
<!-- Mobile Menu Button -->
<button data-menu-toggle class="md:hidden p-2 rounded-lg bg-gray-800 hover:bg-gray-700">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
<div class="flex flex-col space-y-4">
<a href="#features" class="nav-link py-2">Features</a>
<a href="#how-it-works" class="nav-link py-2">How It Works</a>
<a href="#challenges" class="nav-link py-2">Challenges</a>
<a href="#dashboard" class="nav-link py-2">Dashboard</a>
<div class="pt-4 border-t border-gray-700">
<a href="#login" class="block py-2">Log In</a>
<a href="#signup" class="block px-4 py-2 bg-gradient-to-r from-primary to-primary/80 text-gray-900 font-semibold rounded-lg">
Sign Up Free
</a>
</div>
</div>
</div>
</nav>
`;
// Initialize Feather Icons in shadow DOM
setTimeout(() => {
if (typeof feather !== 'undefined') {
feather.replace();
}
}, 100);
}
}
customElements.define('custom-navbar', CustomNavbar); |