// Header.jsx — Oblak i Sunce UI Kit // Announcement bar + sticky nav + mega menu. // Sve stavke su PRAVI linkovi: kategorije/potkategorije -> category.html, brendovi -> brand-detail.html, // ikonice -> search/wishlist/account/cart stranice. Struktura kategorija prati bekend (seed.ts CATEGORY_RULES). const T = window.OBS_TOKENS; // Header se koristi i sa root stranice (index.html) i iz pages/ — prefiks izjednačava putanje. // Apsolutne putanje — rade i na starim (/pages/x.html) i na čistim (/proizvod/…) URL-ovima. const navUrl = (page) => '/pages/' + page; // Čisti (SEO) URL-ovi za nav: const catUrl = (...slugs) => '/' + slugs.filter(Boolean).join('/'); const brandUrl = (slug) => '/brend/' + slug; // Boje mega-menija (cikliraju po glavnim kategorijama) const CAT_COLORS = [ { color: "#F5DDD1", hover: "#D4918A" }, { color: "#E3EDE0", hover: "#7BA87B" }, { color: "#E8D5BA", hover: "#C27B6B" }, { color: "#F0E3F0", hover: "#D4918A" }, { color: "#D6EAF4", hover: "#6BA3C7" }, { color: "#F0E6C8", hover: "#D4A843" }, { color: "#E7E0F0", hover: "#9B8BC7" }, { color: "#DCEEE8", hover: "#5FA890" }, ]; // Redoslijed glavnih kategorija u traci (ostalo se ne prikazuje u glavnom meniju — dostupno preko „Sve"). const NAV_ORDER = ["odjeca","obuca","igracke-i-edukacija","oprema-za-bebe","ishrana","aksesoari","kucni-tekstil-i-dekor","ljeto-i-plaza","sport-i-napolju","njega-i-higijena"]; const navLabel = (name) => name.split(' i ')[0].trim(); function Header({ cartCount = 0, onCartOpen }) { const [megaMenuOpen, setMegaMenuOpen] = React.useState(null); const [scrolled, setScrolled] = React.useState(false); const [announcementVisible, setAnnouncementVisible] = React.useState(true); const [hoveredSubcat, setHoveredSubcat] = React.useState(null); const [hoveredBrand, setHoveredBrand] = React.useState(null); // Prava lista želja — broj se osvježava na svaku promjenu const [wishVersion, setWishVersion] = React.useState(0); React.useEffect(() => { const bump = () => setWishVersion(v => v + 1); window.addEventListener('obs-wishlist-changed', bump); return () => window.removeEventListener('obs-wishlist-changed', bump); }, []); const wishCount = window.OBS_WISHLIST ? window.OBS_WISHLIST.count() : 0; // Meni iz stvarnog kataloga (glavne kategorije + potkategorije + top brendovi). const [allCats, setAllCats] = React.useState([]); const [brandsTop, setBrandsTop] = React.useState([]); React.useEffect(() => { if (!window.OBS_API) return; window.OBS_API.getCategories().then(setAllCats).catch(() => {}); window.OBS_API.getBrands().then(bs => setBrandsTop([...bs].sort((a, b) => (b._count?.products || 0) - (a._count?.products || 0)).slice(0, 8))).catch(() => {}); }, []); const topCats = allCats.filter(c => !c.parentId && c.slug !== 'ostalo') .sort((a, b) => { const ia = NAV_ORDER.indexOf(a.slug), ib = NAV_ORDER.indexOf(b.slug); return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib); }) .slice(0, 8) .map((c) => { const st = (window.OBS_CAT_STYLE ? window.OBS_CAT_STYLE(c.name) : { tint: '#F3EDE3', accent: T.terracotta }); return { ...c, color: st.tint, hover: st.accent, children: allCats.filter(ch => ch.parentId === c.id) }; }); // Announcement traka iz CMS-a (admin: Sadržaj -> Početna strana) — fallback dok se ne učita const [announcementItems, setAnnouncementItems] = React.useState([ "☁ Besplatna dostava za narudžbe preko 50€", "☀ Premium brendovi za bebe i djecu", "📍 City Kvart, Podgorica", ]); React.useEffect(() => { if (window.OBS_API && window.OBS_API.getContent) { window.OBS_API.getContent().then(c => { if (c.announcement?.items?.length) setAnnouncementItems(c.announcement.items); }); } }, []); // Na mobilnom se announcement stavke rotiraju (jedna po jedna, ne stanu sve u red) const [annIdx, setAnnIdx] = React.useState(0); React.useEffect(() => { if (announcementItems.length < 2) return; const id = setInterval(() => setAnnIdx(i => (i + 1) % announcementItems.length), 3500); return () => clearInterval(id); }, [announcementItems.length]); React.useEffect(() => { const el = document.getElementById('obs-scroll-container') || window; const onScroll = () => setScrolled((el.scrollTop || window.scrollY) > 60); el.addEventListener('scroll', onScroll); return () => el.removeEventListener('scroll', onScroll); }, []); const goCart = onCartOpen || (() => { window.location.href = navUrl('cart.html'); }); // --- Mobilni: hamburger + drawer (višenivo) + donja traka --- const isMobile = window.OBS_useIsMobile ? window.OBS_useIsMobile(900) : false; // Cookie saglasnost — prikazuje se dok kupac ne prihvati (čuva se u localStorage). const [cookieOk, setCookieOk] = React.useState(() => { try { return !!localStorage.getItem('obs_cookie_consent'); } catch { return true; } }); const acceptCookies = () => { try { localStorage.setItem('obs_cookie_consent', '1'); } catch {} setCookieOk(true); }; const [drawerOpen, setDrawerOpen] = React.useState(false); const [navStack, setNavStack] = React.useState([]); // stek kategorija za "next next" navigaciju const [mSearch, setMSearch] = React.useState(''); // Djeca trenutnog nivoa: prazan stek = glavne kategorije, inače djeca posljednjeg u steku. const drawerParent = navStack[navStack.length - 1] || null; const drawerItems = drawerParent ? allCats.filter(ch => ch.parentId === drawerParent.id).map(c => ({ ...c, children: allCats.filter(x => x.parentId === c.id) })) : topCats; React.useEffect(() => { if (!drawerOpen) { setNavStack([]); setMSearch(''); } }, [drawerOpen]); // Zaključaj skrol pozadine dok je drawer otvoren React.useEffect(() => { document.body.style.overflow = drawerOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [drawerOpen]); // Prostor za donju traku da ne prekriva sadržaj React.useEffect(() => { const sc = document.getElementById('obs-scroll-container'); const pad = isMobile ? '68px' : ''; document.body.style.paddingBottom = pad; if (sc) sc.style.paddingBottom = pad; return () => { document.body.style.paddingBottom = ''; if (sc) sc.style.paddingBottom = ''; }; }, [isMobile]); const submitMSearch = (e) => { e.preventDefault(); const q = mSearch.trim(); if (q) window.location.href = navUrl('search.html?q=' + encodeURIComponent(q)); }; return (
setMegaMenuOpen(null)} style={{ position: 'sticky', top: 0, zIndex: 150 }}> {/* Announcement — sakriva se na skrol nadole i na ✕ (glatka max-height animacija) */}
{isMobile ? ( {announcementItems[annIdx % announcementItems.length]} ) : announcementItems.map((item, i) => ( {i > 0 && |} {item} ))}
{/* Main Nav — bijela podloga sa suptilnim oblak+sunce motivom */}
{/* Motiv: topli sjaj izlaska sunca + tanke zrake + nježan oblak (jedva vidljiv, brend identitet) */} {/* Utility bar — sakriva se na skrol nadole i uvijek na mobilnom (ide u drawer) */}
{window.OBS_ICON('phone', { size: 13 })} +382 67 230 537 {window.OBS_ICON('mail', { size: 13 })} info@oblakisunce.me
Kontakt · O nama · Blog
{isMobile ? (<> {/* Mobilni: hamburger — logo (centar) — korpa */} Oblak i Sunce ) : (<> {/* Logo */} Oblak i Sunce {/* Nav Items */} {/* Actions */}
{window.OBS_ICON('search', { size: 19 })} {window.OBS_ICON('heart', { size: 19 })} {wishCount > 0 && {wishCount}} {window.OBS_ICON('user', { size: 19 })}
)}
{/* Tanka gradijent linija na dnu — brend akcent (terakota → nebo) */}
{/* Mega Menu — samo desktop (na mobilnom je drawer) */} {!isMobile && megaMenuOpen !== null && topCats[megaMenuOpen] && (() => { const active = topCats[megaMenuOpen]; return (

{active.name}

Naši brendovi

{active.name}

Pogledajte kompletnu ponudu iz ove kategorije.

Pogledaj →
); })()} {/* ===== MOBILNI DRAWER (hamburger meni, višenivo „next next") ===== */} {isMobile && (
{/* zatamnjenje */}
setDrawerOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(45,41,38,0.5)', opacity: drawerOpen ? 1 : 0, transition: 'opacity 0.3s ease' }} /> {/* panel */}
{/* zaglavlje drawera */}
{navStack.length > 0 ? ( ) : ( Oblak i Sunce )}
{/* pretraga (samo na root nivou) */} {navStack.length === 0 && (
{window.OBS_ICON('search', { size: 16 })} setMSearch(e.target.value)} placeholder="Pretraži proizvode…" style={{ flex: 1, border: 'none', background: 'none', outline: 'none', fontSize: 14, fontFamily: "'Outfit', sans-serif", color: T.textDark }} />
)} {/* naslov trenutnog nivoa */} {navStack.length > 0 && ( {drawerParent.name} Prikaži sve → )} {/* lista stavki */}
{drawerItems.map((item) => { const hasKids = item.children && item.children.length > 0; const topName = navStack.length ? navStack[0].name : item.name; const st = window.OBS_CAT_STYLE ? window.OBS_CAT_STYLE(topName) : { accent: T.terracotta }; const commonStyle = { display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '15px 18px', borderBottom: '1px solid rgba(45,41,38,0.05)', background: 'none', border: 'none', borderBottomWidth: 1, borderBottomStyle: 'solid', borderBottomColor: 'rgba(45,41,38,0.05)', cursor: 'pointer', textAlign: 'left', textDecoration: 'none', fontFamily: "'Outfit', sans-serif", fontSize: 15, color: T.textDark }; const dot = ; return hasKids ? ( ) : ( {navStack.length === 0 && dot} {item.name} ); })} {/* dodatni linkovi — samo na root nivou */} {navStack.length === 0 && ( )}
)} {/* ===== MOBILNA DONJA TRAKA (sticky bottom nav) ===== */} {isMobile && (
{(() => { const Item = ({ href, onClick, icon, label, badge, primary }) => { const inner = (<>
{window.OBS_ICON(icon, { size: 23, stroke: primary ? 1.9 : 1.7 })} {badge > 0 && {badge}}
{label} ); const base = { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '9px 0 8px', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none' }; return onClick ? : {inner}; }; return (<> ); })()}
)} {/* ===== COOKIE SAGLASNOST ===== */} {!cookieOk && (
🍪 Koristimo kolačiće da bismo poboljšali vaše iskustvo kupovine. Nastavkom pregleda prihvatate njihovu upotrebu. Više u Politici kolačića.
Saznaj više
)}
); } Object.assign(window, { Header });