| 2 | import { t, getLang, setLang } from '../lib/i18n.js'; |
| 3 | |
| 4 | export function Header(navigate) { |
| 5 | const header = document.createElement('header'); |
| 6 | header.className = 'w-full flex flex-col z-50 sticky top-0'; |
| 7 | |
| 8 | |
| 9 | // 2. Main Navigation Bar |
| 10 | const navBar = document.createElement('div'); |
| 11 | navBar.className = 'w-full h-16 bg-black flex items-center justify-between px-4 md:px-6 border-b border-white/5 backdrop-blur-md bg-opacity-95'; |
| 12 | |
| 13 | const leftPart = document.createElement('div'); |
| 14 | leftPart.className = 'flex items-center gap-8'; |
| 15 | |
| 16 | // Logo |
| 17 | const logoContainer = document.createElement('div'); |
| 18 | logoContainer.className = 'cursor-pointer hover:scale-110 transition-transform'; |
| 19 | logoContainer.innerHTML = ` |
| 20 | <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center p-1.5 shadow-lg"> |
| 21 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 22 | <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="black"/> |
| 23 | <path d="M2 17L12 22L22 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 24 | <path d="M2 12L12 17L22 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| 25 | </svg> |
| 26 | </div> |
| 27 | `; |
| 28 | |
| 29 | const menu = document.createElement('nav'); |
| 30 | menu.className = 'hidden lg:flex items-center gap-6 text-[13px] font-bold text-secondary'; |
| 31 | const items = [ |
| 32 | { label: t('nav.image'), page: 'image' }, |
| 33 | { label: t('nav.video'), page: 'video' }, |
| 34 | { label: t('nav.lipsync'), page: 'lipsync' }, |
| 35 | { label: t('nav.cinema'), page: 'cinema' }, |
| 36 | { label: t('nav.workflows'), page: 'workflows' }, |
| 37 | { label: t('nav.agents'), page: 'agents' }, |
| 38 | { label: t('nav.mcpcli'), page: 'mcp-cli' }, |
| 39 | ]; |
| 40 | |
| 41 | items.forEach(({ label, page }, idx) => { |
| 42 | const link = document.createElement('a'); |
| 43 | link.textContent = label; |
| 44 | link.className = `hover:text-white transition-all cursor-pointer relative group ${idx === 0 ? 'text-white' : ''}`; |
| 45 | |
| 46 | if (idx === 0) { |
| 47 | const dot = document.createElement('div'); |
| 48 | dot.className = 'absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary rounded-full'; |
| 49 | link.appendChild(dot); |
| 50 | } |
| 51 | |
| 52 | link.onclick = () => { |
| 53 | Array.from(menu.children).forEach(child => child.classList.remove('text-white')); |
| 54 | link.classList.add('text-white'); |
| 55 | navigate(page); |
| 56 | }; |
| 57 | |
| 58 | menu.appendChild(link); |
| 59 | }); |
| 60 | |
| 61 | leftPart.appendChild(logoContainer); |