handle not valid menù

[lumieternal]

This code doesn't work, menù doesn't open when i click, the handle of my menù is standard-menu, can you help me?

{% comment %}
Loading CSS stylesheets
{% endcomment %}
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-menu-drawer.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-cart-notification.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}">
{% if settings.predictive_search_enabled %}
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}">
{% endif %}

{% comment %}
Conditional loading of CSS stylesheets for cart type
{% endcomment %}
{% if settings.cart_type == "drawer" %}
<link rel="stylesheet" href="{{ 'component-cart-drawer.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-cart.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-totals.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'component-discounts.css' | asset_url }}">
{% endif %}

<style>
/* Styles for the header */
.header {
display: flex;
flex-direction: column;
align-items: center;
padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

.header__logo {
max-width: 300px;
margin-bottom: 1rem;
}

.header__logo img {
max-width: 100%;
height: auto;
vertical-align: middle;
}

.header__icons {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}

.header__icons a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
position: relative;
transition: color 0.3s ease;
}

.header__icons a:focus {
outline: none;
}

.header__icons a:hover {
color: #333333;
}

.header__icon {
position: relative;
}

.header__icon .cart-count-bubble {
position: absolute;
top: -6px;
right: -10px;
background-color: #FF4136;
color: #fff;
border-radius: 50%;
height: 20px;
width: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: bold;
}

.header__icon .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

.header__menu-text, .header__search-text, .header__login-text, .header__cart-text {
font-size: 12px;
margin-top: 4px;
}

.header__menu {
display: none;
flex-direction: column;
align-items: center;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 999;
padding: 1rem;
}

.header__menu.active {
display: flex;
}

.header__search-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1001;
}

.header__search-popup.active {
display: flex;
}

.header__search-popup .search-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 600px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}

.header__search-popup .search-container .close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}

.search-suggestions {
list-style: none;
margin: 0;
padding: 0;
}

.search-suggestions li {
padding: 0.5rem;
border-bottom: 1px solid #ddd;
}

.search-suggestions li a {
text-decoration: none;
color: #333;
}

.search-suggestions li a:hover {
text-decoration: underline;
}
</style>

{% comment %}
Loading necessary JavaScript files
{% endcomment %}
<script src="{{ 'details-disclosure.js' | asset_url }}"></script>
<script src="{{ 'details-modal.js' | asset_url }}"></script>
<script src="{{ 'cart-notification.js' | asset_url }}"></script>
<script src="{{ 'search-form.js' | asset_url }}"></script>
{% if settings.cart_type == "drawer" %}
<script src="{{ 'cart-drawer.js' | asset_url }}"></script>
{% endif %}

{% comment %}
Definition of SVG sprites used
{% endcomment %}
<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
<symbol id="icon-search" viewbox="0 0 18 19" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/>
</symbol>

<symbol id="icon-reset" class="icon icon-close" fill="none" viewBox="0 0 18 18" stroke="currentColor">
<circle r="8.5" cy="9" cx="9" stroke-opacity="0.2"/>
<path d="M6.82972 6.82915L1.17193 1.17097" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>
<path d="M1.22896 6.88502L6.77288 1.11523" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"/>
</symbol>

<symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17">
<path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor"></path>
</symbol>

<symbol id="icon-user" viewBox="0 0 24 24" fill="none">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
</symbol>

<symbol id="icon-menu" viewBox="0 0 24 24" fill="none">
<path d="M4 6h16M4 12h16m-7 6h7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
</svg>

{% comment %}
Main header of the application
{% endcomment %}
<header class="header page-width color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
<a href="{{ routes.root_url }}" class="header__logo link link--text">
{% if settings.logo != blank %}
{% assign logo_alt = settings.logo.alt | default: shop.name | escape %}
{% capture logo_width %}{{ section.settings.logo_width }}px{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__logo',
width: 200,
alt: logo_alt,
preload: true
}}
{% else %}
<span class="h2">{{ shop.name }}</span>
{% endif %}
</a>

<div class="header__icons">
<!-- Menu Icon -->
<div class="header__icon">
<a href="#" class="link focus-inset" onclick="toggleMenu(event)">
<svg class="icon icon-menu" aria-hidden="true"><use xlink:href="#icon-menu"></use></svg>
<span class="header__menu-text">Menu</span>
<span class="visually-hidden">{{ 'sections.header.menu' | t }}</span>
</a>
</div>

<!-- Search Icon -->
<div class="header__icon">
<a href="#" class="link focus-inset" onclick="toggleSearch(event)">
<svg class="icon icon-search" aria-hidden="true"><use xlink:href="#icon-search"></use></svg>
<span class="header__search-text">Cerca</span>
<span class="visually-hidden">{{ 'sections.header.search' | t }}</span>
</a>
</div>

<!-- Login Icon -->
<div class="header__icon">
<a href="{{ routes.account_url }}" class="link focus-inset">
<svg class="icon icon-user" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
<span class="header__login-text">Accedi</span>
<span class="visually-hidden">{{ 'sections.header.login' | t }}</span>
</a>
</div>

<!-- Cart Icon -->
<div class="header__icon">
<a href="{{ routes.cart_url }}" class="link focus-inset">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="header__cart-text">Carrello</span>
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- render 'cart-count' -%}
</div>
{%- endif -%}
</a>
</div>
</div>

<!-- Standard Menu -->
<nav class="header__menu" id="standardMenu">
<ul>
{%- for link in linklists.standard-menu.links -%}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{%- endfor -%}
</ul>
</nav>

