<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:title" content="<?php echo strip_tags(get_the_title()) ?>" />
<meta property="og:image" content="<?php echo get_the_post_thumbnail_url(get_the_ID()) ?>" />
<title><?php echo $args['title'] . ' | ' . get_bloginfo('name') ?></title>
<?php wp_head() ?>
<style>
.hide-tab ul {
flex-wrap: wrap;
gap: 0 15px !important;
}
header {
margin-bottom: 16px !important;
}
@media screen and (max-width: 992px) {
#header>nav>ul>.dropdown.show .content,
#header>nav>ul .dropdown.lang.show .content {
max-height: 1000px !important;
}
}
.menu-item {
display: flex;
align-items: center;
}
nav.hide-tab ul li:first-child {
display: flex;
align-items: center;
}
/* Inline styles for header search */
.site-search {
display: flex;
align-items: center;
gap: 8px;
margin-left: 20px;
}
.site-search form {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 20px;
padding: 0px 10px;
background: #fff;
}
.site-search input[type="search"] {
border: none;
outline: none;
min-width: 180px;
font-size: 14px;
background: transparent;
color: black;
}
.site-search input[type="search"]::placeholder {
color: #888;
}
.site-search input[type="search"]::-ms-input-placeholder {
color: #888;
}
.site-search input[type="search"]::-webkit-input-placeholder {
color: #888;
}
.site-search button[type="submit"] {
border: none;
background: transparent;
padding: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.site-search svg {
width: 18px;
height: 18px;
stroke: #333;
}
/* Мобільне меню - відступи між пунктами */
@media (max-width: 1024px) {
nav.hide-tab ul li {
padding: 12px 0;
}
nav.hide-tab ul li a {
display: block;
padding: 12px 0;
font-size: 16px;
}
/* Підменю */
nav.hide-tab ul li .sub-menu {
padding-left: 16px;
/* щоб було видно вкладеність */
margin-top: 8px;
margin-bottom: 8px;
}
nav.hide-tab ul li .sub-menu li {
padding: 10px 0;
}
nav.hide-tab ul li .sub-menu li a {
font-size: 15px;
padding: 10px 0;
}
}
@media (max-width: 1024px) {
.site-search input[type="search"] {
min-width: 130px;
}
}
/* Language dropdown */
.lang-dropdown {
position: relative;
margin-left: 16px;
}
.lang-dropdown .lang-current {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid #ddd;
border-radius: 20px;
background: #fff;
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
line-height: 1;
color: #333;
}
.lang-dropdown .lang-current:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #666;
display: inline-block;
}
.lang-dropdown.open .lang-current:after {
border-top: none;
border-bottom: 6px solid #666;
}
.lang-dropdown .lang-dropdown-list {
position: absolute;
right: 0;
top: calc(100% + 6px);
list-style: none;
margin: 0;
padding: 10px;
min-width: 140px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
display: none;
z-index: 1000;
}
.lang-dropdown.open .lang-dropdown-list {
display: block;
}
.lang-dropdown .lang-dropdown-list a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
color: #333;
text-decoration: none;
font-size: 14px;
white-space: nowrap;
}
.lang-dropdown .lang-dropdown-list li:hover {
background: #f6f6f6;
}
.lang-dropdown .lang-dropdown-list li.active {
font-weight: 600;
}
.lang-dropdown .lang-flag img {
width: 18px;
height: auto;
display: block;
border-radius: 2px;
}
@media (max-width: 1024px) {
.lang-dropdown {
margin-left: 10px;
}
}
.lang-dropdown-list li {
display: flex;
align-items: center;
text-align: center;
}
.lang-flag {
padding: 5px;
}
.content {
max-width: 1000px !important;
}
.lang-dropdown .lang-flag img {
aspect-ratio: 4 / 3 !important;
}
.lang-dropdown .lang-flag img {
max-width: none !important;
}
.lang-dropdown .lang-flag img[srcset] {
width: 20px !important;
height: 14px !important;
}
</style>
</head>
<body>
<header id="header">
<div class="top flex align-center">
<div class="hide-tab">
<img src="<?php echo get_template_directory_uri() ?>/assets/img/tmp.svg" alt="">
</div>
<div class="flex mob-wrap">
<div class="menu hide-desktop">
<div></div>
<div></div>
<div></div>
</div>
<div class="return hide-desktop"></div>
<?php
$home_url = function_exists('pll_home_url') ? pll_home_url() : home_url('/');
?>
<a href="<?php echo esc_url($home_url); ?>" class="flex center align-center">
<img src="<?php echo get_template_directory_uri() ?>/assets/img/logo.svg" alt="" class="logo">
<?php echo esc_html(get_bloginfo('name')); ?>
</a>
<div class="close hide-desktop"></div>
</div>
<div class="hide-tab">
<?php if (function_exists('pll_the_languages')): ?>
<?php
$langs = pll_the_languages(['raw' => 1]);
$current = null;
if (is_array($langs)) {
foreach ($langs as $lng) {
if (!empty($lng['current_lang'])) {
$current = $lng;
break;
}
}
if (!$current && !empty($langs)) {
$first = array_values($langs);
$current = $first[0];
}
}
?>
<?php if (!empty($langs) && !empty($current)): ?>
<div class="lang-dropdown" id="langDropdown">
<button class="lang-current" type="button" aria-haspopup="true" aria-expanded="false">
<?php
$flag_html = '';
if (!empty($current['flag'])) {
$flag = $current['flag'];
if (
!empty($current['slug']) && in_array($current['slug'], ['pt', 'pt_PT', 'pt-pt']) ||
(!empty($current['locale']) && in_array($current['locale'], ['pt_PT', 'pt-PT']))
) {
$flag = get_template_directory_uri() . '/assets/img/br.png';
}
if (strpos($flag, '<img') !== false) {
$flag_html = $flag;
} else {
$flag_html = '<img src="' . esc_url($flag) . '" alt="' . esc_attr($current['name']) . '">';
}
}
echo '<span class="lang-flag">' . $flag_html . '</span>';
echo '<span class="lang-name">' . esc_html($current['name']) . '</span>';
?>
</button>
<ul class="lang-dropdown-list" role="menu">
<?php foreach ($langs as $lng): ?>
<li role="none">
<?php
$flag_html = '';
if ($lng['slug'] === 'pt' || $lng['locale'] === 'pt_PT') {
$flag_url = get_template_directory_uri() . '/assets/img/br.png';
$flag_html = '<img src="' . esc_url($flag_url) . '" alt="' . esc_attr($lng['name']) . '">';
} elseif (!empty($lng['flag'])) {
$flag = $lng['flag'];
if (strpos($flag, '<img') !== false) {
$flag_html = $flag;
} else {
$flag_html = '<img src="' . esc_url($flag) . '" alt="' . esc_attr($lng['name']) . '">';
}
} elseif (!empty($lng['flag_url'])) {
$flag_html = '<img src="' . esc_url($lng['flag_url']) . '" alt="' . esc_attr($lng['name']) . '">';
} else {
$code = !empty($lng['slug']) ? $lng['slug'] : (!empty($lng['locale']) ? $lng['locale'] : substr($lng['name'], 0, 2));
$flag_html = '<span class="lang-flag-text">' . esc_html(strtoupper($code)) . '</span>';
}
echo '<span class="lang-flag">' . $flag_html . '</span>';
?>
<a role="menuitem" href="<?php echo esc_url($lng['url']); ?>"
class="<?php echo !empty($lng['current_lang']) ? 'active' : ''; ?>">
<?php echo esc_html($lng['name']); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
<nav class="hide-tab">
<?php
wp_nav_menu([
'theme_location' => 'menu',
'menu' => 'header',
'container' => false,
'items_wrap' => '<ul>%3$s</ul>'
]);
?>
<div class="site-search">
<form role="search" method="get"
action="<?php echo esc_url(function_exists('pll_home_url') ? pll_home_url() : home_url('/')); ?>">
<input type="search" name="s" placeholder="<?php echo pll__('Пошук') ?>..."
aria-label="<?php echo pll__('Пошук') ?>" value="<?php echo get_search_query(); ?>" />
<button type="submit" aria-label="Шукати">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="11" cy="11" r="7" stroke-width="2" />
<path d="M20 20L16.65 16.65" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
</form>
</div>
<div class="icon hide-desktop">
<img src="<?php echo get_template_directory_uri() ?>/assets/img/tmp.svg" alt="">
</div>
<div class="hide-desktop">
<?php if (function_exists('pll_the_languages')): ?>
<?php
$langs = pll_the_languages(['raw' => 1]);
$current = null;
if (is_array($langs)) {
foreach ($langs as $lng) {
if (!empty($lng['current_lang'])) {
$current = $lng;
break;
}
}
if (!$current && !empty($langs)) {
$first = array_values($langs);
$current = $first[0];
}
}
?>
<?php if (!empty($langs) && !empty($current)): ?>
<div class="lang-dropdown" id="langDropdown">
<button class="lang-current" type="button" aria-haspopup="true" aria-expanded="false">
<?php
$flag_html = '';
if (!empty($current['flag'])) {
$flag = $current['flag'];
if (
!empty($current['slug']) && in_array($current['slug'], ['pt', 'pt_PT', 'pt-pt']) ||
(!empty($current['locale']) && in_array($current['locale'], ['pt_PT', 'pt-PT']))
) {
$flag = get_template_directory_uri() . '/assets/img/br.png';
}
if (strpos($flag, '<img') !== false) {
$flag_html = $flag;
} else {
$flag_html = '<img src="' . esc_url($flag) . '" alt="' . esc_attr($current['name']) . '">';
}
}
echo '<span class="lang-flag">' . $flag_html . '</span>';
echo '<span class="lang-name">' . esc_html($current['name']) . '</span>';
?>
</button>
<ul class="lang-dropdown-list" role="menu">
<?php foreach ($langs as $lng): ?>
<li role="none">
<?php
$flag_html = '';
if ($lng['slug'] === 'pt' || $lng['locale'] === 'pt_PT') {
$flag_url = get_template_directory_uri() . '/assets/img/br.png';
$flag_html = '<img src="' . esc_url($flag_url) . '" alt="' . esc_attr($lng['name']) . '">';
} elseif (!empty($lng['flag'])) {
$flag = $lng['flag'];
if (strpos($flag, '<img') !== false) {
$flag_html = $flag;
} else {
$flag_html = '<img src="' . esc_url($flag) . '" alt="' . esc_attr($lng['name']) . '">';
}
} elseif (!empty($lng['flag_url'])) {
$flag_html = '<img src="' . esc_url($lng['flag_url']) . '" alt="' . esc_attr($lng['name']) . '">';
} else {
$code = !empty($lng['slug']) ? $lng['slug'] : (!empty($lng['locale']) ? $lng['locale'] : substr($lng['name'], 0, 2));
$flag_html = '<span class="lang-flag-text">' . esc_html(strtoupper($code)) . '</span>';
}
echo '<span class="lang-flag">' . $flag_html . '</span>';
?>
<a role="menuitem" href="<?php echo esc_url($lng['url']); ?>"
class="<?php echo !empty($lng['current_lang']) ? 'active' : ''; ?>">
<?php echo esc_html($lng['name']); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="social flex gap-xs hide-desktop">
<a href="<?php the_field('facebook', 1780) ?>"><img
src="<?php echo get_template_directory_uri() ?>/assets/img/icon_fb.svg" alt="Facebook"></a>
<a href="<?php the_field('youtube', 1780) ?>"><img
src="<?php echo get_template_directory_uri() ?>/assets/img/icon_yt.svg" alt="YouTube"></a>
</div>
</nav>
</header>
<script>
(function () {
var dropdowns = document.querySelectorAll('.lang-dropdown');
dropdowns.forEach(function (root) {
var btn = root.querySelector('.lang-current');
var list = root.querySelector('.lang-dropdown-list');
if (!btn || !list) return;
function closeAll() {
dropdowns.forEach(d => d.classList.remove('open'));
btn.setAttribute('aria-expanded', 'false');
}
btn.addEventListener('click', function (e) {
e.stopPropagation();
var isOpen = root.classList.toggle('open');
btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});
document.addEventListener('click', function () { closeAll(); });
root.addEventListener('click', function (e) { e.stopPropagation(); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { closeAll(); } });
});
})();
</script>
Not Found