Spaces:
Running
Running
File size: 8,620 Bytes
97f71e2 7881a97 97f71e2 7881a97 c8d027c 97f71e2 c8d027c 97f71e2 c8d027c 97f71e2 c8d027c 97f71e2 c8d027c 97f71e2 c8d027c 97f71e2 c8d027c 36f931e 7881a97 36f931e c8d027c 8a1f5d0 97f71e2 c8d027c 97f71e2 | 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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.navbar {
transition: all 0.3s ease;
}
.navbar-scrolled {
background-color: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.navbar {
background-color: transparent;
backdrop-filter: none;
}
.nav-link {
position: relative;
overflow: hidden;
}
.nav-link span:last-child {
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.nav-link:hover span:last-child {
transform: scaleX(1);
}
.nav-link.active {
color: white;
}
.nav-link.active span:last-child {
transform: scaleX(1);
}
.mobile-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.75rem;
margin-top: 0.75rem;
}
.mobile-menu.open {
max-height: 400px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}
.dropdown-menu {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
<nav class="navbar fixed w-full z-50 px-6 py-4 transition-colors duration-300">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<a href="/" class="text-xl font-bold text-white bg-clip-text text-transparent bg-gradient-to-r from-primary-100 to-secondary-500">Complex Devs</a>
<div class="hidden md:flex items-center space-x-6">
<a href="/" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
<span class="relative z-10">Home</span>
<span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
</a>
<a href="#services" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
<span class="relative z-10">Services</span>
<span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
</a>
<a href="#process" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
<span class="relative z-10">Process</span>
<span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
</a>
<a href="#about" class="nav-link relative text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-300">
<span class="relative z-10">About</span>
<span class="absolute inset-x-1 bottom-0 h-0.5 bg-gradient-to-r from-primary-500 to-secondary-500 scale-x-0 origin-left transition-transform duration-300 nav-link:hover:scale-x-100"></span>
</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
<div id="mobile-menu" class="mobile-menu md:hidden bg-gray-900 rounded-lg mt-2 shadow-xl">
<div class="px-4 py-2 space-y-2">
<a href="/" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
<div class="flex items-center space-x-3">
<i data-feather="home" class="w-5 h-5"></i>
<span>Home</span>
</div>
</a>
<a href="#services" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
<div class="flex items-center space-x-3">
<i data-feather="layers" class="w-5 h-5"></i>
<span>Services</span>
</div>
</a>
<a href="#process" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
<div class="flex items-center space-x-3">
<i data-feather="settings" class="w-5 h-5"></i>
<span>Process</span>
</div>
</a>
<a href="#about" class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition-all duration-300">
<div class="flex items-center space-x-3">
<i data-feather="user" class="w-5 h-5"></i>
<span>About</span>
</div>
</a>
</div>
</div>
</div>
</nav>
<script>
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
menuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('open');
const icon = menuButton.querySelector('i');
if (mobileMenu.classList.contains('open')) {
feather.replace();
icon.setAttribute('data-feather', 'x');
} else {
feather.replace();
icon.setAttribute('data-feather', 'menu');
}
feather.replace();
});
// Navbar scroll effect
const navbar = this.shadowRoot.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
// Close mobile menu when clicking a link
const navLinks = this.shadowRoot.querySelectorAll('#mobile-menu a');
navLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('open');
const icon = menuButton.querySelector('i');
icon.setAttribute('data-feather', 'menu');
feather.replace();
});
});
});
</script>
`;
}
}
customElements.define('custom-navbar', CustomNavbar); |