New Reference Architectures Sidebar

docusaurus.config.ts

@@ -218,23 +218,23 @@ const config: Config = {
                         },
                         {
                             type: 'html',
-                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?techDomains=appdev">Application Development & Automation</a>`,
+                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?expanded=ai">AI & Machine Learning</a>`,
                         },
                         {
                             type: 'html',
-                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?techDomains=ai">Artificial Intelligence</a>`,
+                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?expanded=appdev">Application Development & Automation</a>`,
                         },
                         {
                             type: 'html',
-                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?techDomains=data">Data & Analytics</a>`,
+                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?expanded=data">Data & Analytics</a>`,
                         },
                         {
                             type: 'html',
-                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?techDomains=integration">Integration</a>`,
+                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?expanded=integration">Integration</a>`,
                         },
                         {
                             type: 'html',
-                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?techDomains=opsec">Operation & Security</a>`,
+                            value: `<a class="dropdown__link" href="${baseUrl}docs/ref-arch?expanded=opsec">Operation & Security</a>`,
                         },
                         {
                             type: 'html',

src/components/FilterBar/CollapsibleFilterBar.module.css

@@ -1,12 +1,11 @@
 .filterBarContainer {
     width: calc(100% - 16px);
-    margin-left: 8px;
-    margin-right: 8px;
     background: var(--ifm-background-color);
     border: 1px solid var(--color-border-light);
     border-radius: var(--border-radius-sm);
     padding: 12px;
-    margin-bottom: 16px;
+    margin: 0 8px 16px 8px;
+    box-sizing: border-box;
 }
 
 /* Top Bar with Filter Toggle and Clear Button */

src/components/FilterBar/CollapsibleFilterBar.tsx

@@ -9,11 +9,8 @@ interface Option {
 }
 
 interface CollapsibleFilterBarProps {
-    techDomains: Option[];
     partners: Option[];
-    selectedTechDomains: Option[];
     selectedPartners: Option[];
-    onTechDomainsChange: (values: Option[]) => void;
     onPartnersChange: (values: Option[]) => void;
     resetFilters: () => void;
     isResetEnabled: boolean;
@@ -23,11 +20,8 @@ interface CollapsibleFilterBarProps {
 }
 
 const CollapsibleFilterBar: React.FC<CollapsibleFilterBarProps> = ({
-    techDomains,
     partners,
-    selectedTechDomains,
     selectedPartners,
-    onTechDomainsChange,
     onPartnersChange,
     resetFilters,
     isResetEnabled,
@@ -50,7 +44,7 @@ const CollapsibleFilterBar: React.FC<CollapsibleFilterBarProps> = ({
         onChange(currentSelection.filter((item) => item.value !== option.value));
     };
 
-    const hasActiveFilters = selectedTechDomains.length > 0 || selectedPartners.length > 0 || searchTerm.length > 0;
+    const hasActiveFilters = selectedPartners.length > 0 || searchTerm.length > 0;
 
     return (
         <div className={styles.filterBarContainer}>
@@ -65,7 +59,7 @@ const CollapsibleFilterBar: React.FC<CollapsibleFilterBarProps> = ({
                     <span>Filters</span>
                     {hasActiveFilters && (
                         <span className={styles.filterBadge}>
-                            {selectedTechDomains.length + selectedPartners.length}
+                            {selectedPartners.length}
                         </span>
                     )}
                 </button>
@@ -81,16 +75,6 @@ const CollapsibleFilterBar: React.FC<CollapsibleFilterBarProps> = ({
             {hasActiveFilters && (
                 <div className={styles.activeFiltersBar}>
                     <div className={styles.activeFiltersList}>
-                        {selectedTechDomains.map((domain) => (
-                            <button
-                                key={domain.value}
-                                onClick={() => removeFilter(domain, selectedTechDomains, onTechDomainsChange)}
-                                className={styles.activeFilterChip}
-                            >
-                                {domain.label}
-                                <IoMdClose className={styles.chipCloseIcon} />
-                            </button>
-                        ))}
                         {selectedPartners.map((partner) => (
                             <button
                                 key={partner.value}
@@ -108,31 +92,13 @@ const CollapsibleFilterBar: React.FC<CollapsibleFilterBarProps> = ({
             {/* Result Count */}
             {resultCount !== undefined && (
                 <div className={styles.resultCount}>
-                    {resultCount} {resultCount === 1 ? 'document' : 'documents'} found
+                    {resultCount} unique {resultCount === 1 ? 'document' : 'documents'} found
                 </div>
             )}
 
             {/* Collapsible Filter Panel */}
             {isExpanded && (
                 <div className={styles.filterPanel}>
-                    <div className={styles.filterGroup}>
-                        <h3 className={styles.filterTitle}>Technology Domains</h3>
-                        <div className={styles.filterChips}>
-                            {techDomains.map((domain) => {
-                                const isSelected = selectedTechDomains.some((item) => item.value === domain.value);
-                                return (
-                                    <button
-                                        key={domain.value}
-                                        onClick={() => toggleFilter(domain, selectedTechDomains, onTechDomainsChange)}
-                                        className={`${styles.filterChip} ${isSelected ? styles.selected : ''}`}
-                                    >
-                                        {domain.label}
-                                    </button>
-                                );
-                            })}
-                        </div>
-                    </div>
-
                     <div className={styles.filterGroup}>
                         <h3 className={styles.filterTitle}>Technology Partners</h3>
                         <div className={styles.filterChips}>

src/constant/constants.ts

@@ -37,8 +37,8 @@ export const navigationCardsData = [
 
 // Keep items sorted alphabetically by `title`
 export const techDomain = [
-    { id: 'appdev', title: 'Application Dev. & Automation', icon: 'sap-icon://syntax' },
     { id: 'ai', title: 'AI & Machine Learning', icon: 'sap-icon://da' },
+    { id: 'appdev', title: 'Application Dev. & Automation', icon: 'sap-icon://syntax' },
     { id: 'data', title: 'Data & Analytics', icon: 'sap-icon://database' },
     { id: 'integration', title: 'Integration', icon: 'sap-icon://exit-full-screen' },
     { id: 'opsec', title: 'Operation & Security', icon: 'sap-icon://shield' },

src/css/custom.css

@@ -39,6 +39,7 @@
     --ifm-footer-link-hover-color: #6b84a0;
     --ifm-footer-title-color: var(--ifm-font-color-base);
     --doc-sidebar-width: 350px !important;
+    --doc-sidebar-hidden-width: 30px;
     --ifm-table-cell-padding: 0.25rem 0.5rem;
     --ifm-menu-link-padding-vertical: 0.375rem;
     --ifm-menu-link-padding-horizontal: 0.75rem;
@@ -363,10 +364,6 @@ svg[aria-roledescription="flowchart-v2"] span {
     /* Remove bullet points */
 }
 
-.menu__list-item>.menu__link--active {
-    background-color: var(--ifm-sidebar-selected-item-background-color);
-}
-
 .menu__link {
     /* Changed by PO: All pages should use the same colors */
     color: #535353;
@@ -376,6 +373,23 @@ svg[aria-roledescription="flowchart-v2"] span {
     line-height: 1rem;
 }
 
+/* Align domain category arrows with nested level arrows */
+/* Target domain-level links by the --sublist-caret modifier */
+a.menu__link--sublist-caret {
+    padding-right: 0.1875rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+/* Keep domain category arrows fixed on hover - only shift the text */
+.menu__link--sublist-caret:hover {
+    transform: none !important;
+}
+
+.menu__link--sublist-caret:hover [class*="categoryLinkLabel"] {
+    transform: translateX(4px);
+}
+
 /* Changing the padding size of the symbol to expand the content in the sidebar */
 .menu__caret {
     padding: 0.2rem !important;
@@ -1372,33 +1386,84 @@ html[data-theme='dark'] .theme-doc-toc-desktop {
 }
 
 /* Interactive Sidebar Links */
-.theme-doc-sidebar-menu .menu__link {
+.theme-doc-sidebar-menu .menu__link,
+nav[class*="domainSidebar"] .menu__link {
     transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
 }
 
-.theme-doc-sidebar-menu .menu__link:hover {
+.theme-doc-sidebar-menu .menu__link:hover,
+nav[class*="domainSidebar"] .menu__link:hover {
     transform: translateX(4px);
     color: var(--ifm-color-primary) !important;
 }
 
+/* Change [+N] counter color on link hover - Light mode only */
+html[data-theme='light'] .theme-doc-sidebar-menu .menu__link:hover .sidebar-duplicate-counter,
+html[data-theme='light'] nav[class*="domainSidebar"] .menu__link:hover .sidebar-duplicate-counter {
+    color: var(--ifm-color-primary) !important;
+}
+
+/* Prevent [+N] counter color change on hover in dark mode */
+html[data-theme='dark'] .sidebar-duplicate-counter:hover {
+    color: var(--ifm-color-content-secondary) !important;
+}
+
 /* All active links get bold */
-.theme-doc-sidebar-menu .menu__link--active {
+.theme-doc-sidebar-menu .menu__link--active,
+nav[class*="domainSidebar"] .menu__link--active {
     font-weight: bold;
 }
 
+/* Active document links (not folders) - hover animation combining both transforms */
+.menu__list-item:not(.menu__list-item-collapsible) > .menu__link--active:hover {
+    transform: translateX(4px) translateZ(0) !important;
+}
+
 /* Gradient effect on document links (all documents, not folders) */
-.theme-doc-sidebar-menu .menu__list-item:not(.menu__list-item-collapsible) > .menu__link--active {
-    background: var(--gradient-premium);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
+/* Generic selector that works for desktop, mobile, both themes */
+.menu__list-item:not(.menu__list-item-collapsible) > .menu__link--active {
+    color: var(--ifm-color-primary) !important;
+    background: var(--gradient-premium) !important;
+    background-color: transparent !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    font-weight: bold !important;
+    /* Force hardware acceleration and separate layer to ensure gradient renders */
+    transform: translateZ(0);
+    will-change: background;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+/* Dark theme - ensure gradient variable works */
+html[data-theme='dark'] .menu__list-item:not(.menu__list-item-collapsible) > .menu__link--active {
+    color: var(--ifm-color-primary) !important;
+    background: var(--gradient-premium) !important;
+    background-color: transparent !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    font-weight: bold !important;
+    transform: translateZ(0);
+    will-change: background;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+/* Fallback for browsers that don't support background-clip: text */
+@supports not (background-clip: text) {
+    .menu__list-item:not(.menu__list-item-collapsible) > .menu__link--active {
+        color: var(--ifm-color-primary) !important;
+        -webkit-text-fill-color: var(--ifm-color-primary) !important;
+        background: none !important;
+    }
 }
 
 /* Folder nodes - default light theme */
 .theme-doc-sidebar-menu .menu__list-item-collapsible > .menu__link,
 .menu__list-item-collapsible > .menu__link {
     color: #535353;
-    -webkit-text-fill-color: #535353;
 }
 
 /* Parent folder (expanded but NOT selected) - light theme */
@@ -1417,6 +1482,11 @@ html[data-theme='dark'] .theme-doc-toc-desktop {
     background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
     font-weight: bold !important;
+    /* Force hardware acceleration and separate layer to ensure gradient renders */
+    transform: translateZ(0);
+    will-change: background;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
 }
 
 /* Folder nodes - default dark theme */
@@ -1442,12 +1512,38 @@ html[data-theme='dark'] .menu__list-item-collapsible--active > .menu__link.menu_
     background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
     font-weight: bold !important;
+    /* Force hardware acceleration and separate layer to ensure gradient renders */
+    transform: translateZ(0);
+    will-change: background;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
 }
 
-html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link:hover {
+html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link:hover,
+html[data-theme='dark'] nav[class*="domainSidebar"] .menu__link:hover {
+    transform: translateX(4px);
     text-shadow: 0 0 8px rgba(0, 112, 242, 0.6);
 }
 
+/* Disable slide animation and color change on mobile - light theme only */
+@media (max-width: 996px) {
+    .theme-doc-sidebar-menu .menu__link:hover,
+    nav[class*="domainSidebar"] .menu__link:hover,
+    html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link:hover,
+    html[data-theme='dark'] nav[class*="domainSidebar"] .menu__link:hover,
+    .menu__link--sublist-caret:hover [class*="categoryLinkLabel"],
+    .menu__list-item:not(.menu__list-item-collapsible) > .menu__link--active:hover {
+        transform: none !important;
+    }
+
+    /* Disable color change on mobile in light theme */
+    html[data-theme='light'] .theme-doc-sidebar-menu .menu__link:hover,
+    html[data-theme='light'] nav[class*="domainSidebar"] .menu__link:hover,
+    html[data-theme='light'] .menu__link:hover .sidebar-duplicate-counter {
+        color: inherit !important;
+    }
+}
+
 /* Content Container Card */
 .theme-doc-markdown {
     background: transparent;
@@ -1603,6 +1699,7 @@ body:has(.homepage-main) footer.footer {
 }
 
 /* On mobile, allow normal scrolling */
+
 @media (max-width: 768px) {
     .homepage-main {
         scroll-snap-type: none !important;

src/plugins/security-headers/index.js

@@ -50,13 +50,6 @@ module.exports = function (_context, _options) {
                             content: 'nosniff',
                         },
                     },
-                    {
-                        tagName: 'meta',
-                        attributes: {
-                            'http-equiv': 'X-Frame-Options',
-                            content: 'DENY',
-                        },
-                    },
                     {
                         tagName: 'meta',
                         attributes: {