<!-- Search Popup -->
<div class="header__search-popup" id="searchPopup">
<div class="search-container">
<span class="close" onclick="toggleSearch(event)">&times;</span>
<form action="{{ routes.search_url }}" method="get" oninput="showSuggestions(event)">
<input type="text" name="q" placeholder="Cerca..." required id="searchInput">
<button type="submit">Cerca</button>
<ul class="search-suggestions" id="searchSuggestions"></ul>
</form>
</div>
</div>
</header>

<script>
function toggleMenu(event) {
event.preventDefault();
document.getElementById('standardMenu').classList.toggle('active');
}

function toggleSearch(event) {
event.preventDefault();
document.getElementById('searchPopup').classList.toggle('active');
}

function showSuggestions(event) {
const query = event.target.value;
const suggestionsContainer = document.getElementById('searchSuggestions');

if (query.length < 3) {
suggestionsContainer.innerHTML = '';
return;
}

fetch("/search/suggest?q=" + query)
.then(response => response.json())
.then(data => {
suggestionsContainer.innerHTML = data.results.map(item =>
`<li><a href="${item.url}">${item.title}</a></li>`
).join('');
});
}
</script>

</{% if section.settings.sticky_header_type != 'none' %}sticky-header{% else %}div{% endif %}>

{%- if settings.cart_type == "notification" -%}
{%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%}
{%- endif -%}

{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.header = document.querySelector('.section-header');
this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size';
this.headerBounds = {};

this.setHeaderHeight();

window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this));

if (this.headerIsAlwaysSticky) {
this.header.classList.add('shopify-section-header-sticky');
};

this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector('predictive-search');

this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;

this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.addEventListener('scroll', this.onScrollHandler, false);

this.createObserver();
}

setHeaderHeight() {
document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`);
}

disconnectedCallback() {
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.removeEventListener('scroll', this.onScrollHandler);
}

createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});

observer.observe(this.header);
}

onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add('scrolled-past-header');
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
this.header.classList.add('scrolled-past-header');
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);

this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);

requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
this.header.classList.remove('scrolled-past-header');
requestAnimationFrame(this.reset.bind(this));
}

this.currentScrollTop = scrollTop;
}

hide() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.closeMenuDisclosure();
this.closeSearchModal();
}

reveal() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.add('shopify-section-header-sticky', 'animate');
this.header.classList.remove('shopify-section-header-hidden');
}

reset() {
if (this.headerIsAlwaysSticky) return;
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
}

closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
this.disclosures.forEach(disclosure => disclosure.close());
}

closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
this.searchModal.close(false);
}
}

customElements.define('sticky-header', StickyHeader);
{% endjavascript %}

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if settings.logo %}
"logo": {{ settings.logo | image_url: width: 500 | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_tiktok_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_snapchat_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }}
],
"url": {{ request.origin | append: page.url | json }}
}
</script>

{%- if request.page_type == 'index' -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ request.origin | append: page.url | json }}
}
</script>
{%- endif -%}

{% schema %}
{
"name": "t:sections.header.name",
"class": "section-header",
"max_blocks": 3,
"settings": [
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "middle-center",
"label": "t:sections.header.settings.logo_position.options__4.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label",
"info": "t:sections.header.settings.logo_help.content"
},
{
"type": "link_list",
"id": "standard-menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "select",
"id": "menu_type_desktop",
"options": [
{
"value": "dropdown",
"label": "t:sections.header.settings.menu_type_desktop.options__1.label"
},
{
"value": "mega",
"label": "t:sections.header.settings.menu_type_desktop.options__2.label"
},
{
"value": "drawer",
"label": "t:sections.header.settings.menu_type_desktop.options__3.label"
}
],
"default": "dropdown",
"label": "t:sections.header.settings.menu_type_desktop.label",
"info": "t:sections.header.settings.menu_type_desktop.info"
},
{
"type": "select",
"id": "sticky_header_type",
"options": [
{
"value": "none",
"label": "t:sections.header.settings.sticky_header_type.options__1.label"
},
{
"value": "on-scroll-up",
"label": "t:sections.header.settings.sticky_header_type.options__2.label"
},
{
"value": "always",
"label": "t:sections.header.settings.sticky_header_type.options__3.label"
},
{
"value": "reduce-logo-size",
"label": "t:sections.header.settings.sticky_header_type.options__4.label"
}
],
"default": "on-scroll-up",
"label": "t:sections.header.settings.sticky_header_type.label"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "header",
"content": "t:sections.header.settings.header__1.content"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "color_scheme",
"id": "menu_color_scheme",
"label": "t:sections.header.settings.menu_color_scheme.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.header.settings.header__3.content",
"info": "t:sections.header.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": true,
"label": "t:sections.header.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.header.settings.header__5.content",
"info": "t:sections.header.settings.header__6.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": true,
"label": "t:sections.header.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.header.settings.mobile_layout.content"
},
{
"type": "select",
"id": "mobile_logo_position",
"options": [
{
"value": "center",
"label": "t:sections.header.settings.mobile_logo_position.options__1.label"
},
{
"value": "left",
"label": "t:sections.header.settings.mobile_logo_position.options__2.label"
}
],
"default": "center",
"label": "t:sections.header.settings.mobile_logo_position.label"
},
{
"type": "header",
"content": "t:sections.all.spacing"
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.header.settings.margin_bottom.label",
"default": 0
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 20
}
],
"blocks": [
{
"type": "@app"
}
]
}
{% endschema %}