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

- 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.

classic/megamenu-classic.css

@@ -1,4 +1,4 @@
-/* SharePoint MegaMenu 2.1.0 - Classic pages */
+/* SharePoint MegaMenu 2.2.0 - Classic pages */
 :root {
     --megaMenuBarHeight: 44px;
     --megaMenuContentWidth: 1200px;
@@ -28,6 +28,17 @@
     color: #323130;
 }
 
+.mega-menu-status {
+    box-sizing: border-box;
+    padding: 10px 24px;
+    border-bottom: 1px solid #edebe9;
+    background: #f3f9fd;
+    color: #323130;
+    font-size: 13px;
+}
+
+.mega-menu-mobile-toggle { display: none; }
+
 .mega-menu-top-level {
     display: flex;
     align-items: stretch;
@@ -71,19 +82,38 @@
     outline: none;
 }
 
-.menu-item-text[aria-haspopup="true"]::after {
+.menu-item-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 32px;
+    min-height: var(--megaMenuBarHeight);
+    margin: 0 8px 0 -10px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: #323130;
+    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-text[aria-expanded="true"] {
+.menu-item-toggle:hover,
+.menu-item-toggle[aria-expanded="true"] {
     background: #f3f2f1;
     color: #323130;
     text-decoration: none;
@@ -91,6 +121,8 @@
 
 .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 #0078d4;
@@ -132,6 +164,13 @@
     padding-bottom: 8px;
 }
 
+.mega-menu-description {
+    margin: -4px 0 12px;
+    color: #605e5c;
+    font-size: 12px;
+    line-height: 18px;
+}
+
 .mega-menu-category h3 {
     margin: 0 0 10px;
     padding: 0 0 8px;
@@ -225,19 +264,34 @@
     color: #323130;
 }
 
-.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: #323130;
+    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 #0078d4; outline-offset: -2px; }
+
 .flyout-level-3 {
     position: absolute;
     top: -9px;
@@ -250,7 +304,8 @@
 }
 
 .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;
 }
 
@@ -267,9 +322,61 @@
 }
 
 @media (max-width: 767px) {
+    .mega-menu-mobile-toggle {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        min-height: var(--megaMenuBarHeight);
+        padding: 0 16px;
+        border: 0;
+        background: #fff;
+        color: #323130;
+        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 #edebe9;
+    }
+
+    .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 #edebe9;
+    }
+
+    .menu-item-toggle { width: 44px; margin: 0; border-left: 1px solid #edebe9; }
+
+    .mega-menu {
+        position: static;
+        grid-column: 1 / -1;
+        width: 100%;
+        border-right: 0;
+        border-left: 0;
+        box-shadow: none;
     }
 
     .mega-menu-grid {
@@ -279,12 +386,14 @@
 
     .flyout-level-3 {
         position: static;
-        display: block;
+        display: none;
         width: 100%;
         border: 0;
         box-shadow: none;
         padding-left: 16px;
     }
+
+    .flyout-item.is-open > .flyout-level-3 { display: block; }
 }
 
 @media print {