diff --git a/assets/base.css b/assets/base.css index 3681bcaef59..0890b3da0c5 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2521,19 +2521,19 @@ details[open] > .header__icon--menu .icon-hamburger { transform: scale(1.07); } -.js .header__inline-menu details > .header__submenu { +.js details > .header__submenu { opacity: 0; transform: translateY(-1.5rem); } -.header__inline-menu details[open] > .header__submenu { +details[open] > .header__submenu { animation: animateMenuOpen var(--duration-default) ease; animation-fill-mode: forwards; z-index: 1; } @media (prefers-reduced-motion) { - .header__inline-menu details[open] > .header__submenu { + details[open] > .header__submenu { opacity: 1; transform: translateY(0); } @@ -2620,7 +2620,8 @@ details[open] > .header__menu-item .icon-caret { transform var(--duration-default) ease; } -.header__submenu.list-menu--disclosure { +.global-settings-popup, +.header__submenu.global-settings-popup { border-radius: var(--popup-corner-radius); border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); border-style: solid; @@ -2661,6 +2662,7 @@ details[open] > .header__menu-item .icon-caret { position: static; } +header-menu > details, details-disclosure > details { position: relative; } @@ -2863,3 +2865,7 @@ details-disclosure > details { } } } + +.font-body-bold { + font-weight: var(--font-body-weight-bold); +} diff --git a/assets/cart-notification.js b/assets/cart-notification.js index d1b8fc4d94d..a4837788601 100644 --- a/assets/cart-notification.js +++ b/assets/cart-notification.js @@ -66,7 +66,7 @@ class CartNotification extends HTMLElement { handleBodyClick(evt) { const target = evt.target; if (target !== this.notification && !target.closest('cart-notification')) { - const disclosure = target.closest('details-disclosure'); + const disclosure = target.closest('details-disclosure, header-menu'); this.activeElement = disclosure ? disclosure.querySelector('summary') : null; this.close(); } diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css new file mode 100644 index 00000000000..ad1b32aed2d --- /dev/null +++ b/assets/component-mega-menu.css @@ -0,0 +1,67 @@ +.mega-menu { + position: static; +} + +.mega-menu__content { + background-color: rgb(var(--color-background)); + border-left: 0; + border-radius: 0; + border-right: 0; + left: 0; + max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem); + overflow-y: auto; + padding-bottom: 2.4rem; + padding-top: 2.4rem; + position: absolute; + right: 0; + top: 100%; + z-index: -1; +} + +.header-wrapper--border-bottom .mega-menu__content { + border-top: 0; +} + +.js .mega-menu__content { + opacity: 0; + transform: translateY(-1.5rem); +} + +.mega-menu[open] .mega-menu__content { + animation: animateMenuOpen var(--duration-default) ease; + animation-fill-mode: forwards; +} + +@media (prefers-reduced-motion) { + .mega-menu[open] .mega-menu__content { + opacity: 1; + transform: translateY(0); + } +} + +.mega-menu__list { + display: grid; + gap: 2.4rem 4rem; + grid-template-columns: repeat(6, minmax(0, 1fr)); + list-style: none; +} + +.mega-menu__link { + color: rgba(var(--color-foreground), 0.75); + display: block; + line-height: calc(1 + 0.3 / var(--font-body-scale)); + padding-bottom: 0.8rem; + padding-top: 0.8rem; + text-decoration: none; + transition: text-decoration var(--duration-short) ease; +} + +.mega-menu__link:hover, +.mega-menu__link--active { + color: rgb(var(--color-foreground)); + text-decoration: underline; +} + +.mega-menu__link--active:hover { + text-decoration-thickness: 0.2rem; +} diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js index 3b9719c5820..6fc6707c8c0 100644 --- a/assets/details-disclosure.js +++ b/assets/details-disclosure.js @@ -31,3 +31,17 @@ class DetailsDisclosure extends HTMLElement { } customElements.define('details-disclosure', DetailsDisclosure); + +class HeaderMenu extends DetailsDisclosure { + constructor() { + super(); + this.header = document.querySelector('header'); + } + + onToggle() { + if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return; + if (this.header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`); + } +} + +customElements.define('header-menu', HeaderMenu); diff --git a/layout/theme.liquid b/layout/theme.liquid index acd9e246b03..6d1f69abe97 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -49,6 +49,7 @@ --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }}; --font-body-style: {{ settings.type_body_font.style }}; --font-body-weight: {{ settings.type_body_font.weight }}; + --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }}; --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }}; --font-heading-style: {{ settings.type_header_font.style }}; diff --git a/locales/cs.schema.json b/locales/cs.schema.json index 6c5603efc51..0d88e2b103c 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Dolní okraj" + }, + "menu_type_desktop": { + "label": "Typ desktopové nabídky", + "info": "Typ nabídky se automaticky optimalizuje pro mobilní prostředí.", + "options__1": { + "label": "Rozevírací nabídka" + }, + "options__2": { + "label": "Mega nabídka" + } } } }, diff --git a/locales/da.schema.json b/locales/da.schema.json index 3d8f5643aad..09c4b4a83ae 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Nederste margen" + }, + "menu_type_desktop": { + "label": "Computermenutype", + "info": "Menutypen optimeres automatisk til mobil.", + "options__1": { + "label": "Rullemenu" + }, + "options__2": { + "label": "Megamenu" + } } } }, diff --git a/locales/de.schema.json b/locales/de.schema.json index 8425c603833..10ef350d14b 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Unterer Rand" + }, + "menu_type_desktop": { + "label": "Desktop-Menütyp", + "info": "Der Menütyp wird automatisch für die mobile Nutzung optimiert.", + "options__1": { + "label": "Dropdown" + }, + "options__2": { + "label": "Mega-Menü" + } } } }, diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 5a2541eb918..ce1d7760383 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -835,6 +835,16 @@ "menu": { "label": "Menu" }, + "menu_type_desktop": { + "label": "Desktop menu type", + "info": "Menu type is automatically optimized for mobile.", + "options__1": { + "label": "Dropdown" + }, + "options__2": { + "label": "Mega menu" + } + }, "show_line_separator": { "label": "Show separator line" }, diff --git a/locales/es.schema.json b/locales/es.schema.json index f8d23c530c2..a97ae9187cb 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Margen inferior" + }, + "menu_type_desktop": { + "label": "Tipo de menú de escritorio", + "info": "El tipo de menú se optimiza automáticamente para celular.", + "options__1": { + "label": "Desplegable" + }, + "options__2": { + "label": "Mega menú" + } } } }, diff --git a/locales/fi.schema.json b/locales/fi.schema.json index 78d556faf3c..a9741544d90 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Alareunus" + }, + "menu_type_desktop": { + "label": "Pöytäkoneen valikkotyyppi", + "info": "Valikkotyyppi optimoidaan automaattisesti mobiililaitteilla.", + "options__1": { + "label": "Pudotusvalikko" + }, + "options__2": { + "label": "Mega-valikko" + } } } }, diff --git a/locales/fr.schema.json b/locales/fr.schema.json index 4f22106271c..f5e899a054c 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Marge inférieure" + }, + "menu_type_desktop": { + "label": "Type de menu sur ordinateur", + "info": "Le type de menu est automatiquement optimisé pour les mobiles.", + "options__1": { + "label": "Menu déroulant" + }, + "options__2": { + "label": "Méga menu" + } } } }, diff --git a/locales/it.schema.json b/locales/it.schema.json index 2b0f48be064..8e8e8412c9f 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Margine inferiore" + }, + "menu_type_desktop": { + "label": "Tipo menu desktop", + "info": "Tipo menu automaticamente ottimizzato per dispositivi mobili.", + "options__1": { + "label": "Menu a discesa" + }, + "options__2": { + "label": "Mega menu" + } } } }, diff --git a/locales/ja.schema.json b/locales/ja.schema.json index 3140c4e64af..0eff95b0093 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "下マージン" + }, + "menu_type_desktop": { + "label": "デスクトップのメニュータイプ", + "info": "メニュータイプはモバイル用に自動で最適化されます。", + "options__1": { + "label": "ドロップダウン" + }, + "options__2": { + "label": "メガメニュー" + } } } }, diff --git a/locales/ko.schema.json b/locales/ko.schema.json index 8a5912df777..96870603801 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "하단 마진" + }, + "menu_type_desktop": { + "label": "데스크톱 메뉴 유형", + "info": "메뉴 유형은 자동으로 모바일에 최적화됩니다.", + "options__1": { + "label": "드롭다운" + }, + "options__2": { + "label": "메가 메뉴" + } } } }, diff --git a/locales/nb.schema.json b/locales/nb.schema.json index de7abbc27ac..963f8fbb225 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Bunnmarg" + }, + "menu_type_desktop": { + "label": "Menytype på datamaskiner", + "info": "Menytypen optimaliseres automatisk for mobil.", + "options__1": { + "label": "Rullegardin" + }, + "options__2": { + "label": "Megameny" + } } } }, diff --git a/locales/nl.schema.json b/locales/nl.schema.json index 3bdbab9a28b..fa059b292e7 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Ondermarge" + }, + "menu_type_desktop": { + "label": "Menutype voor desktop", + "info": "Menutype wordt automatisch aangepast voor mobiele apparaten.", + "options__1": { + "label": "Vervolgkeuzemenu" + }, + "options__2": { + "label": "Megamenu" + } } } }, diff --git a/locales/pl.schema.json b/locales/pl.schema.json index 49110263234..fcbb60dd537 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Dolna granica" + }, + "menu_type_desktop": { + "label": "Typ menu pulpitu", + "info": "Typ menu jest automatycznie optymalizowany pod kątem urządzeń mobilnych.", + "options__1": { + "label": "Lista rozwijana" + }, + "options__2": { + "label": "Mega menu" + } } } }, diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index 2ed133d16f8..3661180caf1 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Margem inferior" + }, + "menu_type_desktop": { + "label": "Tipo de menu para desktop", + "info": "O tipo de menu é otimizado automaticamente para dispositivos móveis.", + "options__1": { + "label": "Menu suspenso" + }, + "options__2": { + "label": "Megamenu" + } } } }, diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index aa109d03148..6e830214bef 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Margem inferior" + }, + "menu_type_desktop": { + "label": "Tipo de menu do ambiente de trabalho", + "info": "O tipo de menu é automaticamente otimizado para dispositivos móveis.", + "options__1": { + "label": "Menu pendente" + }, + "options__2": { + "label": "Mega menu" + } } } }, diff --git a/locales/sv.schema.json b/locales/sv.schema.json index 799860747ee..479b0ce0588 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Nedre marginal" + }, + "menu_type_desktop": { + "label": "Typ av skrivbordsmeny", + "info": "Menytyp optimeras automatiskt för mobila enheter.", + "options__1": { + "label": "Rullgardinsmeny" + }, + "options__2": { + "label": "Megameny" + } } } }, diff --git a/locales/th.schema.json b/locales/th.schema.json index 7f164f959a4..0e75f35e3ec 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "ย่อหน้าล่าง" + }, + "menu_type_desktop": { + "label": "ประเภทเมนูสำหรับเดสก์ท็อป", + "info": "ระบบจะปรับประเภทเมนูให้เหมาะสมกับมือถือโดยอัตโนมัติ", + "options__1": { + "label": "ดรอปดาวน์" + }, + "options__2": { + "label": "เมกะเมนู" + } } } }, diff --git a/locales/tr.schema.json b/locales/tr.schema.json index 107263a7bf8..f4029944fb4 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Alt kenar boşluğu" + }, + "menu_type_desktop": { + "label": "Masaüstü menü türü", + "info": "Menü türü, mobil cihazlar için otomatik olarak optimize edilir.", + "options__1": { + "label": "Açılır menü" + }, + "options__2": { + "label": "Mega menü" + } } } }, diff --git a/locales/vi.schema.json b/locales/vi.schema.json index 07e9bb7b9d4..e676adbda7f 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "Lề dưới" + }, + "menu_type_desktop": { + "label": "Loại menu trên màn hình máy tính", + "info": "Loại menu được tự động tối ưu hóa cho thiết bị di động.", + "options__1": { + "label": "Menu thả xuống" + }, + "options__2": { + "label": "Menu lớn" + } } } }, diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index b503e6842cb..b4439714767 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "下边距" + }, + "menu_type_desktop": { + "label": "桌面菜单类型", + "info": "菜单类型会针对移动设备进行自动优化。", + "options__1": { + "label": "下拉菜单" + }, + "options__2": { + "label": "超级菜单" + } } } }, diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index 761da48caa7..ca6a6fcd446 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -722,6 +722,16 @@ }, "margin_bottom": { "label": "下方邊界" + }, + "menu_type_desktop": { + "label": "桌面版選單類型", + "info": "行動版的選單類型會自動調整大小。", + "options__1": { + "label": "下拉式選單" + }, + "options__2": { + "label": "大型選單" + } } } }, diff --git a/sections/header.liquid b/sections/header.liquid index e1eede59189..22182e9bdcb 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -7,6 +7,10 @@ {%- endif -%} +{%- if section.settings.menu_type_desktop == 'mega' -%} + + +{%- endif -%} @@ -361,55 +365,102 @@ {%- endif -%} {%- if section.settings.menu != blank -%} - + {%- if section.settings.menu_type_desktop == 'dropdown' -%} + + {%- else -%} + + {%- endif -%} {%- endif -%}
@@ -604,7 +655,7 @@ } closeMenuDisclosure() { - this.disclosures = this.disclosures || this.header.querySelectorAll('details-disclosure'); + this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu'); this.disclosures.forEach(disclosure => disclosure.close()); } @@ -733,6 +784,23 @@ "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" + } + ], + "default": "dropdown", + "label": "t:sections.header.settings.menu_type_desktop.label", + "info": "t:sections.header.settings.menu_type_desktop.info" + }, { "type": "checkbox", "id": "show_line_separator",