226 lines
10 KiB
HTML
226 lines
10 KiB
HTML
<header class="site-header">
|
|
<div class="top-bar text-sm">
|
|
<div class="container top-bar-inner">
|
|
<div class="top-bar-left">{{{customContentHeader}}}</div>
|
|
<nav class="top-bar-right">
|
|
{{#each menu.top}}
|
|
<a href="{{this.href}}">{{this.text}}</a>
|
|
{{/each}}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="main-header">
|
|
|
|
<a href="/" class="logo">
|
|
{{#if logo.src}}
|
|
<img src="{{logo.src}}" alt="{{logo.alt}}" class="logo-img" />
|
|
{{else}}
|
|
<div class="logo-icon text-lg font-bold">C</div>
|
|
<span class="logo-text text-xl font-bold tracking-tight">colors</span>
|
|
{{/if}}
|
|
</a>
|
|
|
|
<nav class="desktop-nav">
|
|
{{#each menu.main}}
|
|
<div class="nav-item text-sm font-medium uppercase tracking-wide">
|
|
<a href="{{this.href}}" class="nav-link">
|
|
{{this.text}}
|
|
{{#if this.sublinks}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="nav-icon">
|
|
<path d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
{{/if}}
|
|
</a>
|
|
|
|
{{#if this.sublinks}}
|
|
<div class="dropdown">
|
|
<div class="dropdown-inner">
|
|
{{#each this.sublinks}}
|
|
<div class="dropdown-item">
|
|
<a href="{{this.href}}" class="dropdown-link text-sm">
|
|
{{this.text}}
|
|
{{#if this.sublinks}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 1rem; height: 1rem">
|
|
<path d="m9 18 6-6-6-6" />
|
|
</svg>
|
|
{{/if}}
|
|
</a>
|
|
|
|
{{#if this.sublinks}}
|
|
<div class="sub-dropdown">
|
|
<div class="dropdown-inner">
|
|
{{#each this.sublinks}}
|
|
<a href="{{this.href}}" class="dropdown-link text-sm">
|
|
{{this.text}}
|
|
</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/each}}
|
|
</nav>
|
|
|
|
<div class="actions">
|
|
<button id="search-toggle" class="action-btn" aria-label="Vyhledávání">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
|
</button>
|
|
|
|
<div class="nav-item action-dropdown-wrapper desktop-user">
|
|
<a href="/prihlaseni" class="action-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
|
|
</a>
|
|
{{#if userMenu}}
|
|
<div class="dropdown action-dropdown user-dropdown">
|
|
<div class="dropdown-inner">
|
|
{{#each userMenu}}
|
|
<a href="{{this.href}}" class="dropdown-link text-sm font-medium">{{this.text}}</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div class="nav-item action-dropdown-wrapper cart-wrapper">
|
|
<a href="{{basket.link}}" class="action-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1" /><circle cx="19" cy="21" r="1" /><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" /></svg>
|
|
<span class="cart-badge text-xs font-bold">{{basket.itemCount}}</span>
|
|
</a>
|
|
|
|
<div class="dropdown action-dropdown cart-dropdown">
|
|
<div class="dropdown-inner basket-inner">
|
|
|
|
<div class="basket-header">
|
|
<span class="basket-title">Váš košík</span>
|
|
<span class="basket-count-text">{{basket.itemCount}} položek</span>
|
|
</div>
|
|
|
|
{{#if basket.items}}
|
|
<div class="basket-items-scroll">
|
|
{{#each basket.items}}
|
|
<div class="basket-item">
|
|
<div class="basket-item-img-wrap">
|
|
{{#if this.imgSrc}}
|
|
<img src="{{this.imgSrc}}" alt="{{this.imgAlt}}" />
|
|
{{else}}
|
|
<div class="basket-img-placeholder"></div>
|
|
{{/if}}
|
|
</div>
|
|
<div class="basket-item-details">
|
|
<a href="{{this.href}}" class="basket-item-name">{{this.name}}</a>
|
|
<div class="basket-item-price-row">
|
|
<span class="basket-item-qty">{{this.qty}}</span>
|
|
<span class="basket-item-price">{{this.price}}</span>
|
|
</div>
|
|
</div>
|
|
<a href="{{this.removeLink}}" class="basket-item-remove" title="Odstranit">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
|
|
</a>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{else}}
|
|
<div class="basket-empty">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="basket-empty-icon"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
|
|
<p>Váš košík je zatím prázdný</p>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="basket-footer">
|
|
{{#if basket.freeDelivery}}
|
|
<div class="basket-freedelivery">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
|
|
{{basket.freeDelivery}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="basket-total">
|
|
<span>Celkem:</span>
|
|
<span class="basket-total-price">{{basket.price}}</span>
|
|
</div>
|
|
|
|
<a href="{{basket.link}}" class="basket-checkout-btn">Přejít do košíku</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="mobile-menu-toggle" class="action-btn mobile-menu-btn" aria-label="Menu">
|
|
<svg id="menu-icon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" /></svg>
|
|
<svg id="menu-icon-close" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="search-bar" class="search-container hidden">
|
|
<form action="{{#if searchAction}}{{searchAction}}{{else}}/hledani{{/if}}" method="GET" class="search-input-wrapper">
|
|
<input type="search" name="query" placeholder="Zadejte hledaný výraz..." class="search-input" required />
|
|
<button type="submit" class="search-icon search-submit-btn" aria-label="Hledat">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mobile-menu" class="mobile-menu hidden">
|
|
<nav class="container mobile-nav-inner">
|
|
{{#each menu.main}}
|
|
<div class="mobile-item-wrap">
|
|
<div class="mobile-item-header">
|
|
<a href="{{this.href}}" class="mobile-link font-medium">
|
|
{{this.text}}
|
|
</a>
|
|
{{#if this.sublinks}}
|
|
<button class="mobile-toggle js-submenu-toggle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if this.sublinks}}
|
|
<div class="mobile-sub-menu hidden">
|
|
{{#each this.sublinks}}
|
|
<div class="mobile-item-wrap">
|
|
<div class="mobile-item-header">
|
|
<a href="{{this.href}}" class="mobile-link text-sm">
|
|
{{this.text}}
|
|
</a>
|
|
</div>
|
|
{{#if this.sublinks}}
|
|
<div class="mobile-sub-menu" style="display: block; border-color: transparent; margin-top: 0; padding-top: 0;">
|
|
{{#each this.sublinks}}
|
|
<div class="mobile-item-header">
|
|
<a href="{{this.href}}" class="mobile-link text-sm" style="color: var(--muted-foreground)">
|
|
{{this.text}}
|
|
</a>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/each}}
|
|
|
|
<div class="mobile-contact">
|
|
{{{customContentHeader}}}
|
|
<div style="margin-top: 0.5rem; display:flex; gap:1rem;">
|
|
{{#each userMenu}}
|
|
<a href="{{this.href}}" style="color: var(--accent);">{{this.text}}</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|