SPFx-Projekte/Megamenu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: Enhance MegaMenu with localization, caching, and new properties

Browse Source 
- Added localization support for loading states, empty navigation, and submenu actions in both German and English.
- Introduced new properties in IMenuItem for description, openInNewWindow, and external links.
- Updated SPTermStorePickerService to handle cache versioning and language-specific caching.
- Implemented a new MegaMenuCore service for handling term properties, cache management, and navigation URL resolution.
- Refactored TaxonomyNavigationService to build menu hierarchy and filter hidden terms.
- Added automated tests for MegaMenu core functionalities and static asset validation.
- Removed unused ItemDictionary service.
- Created a comprehensive ToDo document outlining the implementation status and future tasks.
This commit is contained in:
Torsten Brendgen
2026-07-20 21:34:24 +02:00
parent bc61166267
commit 50b85468f1
30 changed files with 1394 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/extensions/megaMenu/MegaMenu.module.scss
+136 -13
View File
@@ -70,6 +70,10 @@ $menu-layer: var(--megaMenuZIndex, 6000);
padding: 0;
}
.mega-menu-mobile-toggle {
display: none;
}
.mega-menu-mode-flyout .mega-menu-top-item {
position: relative;
}
@@ -94,20 +98,40 @@ $menu-layer: var(--megaMenuZIndex, 6000);
outline: none;
}
.menu-item-has-children::after {
.menu-item-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 32px;
min-height: var(--megaMenuBarHeight, 44px);
margin: 0 8px 0 -10px;
padding: 0;
border: 0;
background: transparent;
color: $neutral-primary;
cursor: pointer;
}
.menu-item-toggle > span::after {
content: '';
display: block;
width: 6px;
height: 6px;
margin: -3px 0 0 10px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
}
.menu-item-toggle[aria-expanded='true'] > span::after {
transform: rotate(225deg);
}
.menu-item-link:hover,
.menu-item-text:hover,
.menu-item-link[aria-expanded='true'],
.menu-item-text[aria-expanded='true'] {
.menu-item-toggle:hover,
.menu-item-toggle[aria-expanded='true'] {
background: $neutral-lighter;
color: $neutral-primary;
text-decoration: none;
@@ -134,6 +158,8 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.menu-item-link:focus,
.menu-item-text:focus,
.menu-item-toggle:focus,
.mega-menu-mobile-toggle:focus,
.mega-menu-category a:focus,
.flyout-link:focus {
outline: 2px solid $theme-primary;
@@ -180,6 +206,13 @@ $menu-layer: var(--megaMenuZIndex, 6000);
padding: 0 0 8px;
}
.mega-menu-description {
margin: -4px 0 12px;
color: $neutral-secondary;
font-size: 12px;
line-height: 18px;
}
.mega-menu-category-title {
margin: 0 0 10px;
padding: 0 0 8px;
@@ -289,19 +322,37 @@ $menu-layer: var(--megaMenuZIndex, 6000);
font-weight: 600;
}
.flyout-link-has-children::after {
content: '';
.flyout-toggle {
position: absolute;
top: 50%;
right: 18px;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
background: transparent;
color: $neutral-primary;
cursor: pointer;
}
.flyout-toggle > span::after {
content: '';
display: block;
width: 6px;
height: 6px;
margin-top: -4px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
}
.flyout-toggle:focus {
outline: 2px solid $theme-primary;
outline-offset: -2px;
}
.flyout-level-3 {
position: absolute;
top: -9px;
@@ -314,7 +365,8 @@ $menu-layer: var(--megaMenuZIndex, 6000);
}
.flyout-item:hover > .flyout-level-3,
.flyout-item:focus-within > .flyout-level-3 {
.flyout-item:focus-within > .flyout-level-3,
.flyout-item.is-open > .flyout-level-3 {
display: block;
}
@@ -342,9 +394,61 @@ $menu-layer: var(--megaMenuZIndex, 6000);
}
@media (max-width: 767px) {
.mega-menu-mobile-toggle {
display: flex;
align-items: center;
width: 100%;
min-height: var(--megaMenuBarHeight, 44px);
padding: 0 16px;
border: 0;
background: $white;
color: $neutral-primary;
cursor: pointer;
font: inherit;
font-weight: 600;
}
.mega-menu-mobile-icon,
.mega-menu-mobile-icon::before,
.mega-menu-mobile-icon::after {
display: block;
width: 18px;
height: 2px;
background: currentColor;
}
.mega-menu-mobile-icon {
position: relative;
margin-right: 12px;
}
.mega-menu-mobile-icon::before,
.mega-menu-mobile-icon::after {
content: '';
position: absolute;
left: 0;
}
.mega-menu-mobile-icon::before { top: -6px; }
.mega-menu-mobile-icon::after { top: 6px; }
.mega-menu-top-level {
flex-wrap: wrap;
padding: 0 8px;
display: none;
flex-direction: column;
padding: 0;
border-top: 1px solid $neutral-light;
}
.mega-menu-main.is-mobile-open .mega-menu-top-level {
display: flex;
}
.mega-menu-top-item,
.mega-menu-mode-flyout .mega-menu-top-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
border-bottom: 1px solid $neutral-light;
}
.menu-item-link,
@@ -354,6 +458,21 @@ $menu-layer: var(--megaMenuZIndex, 6000);
font-size: 13px;
}
.menu-item-toggle {
width: 44px;
margin: 0;
border-left: 1px solid $neutral-light;
}
.mega-menu {
position: static;
grid-column: 1 / -1;
width: 100%;
border-right: 0;
border-left: 0;
box-shadow: none;
}
.mega-menu-grid {
grid-template-columns: 1fr;
padding: 16px;
@@ -368,12 +487,16 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.flyout-level-3 {
position: static;
display: block;
display: none;
width: 100%;
border: 0;
box-shadow: none;
padding: 0 0 4px 16px;
}
.flyout-item.is-open > .flyout-level-3 {
display: block;
}
}
@media (prefers-reduced-motion: reduce) {