diff --git a/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js b/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js index 170ce20934..d0752a5eca 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js @@ -259,7 +259,9 @@ const hideAll = (baseElement = doc) => { const tooltipsNode = baseElement.querySelectorAll(TOOLTIPS_SELECTOR); for (const tooltipNode of tooltipsNode) { - bootstrap.Tooltip.getOrCreateInstance(tooltipNode).hide(); + const tooltipInstance = bootstrap.Tooltip.getInstance(tooltipNode); + + tooltipInstance?.hide(); } }; const observe = (baseElement = doc) => { diff --git a/src/bundle/Resources/public/js/scripts/sidebar/main.menu.js b/src/bundle/Resources/public/js/scripts/sidebar/main.menu.js index d606444737..8e40a3b7b2 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/main.menu.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/main.menu.js @@ -1,185 +1,234 @@ +import { getInstance, hasInstance } from '@ibexa-design-system/src/bundle/Resources/public/ts/helpers/object.instances'; + (function (global, doc, ibexa) { - const SECOND_LEVEL_COLLAPSED_WIDTH = 48; - const SECOND_LEVEL_EXPANDED_WIDTH = 220; - const SECOND_LEVEL_MANUAL_RESIZE_MIN_WIDTH = 80; const mainMenuNode = doc.querySelector('.ibexa-main-menu'); - let activeItemName = null; if (!mainMenuNode) { return; } - const firstLevelMenuNode = mainMenuNode.querySelector('.ibexa-main-menu__navbar--first-level'); - const secondLevelMenuNode = mainMenuNode.querySelector('.ibexa-main-menu__navbar--second-level'); - const showFistLevelPopupButton = firstLevelMenuNode.querySelector('.ibexa-main-menu__item--more'); - const firstLevelPopupMenu = firstLevelMenuNode.querySelector('.ibexa-main-menu__first-level-popup-menu'); - const adaptiveMenuItemsContainer = firstLevelMenuNode.querySelector('.ibexa-adaptive-items'); - const selectorItem = firstLevelMenuNode.querySelector('.ibexa-adaptive-items__item--selector'); - const adaptiveItemsToPopup = firstLevelMenuNode.querySelectorAll('.ibexa-adaptive-items__item'); - const navAnchorItems = firstLevelMenuNode.querySelectorAll('.ibexa-main-menu__item-action'); - const activeItem = [...navAnchorItems].find((el) => el.classList.contains('active')); - const popupItemsToGenerate = [...adaptiveItemsToPopup].map((item) => { - const actionItem = item.querySelector('.ibexa-main-menu__item-action'); - const name = item.dataset.itemName; - const label = item.querySelector('.ibexa-main-menu__item-text-column')?.textContent; - const isActive = actionItem.classList.contains('active'); - - return { - name, - label, - isActive, - }; - }); - const { resizerWidth } = secondLevelMenuNode.dataset; - let resizeStartPositionX = 0; - let secondMenuLevelCurrentWidth = secondLevelMenuNode.getBoundingClientRect().width; - const collapseSecondLevelMenu = (event) => { - if (event.target.closest('.ibexa-main-menu__navbar') || event.target.closest('.ibexa-tooltip')) { - return; + const navbar = mainMenuNode.querySelector('.ibexa-main-menu__navbar'); + const expandToggleBtn = navbar.querySelector('.ibexa-main-menu__expand-toggler'); + const menuItems = [...navbar.querySelectorAll('.ibexa-main-menu__item[data-item-name]')]; + const parentItemBtns = navbar.querySelectorAll( + '.ibexa-main-menu__item-action--popup-trigger, .ibexa-main-menu__item-action--accordion-trigger', + ); + const popupTriggerBtns = navbar.querySelectorAll('.ibexa-main-menu__item-action--popup-trigger'); + const popupMenuInstances = new Map(); + const isMenuExpanded = () => !navbar.classList.contains('ibexa-main-menu__navbar--collapsed'); + const { collapseLabel, expandLabel } = expandToggleBtn.dataset; + const syncExpandToggleBtnState = (isExpanded) => { + const tooltipInstance = global.bootstrap?.Tooltip.getInstance(expandToggleBtn); + + expandToggleBtn.classList.toggle('ibexa-main-menu__expand-toggler--collapsed', !isExpanded); + expandToggleBtn.setAttribute('aria-expanded', isExpanded ? 'true' : 'false'); + expandToggleBtn.setAttribute('aria-label', isExpanded ? collapseLabel : expandLabel); + + if (isExpanded) { + tooltipInstance?.dispose(); + expandToggleBtn.removeAttribute('title'); + } else { + expandToggleBtn.title = expandLabel; } - - toggleSecondLevelMenu(); - - doc.removeEventListener('mousemove', collapseSecondLevelMenu); }; - const switchSubMenuDisplay = ({ currentTarget }) => { - if (!currentTarget.dataset.bsToggle) { - return; - } - - const { itemName } = currentTarget.parentNode.dataset; + const parseMenuTitles = () => { + const menuExpanded = isMenuExpanded(); - if (activeItemName === itemName) { - const showedTabPanes = doc.querySelectorAll('.ibexa-main-menu__tab-pane.active.show'); - const animationController = new AbortController(); - const { signal } = animationController; + ibexa.helpers.tooltips.hideAll(); - secondLevelMenuNode.addEventListener( - 'transitionend', - () => { - secondLevelMenuNode.classList.add('ibexa-main-menu__navbar--hidden'); - showedTabPanes.forEach((tabPane) => tabPane.classList.remove('active', 'show')); - animationController.abort(); - }, - { signal }, - ); + menuItems.forEach((item) => { + const labelNode = item.querySelector('.ibexa-main-menu__item-text-column'); + const actionNode = item.querySelector('.ibexa-main-menu__item-action:not(.ibexa-main-menu__item-action--accordion-trigger)'); - currentTarget.classList.remove('active'); - secondLevelMenuNode.style.width = 0; - activeItemName = null; + if (!labelNode || !actionNode) { + return; + } - return; - } + if (!menuExpanded) { + actionNode.setAttribute('title', labelNode.textContent.trim()); + actionNode.dataset.tooltipPlacement = 'right'; + actionNode.dataset.tooltipExtraClass = 'ibexa-tooltip--navigation'; + } else { + global.bootstrap?.Tooltip.getInstance(actionNode)?.dispose(); + actionNode.removeAttribute('title'); + delete actionNode.dataset.tooltipPlacement; + delete actionNode.dataset.tooltipExtraClass; + delete actionNode.dataset.originalTitle; + delete actionNode.dataset.bsOriginalTitle; + } + }); - activeItemName = itemName; + ibexa.helpers.tooltips.parse(mainMenuNode); + }; + const getAccordionNode = (itemNode) => itemNode.querySelector('.ids-accordion'); + const getAccordionInstance = (itemNode) => { + const accordionNode = getAccordionNode(itemNode); - firstLevelMenuNode.classList.add('ibexa-main-menu__navbar--collapsed'); - secondLevelMenuNode.classList.remove('ibexa-main-menu__navbar--hidden'); + if (!accordionNode || !hasInstance(accordionNode)) { + return null; + } - currentTarget.blur(); + return getInstance(accordionNode); + }; + const setAccordionExpanded = (itemNode, isExpanded) => { + const accordionInstance = getAccordionInstance(itemNode); - if (secondLevelMenuNode.classList.contains('ibexa-main-menu__navbar--collapsed')) { - toggleSecondLevelMenu(); + if (accordionInstance && accordionInstance.isExpanded() !== isExpanded) { + accordionInstance.toggleIsExpanded(isExpanded); + } + }; + const closeAllAccordions = (exceptItemName = null) => { + menuItems.forEach((itemNode) => { + if (itemNode.dataset.hasChildren !== 'true' || itemNode.dataset.itemName === exceptItemName) { + return; + } - doc.addEventListener('mousemove', collapseSecondLevelMenu, false); - } else { - const secondLevelMenuWidth = ibexa.helpers.cookies.getCookie('ibexa-aui_menu-secondary-width'); + const accordionInstance = getAccordionInstance(itemNode); - if (!secondLevelMenuWidth) { - ibexa.helpers.cookies.setBackOfficeCookie('ibexa-aui_menu-secondary-width', SECOND_LEVEL_EXPANDED_WIDTH); + if (!accordionInstance?.isExpanded()) { + return; } - setWidthOfSecondLevelMenu(); - } + setAccordionExpanded(itemNode, false); + }); }; - const setWidthOfSecondLevelMenu = () => { - const secondLevelMenuWidth = ibexa.helpers.cookies.getCookie('ibexa-aui_menu-secondary-width'); - const isSecondLevelMenuHidden = secondLevelMenuNode.classList.contains('ibexa-main-menu__navbar--hidden'); + const toggleAccordion = (itemName) => { + const itemNode = navbar.querySelector(`.ibexa-main-menu__item[data-item-name="${CSS.escape(itemName)}"]`); - if (!secondLevelMenuWidth || isSecondLevelMenuHidden) { + if (!itemNode || itemNode.dataset.hasChildren !== 'true') { return; } - const secondLevelMenuListWidth = secondLevelMenuWidth - resizerWidth; + const accordionInstance = getAccordionInstance(itemNode); + const shouldExpand = !accordionInstance?.isExpanded(); - secondLevelMenuNode.style.width = `${secondLevelMenuWidth}px`; - secondLevelMenuNode.querySelectorAll('.ibexa-main-menu__tab-pane .ibexa-main-menu__items-list').forEach((itemList) => { - itemList.style.width = `${secondLevelMenuListWidth}px`; - }); - secondLevelMenuNode.classList.toggle( - 'ibexa-main-menu__navbar--collapsed', - secondLevelMenuWidth <= SECOND_LEVEL_MANUAL_RESIZE_MIN_WIDTH, - ); + if (shouldExpand) { + closeAllAccordions(itemName); + } + + setAccordionExpanded(itemNode, shouldExpand); + }; + const closeAllPopups = (exceptItemName = null) => { + popupMenuInstances.forEach((popupMenuInstance, itemName) => { + const isExpanded = !popupMenuInstance.popupMenuElement.classList.contains('ibexa-popup-menu--hidden'); - doc.body.dispatchEvent(new CustomEvent('ibexa-main-menu-resized')); + if (itemName !== exceptItemName && isExpanded) { + popupMenuInstance.handleToggle(); + } + }); }; - const toggleSecondLevelMenu = () => { - const isSecondLevelMenuCollapsed = secondLevelMenuNode.classList.contains('ibexa-main-menu__navbar--collapsed'); - const newMenuWidth = isSecondLevelMenuCollapsed ? SECOND_LEVEL_EXPANDED_WIDTH : SECOND_LEVEL_COLLAPSED_WIDTH; + const setMenuExpanded = (isExpanded) => { + navbar.classList.toggle('ibexa-main-menu__navbar--collapsed', !isExpanded); + syncExpandToggleBtnState(isExpanded); + + if (isExpanded) { + closeAllPopups(); + closeAllAccordions(); + } else { + closeAllAccordions(); + } - ibexa.helpers.cookies.setBackOfficeCookie('ibexa-aui_menu-secondary-width', newMenuWidth); - setWidthOfSecondLevelMenu(); + parseMenuTitles(); }; - const parsePopup = (button) => { - const { popupTargetSelector } = button.dataset; + const parsePopup = (btn) => { + const { popupTargetSelector } = btn.dataset; const popupNode = doc.querySelector(popupTargetSelector); if (!popupNode) { return; } - new ibexa.core.PopupMenu({ + const popupMenuInstance = new ibexa.core.PopupMenu({ popupMenuElement: popupNode, - triggerElement: button, + triggerElement: btn, + position: () => { + const gap = 12; + const viewportGap = 8; + const btnRect = btn.getBoundingClientRect(); + const popupHeight = popupNode.offsetHeight; + const minTop = global.scrollY + viewportGap; + const maxTop = global.scrollY + global.innerHeight - popupHeight - viewportGap; + let top = btnRect.top + global.scrollY; + + if (btnRect.top + popupHeight > global.innerHeight - viewportGap) { + top = btnRect.bottom + global.scrollY - popupHeight; + } + + top = Math.max(minTop, Math.min(top, maxTop)); + + popupNode.style.top = `${top}px`; + popupNode.style.left = `${btnRect.right + global.scrollX + gap}px`; + }, }); + const { itemName } = btn.closest('.ibexa-main-menu__item').dataset; + + popupMenuInstances.set(itemName, popupMenuInstance); + btn.addEventListener( + 'click', + () => { + if (!isMenuExpanded()) { + const tooltipInstance = global.bootstrap?.Tooltip.getInstance(btn); + + tooltipInstance?.hide(); + tooltipInstance?.disable(); + btn.addEventListener( + 'mouseleave', + () => { + tooltipInstance?.enable(); + }, + { once: true }, + ); + } + }, + false, + ); + btn.addEventListener('click', () => closeAllPopups(itemName), false); }; - const parseMenuTitles = () => { - ibexa.helpers.tooltips.hideAll(); + const handleParentItemClick = (event) => { + const itemNode = event.currentTarget.closest('.ibexa-main-menu__item[data-item-name]'); - firstLevelMenuNode.querySelectorAll('.ibexa-main-menu__item').forEach((item) => { - const labelNode = item.querySelector('.ibexa-main-menu__item-text-column'); + if (!itemNode) { + return; + } - if (labelNode) { - const label = labelNode.textContent; + const { itemName } = itemNode.dataset; - if (firstLevelMenuNode.classList.contains('ibexa-main-menu__navbar--collapsed')) { - item.setAttribute('title', label); - } + event.preventDefault(); - ibexa.helpers.tooltips.parse(mainMenuNode); - } - }); - }; - const addResizeListeners = ({ clientX }) => { - resizeStartPositionX = clientX; - secondLevelMenuNode.classList.add('ibexa-main-menu__navbar--resizing'); - secondMenuLevelCurrentWidth = secondLevelMenuNode.getBoundingClientRect().width; + if (isMenuExpanded()) { + closeAllPopups(); + toggleAccordion(itemName); - doc.addEventListener('mousemove', triggerSecondLevelChangeWidth, false); - doc.addEventListener('mouseup', removeResizeListeners, false); - }; - const removeResizeListeners = () => { - secondLevelMenuNode.classList.remove('ibexa-main-menu__navbar--resizing'); - doc.removeEventListener('mousemove', triggerSecondLevelChangeWidth, false); - doc.removeEventListener('mouseup', removeResizeListeners, false); - }; - const triggerSecondLevelChangeWidth = ({ clientX }) => { - const resizeValue = secondMenuLevelCurrentWidth + (clientX - resizeStartPositionX); - const newMenuWidth = resizeValue > SECOND_LEVEL_MANUAL_RESIZE_MIN_WIDTH ? resizeValue : SECOND_LEVEL_COLLAPSED_WIDTH; + return; + } - ibexa.helpers.cookies.setBackOfficeCookie('ibexa-aui_menu-secondary-width', newMenuWidth); - setWidthOfSecondLevelMenu(); + closeAllAccordions(); }; + const handleAccordionExpanderClick = ({ currentTarget }) => { + const itemNode = currentTarget.closest('.ibexa-main-menu__item[data-item-name]'); - parseMenuTitles(); + if (!itemNode) { + return; + } - activeItemName = activeItem?.parentNode.dataset.itemName ?? null; - navAnchorItems.forEach((button) => button.addEventListener('click', switchSubMenuDisplay, false)); + const { itemName } = itemNode.dataset; + const shouldExpand = !getAccordionInstance(itemNode)?.isExpanded(); - secondLevelMenuNode.querySelector('.ibexa-main-menu__toggler').addEventListener('click', toggleSecondLevelMenu, false); - secondLevelMenuNode.querySelector('.ibexa-main-menu__resizer').addEventListener('mousedown', addResizeListeners, false); - secondLevelMenuNode.querySelectorAll('.ibexa-main-menu__tooltip-trigger').forEach(parsePopup); - secondLevelMenuNode.addEventListener( + closeAllPopups(); + + if (shouldExpand) { + closeAllAccordions(itemName); + } + }; + + syncExpandToggleBtnState(isMenuExpanded()); + parseMenuTitles(); + parentItemBtns.forEach((btn) => btn.addEventListener('click', handleParentItemClick, false)); + popupTriggerBtns.forEach(parsePopup); + navbar.querySelectorAll('.ids-expander').forEach((btn) => { + btn.addEventListener('click', handleAccordionExpanderClick, false); + }); + navbar.addEventListener( 'transitionend', (event) => { if (event.propertyName === 'width') { @@ -188,51 +237,5 @@ }, false, ); - secondLevelMenuNode.addEventListener('ibexa-menu:hide', () => { - ibexa.helpers.cookies.setBackOfficeCookie('ibexa-aui_menu-secondary-width', SECOND_LEVEL_COLLAPSED_WIDTH); - }); - - if (showFistLevelPopupButton && selectorItem) { - const adaptiveItems = new ibexa.core.AdaptiveItems({ - itemHiddenClass: 'ibexa-context-menu__item--hidden', - container: adaptiveMenuItemsContainer, - isVertical: true, - selectorItem, - getActiveItem: () => {}, - onAdapted: (visibleItems, hiddenItems) => { - const hiddenItemNames = [...hiddenItems].map((item) => item.dataset.itemName); - - popupMenu.toggleItems((popupMenuItem) => !hiddenItemNames.includes(popupMenuItem.dataset.relatedItemName)); - popupMenu.updatePosition(); - }, - }); - const popupMenu = new ibexa.core.PopupMenu({ - popupMenuElement: firstLevelPopupMenu, - triggerElement: showFistLevelPopupButton, - onItemClick: ({ currentTarget }) => { - const { relatedItemName } = currentTarget.dataset; - const relatedItemAction = doc.querySelector(`[data-item-name="${relatedItemName}"] .ibexa-main-menu__item-action`); - - relatedItemAction.click(); - }, - position: () => { - const popupLeftOffset = 5; - const targetTopPosition = selectorItem.offsetTop; - const targetLeftPosition = selectorItem.offsetLeft + selectorItem.offsetWidth + popupLeftOffset; - - firstLevelPopupMenu.style.top = `${targetTopPosition}px`; - firstLevelPopupMenu.style.left = `${targetLeftPosition}px`; - }, - }); - - popupMenu.generateItems(popupItemsToGenerate, (itemElement, item) => { - const itemElementContent = itemElement.querySelector('.ibexa-popup-menu__item-content'); - - itemElement.dataset.relatedItemName = item.name; - itemElementContent.classList.toggle('ibexa-popup-menu__item-content--current', item.isActive); - }); - - popupMenu.updatePosition(); - adaptiveItems.init(); - } + expandToggleBtn.addEventListener('click', () => setMenuExpanded(!isMenuExpanded()), false); })(window, window.document, window.ibexa); diff --git a/src/bundle/Resources/public/scss/_main-menu-popup.scss b/src/bundle/Resources/public/scss/_main-menu-popup.scss index f450f1375c..1b05c85501 100644 --- a/src/bundle/Resources/public/scss/_main-menu-popup.scss +++ b/src/bundle/Resources/public/scss/_main-menu-popup.scss @@ -2,11 +2,33 @@ @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; .ibexa-main-menu-popup { + background-color: $ibexa-color-dark; + border-color: $ibexa-color-dark-500; + + &__item-content { + color: $ibexa-color-white; + padding: calculateRem(7.5px) calculateRem(12px); + + > .ibexa-main-menu__item-text-column { + padding: 0; + } + + &:hover { + color: $ibexa-color-complementary-primary-400; + background-color: transparent; + } + + &--current { + > .ibexa-main-menu__item-text-column { + color: $ibexa-color-complementary-primary-400; + } + } + } + &__group-item { flex-direction: column; height: 100%; align-items: initial; - border-top: calculateRem(1px) solid $ibexa-color-info-800; .ibexa-popup-menu { &__item { @@ -15,14 +37,25 @@ } } - .ibexa-main-menu-popup &__group-name { - color: $ibexa-color-light-700; + &__group-item-content { + color: $ibexa-color-dark-300; + padding: 0; + } + + &__group-name { + border-top: calculateRem(1px) solid $ibexa-color-dark-500; + color: $ibexa-color-dark-500; font-size: $ibexa-text-font-size-small; cursor: initial; + padding: 1px 0; + margin-left: 12px; + margin-top: 8px; + border-radius: 0; + width: initial; &:hover { background-color: initial; - color: $ibexa-color-light-700; + color: $ibexa-color-dark-500; } } } diff --git a/src/bundle/Resources/public/scss/_main-menu.scss b/src/bundle/Resources/public/scss/_main-menu.scss index 83176da7ac..ea7a8f5156 100644 --- a/src/bundle/Resources/public/scss/_main-menu.scss +++ b/src/bundle/Resources/public/scss/_main-menu.scss @@ -10,195 +10,109 @@ padding: 0; opacity: 0; border: none; + overflow: hidden; } display: flex; height: calc(100vh - #{calculateRem(72px)}); &__navbar { - font-size: $ibexa-text-font-size-medium; + display: flex; + flex-direction: column; + width: calculateRem(264px); + background-color: $ibexa-color-dark; - transition: width $ibexa-admin-transition-duration; - border: calculateRem(1px) solid $ibexa-color-dark-500; - border-top: none; - overflow-y: auto; - overflow-x: hidden; - &--first-level { - display: flex; - width: calculateRem(276px); - background-color: $ibexa-color-dark; - overflow: hidden; + overflow-y: hidden; + overflow-x: hidden; + transition: width $ibexa-admin-transition-duration $ibexa-admin-transition; - &.ibexa-main-menu__navbar--collapsed { - width: calculateRem(72px); + .ibexa-main-menu__item-action { + &--popup-trigger { + display: none; } - .ibexa-main-menu { - &__item-action { - border: calculateRem(1px) solid transparent; - - &.active:not(.ibexa-main-menu__item-action--selected) { - border: calculateRem(1px) solid $ibexa-color-info; - background-color: transparent; - } - - &--selected { - color: $ibexa-color-info; - background-color: $ibexa-color-info-800; - - .ibexa-main-menu { - &__item-icon { - fill: $ibexa-color-info; - } - - &__item-text-column { - color: $ibexa-color-info; - } - } - } - } + &--accordion-trigger { + width: 100%; } } - &--second-level { - position: relative; - width: calculateRem(220px); - padding-bottom: calculateRem(32px); - border-left: none; - - .ibexa-main-menu__tooltip-trigger, - .ibexa-main-menu__toggler { - .ibexa-icon { - fill: $ibexa-color-complementary-primary-400; - } - - &:focus { - box-shadow: none; - } - - &:hover { - .ibexa-icon { - fill: $ibexa-color-complementary-primary-200; - } - } - } + &.ibexa-main-menu__navbar--collapsed { + width: calculateRem(56px); .ibexa-main-menu { - &__items-list { - width: calculateRem(210px); - transition: width $ibexa-admin-transition-duration; - padding-top: calculateRem(8px); - } - - &__item { - padding: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &--popup-container { - margin: 0; - } + &__toggler-container { + justify-content: center; } - &__item-text-column { - padding: calculateRem(10px); - - &--group { - padding: calculateRem(9px) calculateRem(10px) calculateRem(5px); - color: $ibexa-color-light-700; - font-size: $ibexa-text-font-size-small; - } + &__items-list > .ibexa-main-menu__item > .ibexa-main-menu__item-action > .ibexa-main-menu__item-text-column, + &__items-list + > .ibexa-main-menu__item + > .ibexa-main-menu__item-action + > .ids-btn__label + > .ibexa-main-menu__item-text-column { + @include hidden-main-menu-node; } - } - - &.ibexa-main-menu__navbar--collapsed { - width: calculateRem(48px); - overflow: visible; - - .ibexa-main-menu { - &__items-list { - width: calculateRem(48px); - } - &__item { - @include hidden-main-menu-node; - - &--popup-container { - display: flex; - justify-content: center; - align-items: flex-start; - width: inherit; - height: calculateRem(80px); - opacity: 1; - } + &__item-action { + &--popup-trigger { + display: flex; } - &__toggler { - margin-right: calculateRem(6px); - - .ibexa-icon { - transform: rotate(180deg); - } + &--accordion-trigger { + display: none; } } - .ibexa-main-menu__item { - &--group-name { - width: 0; - } + &__accordion { + @include hidden-main-menu-node; } } } - - &--hidden { - @include hidden-main-menu-node; - - .ibexa-main-menu__toggler-container { - display: none; - } - } - - &--collapsed { - .ibexa-main-menu__item-text-column { - @include hidden-main-menu-node; - } - } - - &--resizing { - transition: none; - } } &__items-list { display: flex; flex-direction: column; - flex: 1; - align-items: center; - width: inherit; margin: 0; padding: 0; list-style: none; + align-items: stretch; + + &--secondary { + border-top: calculateRem(1px) solid $ibexa-color-dark-500; + } } - &__item { - width: 100%; - padding: calculateRem(8px) 0; - opacity: 1; + &__primary-section, + &__secondary-section { + padding: 0 calculateRem(8px); + } - &--popup-container { - @include hidden-main-menu-node; + &__primary-section { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + } - & { - overflow: hidden; - } - } + &__secondary-section { + flex: 0 0 auto; + min-height: 0; + max-height: 75%; + padding-bottom: calculateRem(8px); + overflow-y: auto; + overflow-x: hidden; + } + + &__item { + width: 100%; + padding: 0; + white-space: nowrap; + text-overflow: ellipsis; .ibexa-popup-menu { width: calculateRem(250px); - top: calculateRem(12px); - left: calculateRem(48px); &__item-content { overflow: hidden; @@ -210,154 +124,184 @@ &--group-name { color: $ibexa-color-light-700; position: relative; - margin-top: calculateRem(13px); - - & > .ibexa-main-menu__item-action { - height: initial; - } - - .ibexa-main-menu__item-action + .ibexa-main-menu__items-list { - padding-top: 0; - } - - &::after { - content: ''; - width: calc(100% + #{calculateRem(22px)}); - height: calculateRem(1px); - background: $ibexa-color-dark-500; - position: absolute; - top: 0; - left: calculateRem(-6px); - } } } &__item-action { display: flex; align-items: center; - margin: 0 calculateRem(12px); + min-width: calculateRem(48px); + height: calculateRem(48px); padding: 0; text-decoration: none; - border-radius: $ibexa-border-radius; + background: transparent; border: calculateRem(2px) solid transparent; - height: calculateRem(48px); - min-width: calculateRem(48px); + width: 100%; + + @at-root a#{&}, + &.ids-btn { + padding: calculateRem(9px); + color: $ibexa-color-white; - &:focus { - border-color: $ibexa-color-info-800; + &:focus { + color: $ibexa-color-white; + } + + &:hover { + color: $ibexa-color-primary-200; + } } &:hover { - color: $ibexa-color-info; - border-color: transparent; text-decoration: none; + } - .ibexa-main-menu { - &__item-icon { - fill: $ibexa-color-complementary-primary-400; - } + &--current.ids-btn { + color: $ibexa-color-white; + background-color: $ibexa-color-dark-500; - &__item-text-column { - color: $ibexa-color-complementary-primary-400; + .ids-btn__icon .ids-icon { + fill: $ibexa-color-primary-200; + } - &--group { - color: $ibexa-color-light-700; - } - } + &:focus { + color: $ibexa-color-white; + background-color: $ibexa-color-dark-500; } - } - &.active { - color: $ibexa-color-complementary-primary-200; - background-color: $ibexa-color-complementary-primary-700; + &:hover { + background-color: $ibexa-color-dark-500; + } .ibexa-main-menu { &__item-icon { - fill: $ibexa-color-complementary-primary-200; + fill: $ibexa-color-primary-200; } + } + } + + &--second-level-group { + margin: 0; + border-top: calculateRem(1px) solid $ibexa-color-dark-500; + margin-top: 8px; + margin-left: 10px; + padding: 1px 0; + border-radius: 0; + height: initial; + } + + &--second-level-link { + height: calculateRem(36px); - &__item-text-column { - color: $ibexa-color-complementary-primary-200; + &.ibexa-main-menu__item-action--current { + background-color: transparent; + + .ibexa-main-menu__item-text-column { + color: $ibexa-color-complementary-primary-400; } } } - } - &__item-icon-column { - padding: calculateRem(10px); - - .ibexa-icon { + &.ids-btn { + min-width: 0; + justify-content: flex-start; fill: $ibexa-color-white; + + &:focus, + &:hover { + fill: $ibexa-color-white; + } + + .ids-btn__label { + display: flex; + width: 100%; + min-width: 0; + } } - } - &__item-text-column { - opacity: 1; - width: 100%; - overflow: hidden; - padding: calculateRem(10px) calculateRem(10px) calculateRem(10px) calculateRem(4px); - color: $ibexa-color-white; + &--current.ids-btn { + fill: $ibexa-color-primary-200; + } } - &__separator { - width: 100%; - position: relative; - - &::after { - content: ''; - width: calc(100% + #{calculateRem(12px)}); - height: calculateRem(1px); - background: $ibexa-color-dark-500; - position: absolute; - top: 0; - left: calculateRem(-6px); + .ids-accordion { + &__header { + width: 100%; + gap: calculateRem(8px); + align-items: stretch; + border-bottom: none; + border-radius: $ibexa-border-radius; + + &:has(.ibexa-main-menu__item-action--current) { + background-color: $ibexa-color-dark-500; + } + + &:hover { + .ibexa-main-menu__item-text-column { + color: $ibexa-color-complementary-primary-400; + } + + .ids-expander { + .ids-icon { + fill: $ibexa-color-complementary-primary-400; + } + } + } } - &--top { - margin-top: auto; + &__header-content { + flex: 1 1 auto; + padding: 0; } - &--bottom { - width: calc(100% - #{calculateRem(32px)}); - margin: 0 auto; + &__content { + overflow: hidden; + + > .ibexa-main-menu__items-list { + margin-left: 28px; + } + } + + .ids-expander { + flex: 0 0 auto; + margin-right: calculateRem(8px); + fill: $ibexa-color-white; } } - &__resizer { - position: absolute; - top: 0; - right: 0; - width: calculateRem(1px); - height: 100%; - background-color: color.change($ibexa-color-dark, $alpha: 0.8); + &__item-text-column { + width: 100%; + overflow: hidden; + text-align: left; + padding: 0; - &:hover { - background-color: $ibexa-color-info; - cursor: col-resize; - width: calculateRem(6px); + &--group { + color: $ibexa-color-dark-300; + font-size: $ibexa-text-font-size-small; } } &__toggler-container { - position: fixed; - bottom: 0; display: flex; justify-content: flex-end; align-items: center; - width: inherit; - height: calculateRem(48px); } - &__toggler { - height: calculateRem(44px); - margin-right: calculateRem(16px); - padding: calculateRem(5px); - justify-content: center; - align-items: center; - transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; - } + &__expand-toggler { + &.ids-btn { + --ids-default-text-color: #{$ibexa-color-dark-300}; + --ids-hover-text-color: #{$ibexa-color-dark-300}; + --ids-focus-text-color: #{$ibexa-color-dark-300}; + } + + &--collapsed { + .ids-icon { + transform: rotate(180deg); + } - &__first-level-popup-menu { - box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(67px) 0 color.change($ibexa-color-info, $alpha: 0.5); + .ids-btn__label { + display: none; + } + } } } diff --git a/src/bundle/Resources/public/scss/_popup-menu.scss b/src/bundle/Resources/public/scss/_popup-menu.scss index 638dabe83c..52b423ed89 100644 --- a/src/bundle/Resources/public/scss/_popup-menu.scss +++ b/src/bundle/Resources/public/scss/_popup-menu.scss @@ -110,28 +110,6 @@ margin-left: calculateRem(6px); } - &--navigation { - background-color: $ibexa-color-dark; - border-color: $ibexa-color-dark-500; - - .ibexa-popup-menu__item-content { - color: $ibexa-color-white; - - &:hover { - color: $ibexa-color-complementary-primary-400; - background-color: transparent; - } - - &--current { - &, - &:hover { - color: $ibexa-color-complementary-primary-200; - background-color: $ibexa-color-complementary-primary-700; - } - } - } - } - &--hidden { display: none; } diff --git a/src/bundle/Resources/public/scss/functions/_calculate.rem.scss b/src/bundle/Resources/public/scss/functions/_calculate.rem.scss index 9c7804de60..3b9e290207 100644 --- a/src/bundle/Resources/public/scss/functions/_calculate.rem.scss +++ b/src/bundle/Resources/public/scss/functions/_calculate.rem.scss @@ -1,7 +1,7 @@ @use '../polyfill/div' as *; @function calculateRem($size) { - $remSize: div($size, 16px); + $remSize: div($size, 14px); @return $remSize + 0rem; // + 0rem converts value to proper `rem` } diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig index 03f6133ee6..9c4dec8324 100644 --- a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig @@ -164,15 +164,8 @@ {{ knp_menu_render(main_menu, { 'depth': 1, 'template': '@ibexadesign/ui/menu/main.html.twig', - 'currentClass': 'active', - 'ancestorClass': 'active' - }) }} - - {{ knp_menu_render(main_menu, { - 'depth': 2, - 'template': '@ibexadesign/ui/menu/main_2nd_level.html.twig', - 'currentClass': 'active', - 'ancestorClass': 'active' + 'currentClass': 'ibexa-main-menu__item-action--current', + 'ancestorClass': 'ibexa-main-menu__item-action--current' }) }} {% block content_tree %}{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/first_level_popup_menu_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/first_level_popup_menu_item.html.twig deleted file mode 100644 index 62b92c14e0..0000000000 --- a/src/bundle/Resources/views/themes/admin/ui/menu/first_level_popup_menu_item.html.twig +++ /dev/null @@ -1,8 +0,0 @@ -
  • - -
    • diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/main.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/main.html.twig index b82985d96b..20506f9349 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/main.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/main.html.twig @@ -1,79 +1,91 @@ {% extends '@ibexadesign/ui/menu/main_base.html.twig' %} {% block root %} - {% set extraClass = 'ibexa-main-menu__navbar--collapsed' %} + {% set extra_class = 'ibexa-main-menu__navbar--collapsed' %} {% set current_item = item %} - {% set first_bottom_item = current_item.children|find(item => item.extras.bottom_item is defined and item.extras.bottom_item) %} - -
    - - + {% set top_level_items = current_item.children|filter(item => item.extras.bottom_item is not defined or not item.extras.bottom_item) %} + {% set bottom_level_items = current_item.children|filter(item => item.extras.bottom_item is defined and item.extras.bottom_item) %} + +
    +
    + +
    +
    +
      + {% for item in top_level_items %} + {% if item.children|length > 0 or (item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink)) %} + {{ block('item') }} + {% endif %} + {% endfor %} +
    +
    + {% if bottom_level_items|length %} +
    +
      + {% for item in bottom_level_items %} + {% if item.children|length > 0 or (item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink)) %} + {{ block('item') }} + {% endif %} + {% endfor %} +
    +
    + {% endif %}
    {% endblock %} {% block linkElement %} - {% import 'knp_menu.html.twig' as knp_menu %} - {% set classes = [ 'ibexa-main-menu__item-action', - ((matcher.isCurrent(item) ? options.currentClass|trim ~ " ibexa-main-menu__item-action--selected")), + (matcher.isCurrent(item) ? options.currentClass|trim), (item.linkAttributes.class is defined ? item.linkAttributes.class|trim) ] %} + {% set icon_path = null %} - {% set link_attributes = item.linkAttributes|merge({ - 'href': item.uri, - 'aria-controls': item.name, - 'class': classes|join(' '), - }) %} + {% if item.extras.icon_path|default %} + {% set icon_path = item.extras.icon_path %} + {% elseif item.extras.icon is defined and item.extras.icon is not empty %} + {% set icon_path = ibexa_icon_path(item.extras.icon) %} + {% endif %} - - {{ block('label') }} - + + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + }) }} + {% endblock %} {% block spanElement %} {% import 'knp_menu.html.twig' as knp_menu %} - {% set classes = [ + {% set action_classes = [ 'ibexa-main-menu__item-action', - (matcher.isAncestor(item, options.matchingDepth) ? options.currentClass|trim ~ " ibexa-main-menu__item-action--selected"), + (matcher.isAncestor(item, options.matchingDepth) ? options.currentClass|trim), (item.linkAttributes.class is defined ? item.linkAttributes.class|trim) ] %} - - {% if item.uri is not empty %} - {% set link_attributes = item.linkAttributes|merge({ - 'href': item.uri - }) %} - {% else %} - {% set link_attributes = item.linkAttributes|merge({ - 'href': '#' ~ item.name, - 'aria-selected': matcher.isCurrent(item) ? "true" : "false", - 'data-bs-toggle': 'pill' - }) %} - {% endif %} - - {% set link_attributes = link_attributes|merge({ - 'class': classes|join(' ') - }) %} - - - {{ block('label') }} - -{% endblock %} - -{% block label %} {% set icon_path = null %} - {% set icon_class = icon_class|default('ibexa-main-menu__item-icon ibexa-icon ') ~ item.extras.icon_size|default('ibexa-icon--medium ') ~ item.extras.icon_class|default('')|trim %} {% if item.extras.icon_path|default %} {% set icon_path = item.extras.icon_path %} @@ -81,13 +93,98 @@ {% set icon_path = ibexa_icon_path(item.extras.icon) %} {% endif %} - {% if icon_path is not empty %} -
    - - - -
    + {% if item.hasChildren %} + {% set popup_id = '%s-popup'|format(item.name) %} + {% set popup_trigger_classes = (action_classes|merge(['ibexa-main-menu__item-action--popup-trigger']))|join(' ') %} + {% set accordion_trigger_classes = (action_classes|merge(['ibexa-main-menu__item-action--accordion-trigger']))|join(' ') %} + + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + }) }} + + +
      + {% for item in item.children %} + {% set renderItemAsGroup = item.children|length > 0 %} + {{ block('popupItem') }} + {% endfor %} +
    + + + + + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + }) }} + + + + + {{ include('@ibexadesign/ui/menu/main_2nd_level_subtree.html.twig', { + items: item.children, + matcher: matcher, + options: options, + }) }} + + + {% else %} + + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + }) }} + {% endif %} +{% endblock %} + +{% block popupLinkElement %} + {% set classes = [ + 'ibexa-popup-menu__item-content', + 'ibexa-main-menu-popup__item-content', + (matcher.isCurrent(item) ? 'ibexa-main-menu-popup__item-content--current') + ] %} + + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + }) }} + +{% endblock %} + +{% block popupSpanElement %} +
    + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + text_column_class: 'ibexa-main-menu-popup__group-item-content', + }) }} +
    +{% endblock %} + +{% block label %}
    {{ parent() }}
    {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level.html.twig deleted file mode 100644 index 8c36c72f71..0000000000 --- a/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level.html.twig +++ /dev/null @@ -1,115 +0,0 @@ -{% extends '@ibexadesign/ui/menu/main_base.html.twig' %} - -{% block root %} - {% set resizer_width = 10 %} - {% set second_level_manual_resize_min_width = 80 %} - {% set second_level_menu_width = app.request.cookies.get('ibexa-aui_menu-secondary-width') %} - {% set second_menu_width_style = '' %} - {% set second_menu_list_width_style = '' %} - {% set extra_class = 'ibexa-main-menu__navbar--hidden' %} - {% set list_attributes = item.childrenAttributes %} - {% set current_item = item %} - - {% for child in current_item.children %} - {% if matcher.isAncestor(child, options.matchingDepth) %} - {% set extra_class = '' %} - {% endif %} - {% endfor %} - - {% if second_level_menu_width and extra_class != 'ibexa-main-menu__navbar--hidden' %} - {% if second_level_menu_width <= second_level_manual_resize_min_width %} - {% set extra_class = extra_class ~ ' ibexa-main-menu__navbar--collapsed' %} - {% else %} - {% set second_menu_width_style = 'width: %spx;'|format(second_level_menu_width) %} - {% set second_menu_list_width_style = 'width: %spx'|format(second_level_menu_width - resizer_width) %} - {% endif %} - {% endif %} - -
    -
    - {% for child in current_item.children %} -
    -
      -
    • - - -
        - {% for item in child.children %} - {% set renderItemAsGroup = item.children|length > 0 %} - {{ block('popupItem') }} - {% endfor %} -
      -
      • - {% for item in child.children %} - {% set renderItemAsGroup = item.children|length > 0 %} - {{ block('item') }} - {% endfor %} -
    -
    - {% endfor %} -
    -
    - -
    -
    -
    -{% endblock %} - -{% block linkElement %} - {% import 'knp_menu.html.twig' as knp_menu %} - - {% set classes = [ - 'ibexa-main-menu__item-action', - 'ibexa-main-menu__item-action--second-level', - (matcher.isCurrent(item) ? options.currentClass|trim), - (item.linkAttributes.class is defined ? item.linkAttributes.class|trim) - ] %} - - {% set linkAttributes = { - 'href': item.uri, - 'aria-controls': item.name, - 'class': classes|join(' ') - } %} - - {% if item.extras.title is defined %} - {% set linkAttributes = linkAttributes|merge({ - 'title': item.extras.title - }) %} - {% endif %} - - {% set link_attributes = item.linkAttributes|merge(linkAttributes) %} - - {% if renderItemAsGroup|default() %} -
    - {{ block('label') }} -
    - {% else %} - - {{ block('label') }} - - {% endif %} -{% endblock %} - -{% block spanElement %} - {{ block('linkElement') }} -{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level_subtree.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level_subtree.html.twig new file mode 100644 index 0000000000..7d07bd58f6 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level_subtree.html.twig @@ -0,0 +1,10 @@ +
      + {% for item in items %} + {{ include('@ibexadesign/ui/menu/main_2nd_level_subtree_item.html.twig', { + item: item, + matcher: matcher, + options: options, + renderItemAsGroup: item.children|length > 0, + }) }} + {% endfor %} +
    diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level_subtree_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level_subtree_item.html.twig new file mode 100644 index 0000000000..d615420b79 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/menu/main_2nd_level_subtree_item.html.twig @@ -0,0 +1,74 @@ +{% import 'knp_menu.html.twig' as knp_menu %} + +{% if item.displayed %} + {% set classes = item.attribute('class') is not empty ? [item.attribute('class')] : [] %} + {% set classes = classes|merge(['ibexa-main-menu__item']) %} + + {% if renderItemAsGroup|default(false) %} + {% set classes = classes|merge(['ibexa-main-menu__item--group-name']) %} + {% endif %} + + {% if item.extras.separate is defined and item.extras.separate %} + {% set classes = classes|merge(['ibexa-main-menu__item--separator']) %} + {% endif %} + + {% if item.hasChildren and options.depth is not same as(0) %} + {% if options.branch_class is not empty and item.displayChildren %} + {% set classes = classes|merge([options.branch_class]) %} + {% endif %} + {% elseif options.leaf_class is not empty %} + {% set classes = classes|merge([options.leaf_class]) %} + {% endif %} + + {% set attributes = item.attributes|merge({ + 'data-item-name': item.name, + 'data-has-children': item.hasChildren ? 'true' : 'false', + 'data-is-leaf-link': (item.uri is not empty and not item.hasChildren) ? 'true' : 'false', + 'class': classes|join(' '), + }) %} + {% set link_classes = [ + 'ibexa-main-menu__item-action', + 'ibexa-main-menu__item-action--second-level', + (renderItemAsGroup|default(false) ? 'ibexa-main-menu__item-action--second-level-group' : 'ibexa-main-menu__item-action--second-level-link'), + (matcher.isCurrent(item) ? options.currentClass|trim), + (item.linkAttributes.class is defined ? item.linkAttributes.class|trim), + ] %} + {% set link_attributes = item.linkAttributes|merge({ + 'href': item.uri, + 'aria-controls': item.name, + 'class': link_classes|join(' '), + }) %} + + {% if item.extras.title is defined %} + {% set link_attributes = link_attributes|merge({ title: item.extras.title }) %} + {% endif %} + +
  • + {% if renderItemAsGroup|default(false) %} +
    + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + text_column_class: 'ibexa-main-menu__item-text-column--group', + }) }} +
    + {% else %} + + {{ include('@ibexadesign/ui/menu/main_menu_item_label.html.twig', { + item: item, + }) }} + + {% endif %} + + {% if item.children %} + {{ include('@ibexadesign/ui/menu/main_2nd_level_subtree.html.twig', { + items: item.children, + matcher: matcher, + options: options, + }) }} + {% endif %} +
    • + + {% if item.extras.template is defined %} + {% include item.extras.template %} + {% endif %} +{% endif %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/main_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/main_base.html.twig index 59600c7364..8c7fdd796b 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/main_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/main_base.html.twig @@ -5,7 +5,7 @@ {% if item.displayed %} {% set classes = [ 'ibexa-popup-menu__item', - (renderItemAsGroup|default(false) ? 'ibexa-main-menu-popup__group-item') + (renderItemAsGroup|default(false) ? 'ibexa-main-menu-popup__group-item' : 'ibexa-main-menu-popup__item'), ] %} {% set node_attributes = { @@ -34,7 +34,8 @@ {% block popupLinkElement %} {% set classes = [ 'ibexa-popup-menu__item-content', - ((matcher.isCurrent(item) ? 'ibexa-popup-menu__item-content--current')), + 'ibexa-main-menu-popup__item-content', + (matcher.isCurrent(item) ? 'ibexa-main-menu-popup__item-content--current') ] %} {% set link_attributes = { @@ -42,7 +43,7 @@ 'class': classes|join(' '), } %} - {{ block('label') }} + !!{{ block('label') }} {% endblock %} {% block popupSpanElement %} @@ -70,7 +71,11 @@ {%- set classes = classes|merge([options.leaf_class]) %} {%- endif %} - {%- set attributes = item.attributes|merge({ 'data-item-name': item.name }) %} + {%- set attributes = item.attributes|merge({ + 'data-item-name': item.name, + 'data-has-children': item.hasChildren ? 'true' : 'false', + 'data-is-leaf-link': (item.uri is not empty and not item.hasChildren) ? 'true' : 'false' + }) %} {%- if classes is not empty %} {%- set attributes = attributes|merge({'class': classes|join(' ')}) %} @@ -78,21 +83,13 @@ {% import 'knp_menu.html.twig' as knp_menu %} - {%- if ((item.extras.separate is defined and item.extras.separate) or (first_bottom_item is defined and first_bottom_item.name == item.name)) -%} -
  • - -
    • -
  • - {%- endif -%} -
  • - {%- if item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink) %} + {% set should_render_as_link = item.uri is not empty + and (not matcher.isCurrent(item) or options.currentAsLink) + and not (options.depth == 1 and item.hasChildren) + %} + + {%- if should_render_as_link %} {{ block('linkElement') }} {%- else %} {{ block('spanElement') }} @@ -108,10 +105,6 @@ {%- endif %}
    • - {%- if item.extras.separate is defined and item.extras.separate -%} -
  • - {%- endif -%} - {%- if item.extras.template is defined -%} {% include(item.extras.template) %} {%- endif -%} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/main_menu_item_label.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/main_menu_item_label.html.twig new file mode 100644 index 0000000000..28495b92cd --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/menu/main_menu_item_label.html.twig @@ -0,0 +1,10 @@ +{% set translation_domain = item.extra('translation_domain', 'messages') %} +{% set label = item.label %} +{% set text_column_class = text_column_class|default('') %} +{% set text_column_classes = ['ibexa-main-menu__item-text-column', text_column_class]|filter(class => class is not empty) %} + +{% if translation_domain is not same as(false) %} + {% set label = label|trans(item.extra('translation_params', {}), translation_domain) %} +{% endif %} + +{{ label }} diff --git a/src/lib/Menu/MainMenuBuilder.php b/src/lib/Menu/MainMenuBuilder.php index a5b97c63b9..0708774b83 100644 --- a/src/lib/Menu/MainMenuBuilder.php +++ b/src/lib/Menu/MainMenuBuilder.php @@ -208,7 +208,7 @@ public function createStructure(array $options): ItemInterface 'extras' => [ 'separate' => true, 'bottom_item' => true, - 'icon' => 'settings-block', + 'icon' => 'user-admin', 'orderNumber' => 140, ], ]); @@ -369,7 +369,7 @@ public static function getTranslationMessages(): array (new Message(self::ITEM_CONTENT_GROUP_SETTINGS, 'ibexa_menu'))->setDesc('Settings'), (new Message(self::ITEM_CONTENT__CONTENT_STRUCTURE, 'ibexa_menu'))->setDesc('Content structure'), (new Message(self::ITEM_CONTENT__MEDIA, 'ibexa_menu'))->setDesc('Media'), - (new Message(self::ITEM_ADMIN, 'ibexa_menu'))->setDesc('Admin'), + (new Message(self::ITEM_ADMIN, 'ibexa_menu'))->setDesc('Administration'), (new Message(self::ITEM_ADMIN__SECTIONS, 'ibexa_menu'))->setDesc('Sections'), (new Message(self::ITEM_ADMIN__ROLES, 'ibexa_menu'))->setDesc('Roles'), (new Message(self::ITEM_ADMIN__LANGUAGES, 'ibexa_menu'))->setDesc('Languages'),