205 lines
7.1 KiB
Plaintext
205 lines
7.1 KiB
Plaintext
package templates
|
|
|
|
import pscatalog "git.ma-al.com/goc_marek/ps_shop/internal/prestashop/catalog"
|
|
|
|
templ Layout(title string, cssPath string, jsPath string, menu []pscatalog.MenuItem, locale pscatalog.HeaderLocaleData, cartItems int64) {
|
|
<!doctype html>
|
|
<html lang={ pageLanguage(locale) }>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>{ title }</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"/>
|
|
<link rel="stylesheet" href={ cssPath }/>
|
|
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js" defer></script>
|
|
<script type="module" src={ jsPath } defer></script>
|
|
</head>
|
|
<body class="min-h-screen text-stone-900 antialiased">
|
|
<header class="site-header">
|
|
<div class="utility-bar">
|
|
<div class="site-container flex flex-wrap items-center justify-between gap-3 py-3 text-[0.92rem] text-stone-700">
|
|
<div class="flex flex-wrap items-center gap-x-6 gap-y-2">
|
|
<a class="inline-flex items-center gap-2 transition hover:text-amber-600" href="mailto:info@9b-plus.com">
|
|
<span class="text-base">✉</span>
|
|
<span>info@9b-plus.com</span>
|
|
</a>
|
|
<a class="inline-flex items-center gap-2 transition hover:text-amber-600" href="tel:+48221532426">
|
|
<span class="text-base">☎</span>
|
|
<span>+48 221 532 426</span>
|
|
</a>
|
|
</div>
|
|
if hasHeaderLocale(locale) {
|
|
<div class="header-locale">
|
|
@LocalePicker("Market", locale.CurrentCountry, locale.Countries, true, false)
|
|
@LocalePicker("Language", locale.CurrentLanguage, locale.Languages, true, true)
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="main-nav">
|
|
<div class="site-container header-bar">
|
|
<a class="brand-mark shrink-0" href="/">
|
|
<span class="brand-mark__strong">9b</span>
|
|
<span class="brand-mark__accent">plus</span>
|
|
</a>
|
|
<div class="ml-auto flex items-center gap-3 lg:hidden">
|
|
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-menu" data-menu-toggle>
|
|
Menu
|
|
</button>
|
|
</div>
|
|
if len(menu) > 0 {
|
|
<nav class="menu-panel hidden basis-full lg:ml-10 lg:flex lg:min-w-0 lg:flex-1 lg:basis-auto lg:items-center lg:justify-center" id="site-menu" data-menu-panel>
|
|
<div class="w-full lg:hidden">
|
|
@MenuTree(menu, 0)
|
|
</div>
|
|
<div class="hidden w-full lg:block">
|
|
@MegaMenuBar(menu)
|
|
</div>
|
|
</nav>
|
|
}
|
|
<div class="header-actions">
|
|
<a class="nav-icon" href="#" aria-label="Search">⌕</a>
|
|
<a class="nav-icon relative" href={ localizedCartPath(locale) } aria-label="Cart">
|
|
🛒
|
|
if cartItems > 0 {
|
|
<span class="absolute -right-2 -top-2 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-amber-300 px-1.5 text-[0.65rem] font-semibold leading-none text-stone-950">{ cartItems }</span>
|
|
}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{ children... }
|
|
</body>
|
|
</html>
|
|
}
|
|
|
|
templ LocalePicker(title string, current pscatalog.LocaleOption, options []pscatalog.LocaleOption, navigable bool, showMeta bool) {
|
|
<details class="locale-picker">
|
|
<summary class="locale-picker__summary">
|
|
<span class="locale-picker__value">
|
|
if current.Label != "" {
|
|
{ current.Label }
|
|
} else {
|
|
{ title }
|
|
}
|
|
</span>
|
|
if showMeta && current.Code != "" {
|
|
<span class="locale-picker__code">{ current.Code }</span>
|
|
}
|
|
<span class="locale-picker__chevron">⌄</span>
|
|
</summary>
|
|
if len(options) > 0 {
|
|
<div class="locale-picker__panel">
|
|
<p class="locale-picker__title">{ title }</p>
|
|
<ul class="space-y-1">
|
|
for _, option := range options {
|
|
<li>
|
|
if navigable && option.URL != "" {
|
|
<a class={ localeOptionClass(option, current) } href={ option.URL }>
|
|
<span>{ option.Label }</span>
|
|
if showMeta && option.Meta != "" {
|
|
<span class="locale-picker__item-meta">{ option.Meta }</span>
|
|
} else if showMeta && option.Code != "" {
|
|
<span class="locale-picker__item-meta">{ option.Code }</span>
|
|
}
|
|
</a>
|
|
} else {
|
|
<span class={ localeOptionClass(option, current) }>
|
|
<span>{ option.Label }</span>
|
|
if showMeta && option.Meta != "" {
|
|
<span class="locale-picker__item-meta">{ option.Meta }</span>
|
|
}
|
|
</span>
|
|
}
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
}
|
|
</details>
|
|
}
|
|
|
|
templ MenuTree(items []pscatalog.MenuItem, depth int) {
|
|
<ul class={ menuListClass(depth) }>
|
|
for _, item := range items {
|
|
<li class={ menuItemClass(depth, len(item.Children) > 0) }>
|
|
<a class={ menuLinkClass(depth) } href={ item.URL }>
|
|
{ item.Name }
|
|
if depth == 0 && len(item.Children) > 0 {
|
|
<span class="text-[0.65rem] text-amber-300/80">+</span>
|
|
}
|
|
</a>
|
|
if len(item.Children) > 0 {
|
|
@MenuTree(item.Children, depth + 1)
|
|
}
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
|
|
templ MegaMenuBar(items []pscatalog.MenuItem) {
|
|
<ul class="desktop-nav">
|
|
for _, item := range items {
|
|
<li class={ desktopNavItemClass(len(item.Children) > 0) }>
|
|
if len(item.Children) > 0 {
|
|
<div class="desktop-nav__item">
|
|
<a
|
|
class={ desktopNavLinkClass() }
|
|
href={ item.URL }
|
|
aria-label={ "Open " + item.Name + " submenu" }
|
|
aria-expanded="false"
|
|
aria-controls={ menuPanelID(item.ID) }
|
|
data-mega-trigger
|
|
data-mega-target={ menuPanelID(item.ID) }>{ item.Name }</a>
|
|
<button
|
|
class="desktop-nav__toggle"
|
|
type="button"
|
|
aria-label={ "Open " + item.Name + " submenu" }
|
|
aria-expanded="false"
|
|
aria-controls={ menuPanelID(item.ID) }
|
|
data-mega-trigger
|
|
data-mega-target={ menuPanelID(item.ID) }>
|
|
⌄
|
|
</button>
|
|
</div>
|
|
} else {
|
|
<a class={ desktopNavLinkClass() } href={ item.URL }>{ item.Name }</a>
|
|
}
|
|
if len(item.Children) > 0 {
|
|
@MegaMenu(item.ID, item.URL, item.Name, item.Children)
|
|
}
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
|
|
templ MegaMenu(id int64, href string, label string, columns []pscatalog.MenuItem) {
|
|
<div class="mega-menu hidden" id={ menuPanelID(id) } data-mega-menu>
|
|
<div class="mega-menu__grid">
|
|
for _, column := range columns {
|
|
<div class="mega-menu__column">
|
|
<a class="mega-menu__heading" href={ column.URL }>{ column.Name }</a>
|
|
if len(column.Children) > 0 {
|
|
<ul class="space-y-3">
|
|
for _, child := range column.Children {
|
|
<li>
|
|
<a class="mega-menu__link" href={ child.URL }>{ child.Name }</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
} else {
|
|
<a class="mega-menu__link" href={ column.URL }>View all</a>
|
|
}
|
|
</div>
|
|
}
|
|
<div class="mega-menu__all">
|
|
<a class="mega-menu__all-link" href={ href }>{ label }</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|