class SiteHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
// Initial State
let currentLang = 'en';
let currentTheme = 'light';
// Listen for global state changes
window.addEventListener('langChanged', (e) => {
currentLang = e.detail;
this.render();
});
window.addEventListener('themeChanged', (e) => {
currentTheme = e.detail;
this.render();
});
// Load initial state from localStorage if possible (fallback)
if(typeof localStorage !== 'undefined') {
currentLang = localStorage.getItem('lang') || 'en';
currentTheme = localStorage.getItem('theme') || 'light';
}
this.render();
}
render() {
const isArabic = this.getAttribute('lang') === 'ar' || currentLang === 'ar';
const isDark = currentTheme === 'dark';
// Text Content
const homeTxt = isArabic ? 'الرئيسية' : 'Home';
const servicesTxt = isArabic ? 'خدماتي' : 'Services';
const portfolioTxt = isArabic ? 'أعمالي' : 'Portfolio';
const reviewsTxt = isArabic ? 'تقييماتي' : 'Reviews';
const contactTxt = isArabic ? 'تواصل معي' : 'Contact';
// Theme Icon
const themeIcon = isDark ? 'sun' : 'moon';
// Lang Text
const langTxt = isArabic ? 'English' : 'العربية';
this.shadowRoot.innerHTML = `
`;
// Add Event Listeners
this.shadowRoot.getElementById('lang-toggle').addEventListener('click', () => {
window.toggleLanguage();
});
this.shadowRoot.getElementById('theme-toggle').addEventListener('click', () => {
window.toggleTheme();
});
}
getIconSvg(name) {
const icons = {
sun: '',
moon: ''
};
return icons[name] || '';
}
}
customElements.define('site-header', SiteHeader);