Spaces:
Running
Running
File size: 6,009 Bytes
5f1a598 | 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 | class CustomHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Assistant:wght@300;400;600;700&display=swap');
:host {
--deep-cocoa: #3E2723;
--milk-chocolate: #795548;
--creamy-white: #FDFBF7;
--luxury-gold: #C5A063;
}
.top-bar {
background-color: var(--deep-cocoa);
color: white;
padding: 8px 0;
text-align: center;
font-size: 14px;
}
.nav-link {
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--milk-chocolate);
}
.mobile-menu {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.mobile-menu.open {
transform: translateX(0);
}
</style>
<header>
<!-- Top Bar -->
<div class="top-bar">
<p>Save 15% use code: MELTERS15 | Free Shipping on orders over £30</p>
</div>
<!-- Main Navigation -->
<nav class="bg-white shadow-sm">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between py-4">
<!-- Mobile Menu Button -->
<button class="md:hidden text-deep-cocoa" id="mobile-menu-button">
<i data-feather="menu"></i>
</button>
<!-- Logo -->
<div class="flex-1 md:flex-none text-center">
<a href="/" class="font-dancing text-3xl text-deep-cocoa">Melters</a>
<div class="text-xs text-deep-cocoa uppercase tracking-wide">Chocolate</div>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex space-x-8">
<a href="#shop" class="nav-link text-deep-cocoa font-semibold">Shop</a>
<a href="#gifting" class="nav-link text-deep-cocoa font-semibold">Corporate Gifting</a>
<a href="#wholesale" class="nav-link text-deep-cocoa font-semibold">Wholesale</a>
<a href="#about" class="nav-link text-deep-cocoa font-semibold">About</a>
<a href="#contact" class="nav-link text-deep-cocoa font-semibold">Contact</a>
</div>
<!-- Icons -->
<div class="flex items-center space-x-4">
<a href="#search" class="text-deep-cocoa">
<i data-feather="search"></i>
</a>
<a href="#account" class="text-deep-cocoa">
<i data-feather="user"></i>
</a>
<a href="#cart" class="text-deep-cocoa relative">
<i data-feather="shopping-bag"></i>
<span class="absolute -top-2 -right-2 bg-luxury-gold text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
</a>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="mobile-menu fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-50">
<div class="p-4 border-b">
<button class="text-deep-cocoa" id="close-mobile-menu">
<i data-feather="x"></i>
</button>
</div>
<div class="p-4 space-y-4">
<a href="#shop" class="block text-deep-cocoa font-semibold">Shop</a>
<a href="#gifting" class="block text-deep-cocoa font-semibold">Corporate Gifting</a>
<a href="#wholesale" class="block text-deep-cocoa font-semibold">Wholesale</a>
<a href="#about" class="block text-deep-cocoa font-semibold">About</a>
<a href="#contact" class="block text-deep-cocoa font-semibold">Contact</a>
</div>
</div>
</nav>
</header>
`;
// Add mobile menu functionality
const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
const closeMobileMenu = this.shadowRoot.getElementById('close-mobile-menu');
const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.add('open');
});
closeMobileMenu.addEventListener('click', () => {
mobileMenu.classList.remove('open');
});
// Initialize feather icons
if (typeof feather !== 'undefined') {
feather.replace();
}
}
}
customElements.define('custom-header', CustomHeader); |