feat(nx-dev): display technology icons

Author: juristr

nx-dev/ui-common/src/lib/sidebar.tsx

@@ -8,6 +8,7 @@ import {
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { AlgoliaSearch } from '@nx/nx-dev/feature-search';
 import { Menu, MenuItem, MenuSection } from '@nx/nx-dev/models-menu';
+import { iconsMap } from '@nx/nx-dev/ui-references';
 import cx from 'classnames';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -31,16 +32,30 @@ export function Sidebar({ menu }: SidebarProps): JSX.Element {
         data-testid="navigation"
         className="pb-4 text-base lg:text-sm"
       >
-        {menu.sections.map((section, index) => (
-          <SidebarSection key={section.id + '-' + index} section={section} />
-        ))}
+        {menu.sections.map((section, index) => {
+          return (
+            <SidebarSection
+              key={section.id + '-' + index}
+              section={section}
+              isInTechnologiesPath={false}
+            />
+          );
+        })}
       </nav>
     </div>
   );
 }
 
-function SidebarSection({ section }: { section: MenuSection }): JSX.Element {
+function SidebarSection({
+  section,
+  isInTechnologiesPath,
+}: {
+  section: MenuSection;
+  isInTechnologiesPath: boolean;
+}): JSX.Element {
   const router = useRouter();
+
+  // Get all items with refs
   const itemList = section.itemList.map((i) => ({
     ...i,
     ref: createRef<HTMLDivElement>(),
@@ -56,6 +71,7 @@ function SidebarSection({ section }: { section: MenuSection }): JSX.Element {
       }, 0);
     });
   }, [currentItem]);
+
   return (
     <>
       {section.hideSectionHeader ? null : (
@@ -70,11 +86,21 @@ function SidebarSection({ section }: { section: MenuSection }): JSX.Element {
         <li className="mt-2">
           {itemList
             .filter((i) => !!i.children?.length)
-            .map((item, index) => (
-              <div key={item.id + '-' + index} ref={item.ref}>
-                <SidebarSectionItems key={item.id + '-' + index} item={item} />
-              </div>
-            ))}
+            .map((item, index) => {
+              // Check if this specific item is the Technologies item
+              const isTechnologiesItem = item.id === 'technologies';
+
+              return (
+                <div key={item.id + '-' + index} ref={item.ref}>
+                  <SidebarSectionItems
+                    key={item.id + '-' + index}
+                    item={item}
+                    isNested={false}
+                    isInTechnologiesPath={isTechnologiesItem}
+                  />
+                </div>
+              );
+            })}
         </li>
       </ul>
     </>
@@ -84,51 +110,88 @@ function SidebarSection({ section }: { section: MenuSection }): JSX.Element {
 function SidebarSectionItems({
   item,
   isNested = false,
+  isInTechnologiesPath = false,
 }: {
   item: MenuItem;
   isNested?: boolean;
+  isInTechnologiesPath?: boolean;
 }): JSX.Element {
   const router = useRouter();
   const [collapsed, setCollapsed] = useState(!item.disableCollapsible);
 
+  // Check if this is the Technologies main item
+  const isTechnologiesItem = item.id === 'technologies';
+
+  // If this is direct child of the Technologies item, show an icon
+  const isDirectTechnologyChild = isInTechnologiesPath;
+
+  // Get the icon key for this technology
+  let iconKey = null;
+  if (isDirectTechnologyChild) {
+    iconKey = getIconKeyForTechnology(item.id);
+  }
+
   const handleCollapseToggle = useCallback(() => {
     if (!item.disableCollapsible) {
       setCollapsed(!collapsed);
     }
   }, [collapsed, setCollapsed, item]);
+
   function withoutAnchors(linkText: string): string {
     return linkText?.includes('#')
       ? linkText.substring(0, linkText.indexOf('#'))
       : linkText;
   }
 
+  // Update the children mapping to safely handle cases where item.children might be undefined
+  const children = item.children || [];
+
   return (
     <>
       <h5
         data-testid={`section-h5:${item.id}`}
         className={cx(
-          'flex py-2',
+          'group flex items-center py-2',
+          isDirectTechnologyChild
+            ? '-ml-1 rounded-md px-1 hover:bg-slate-50 dark:hover:bg-slate-800/60'
+            : '',
           'text-sm font-semibold text-slate-800 lg:text-sm dark:text-slate-200',
           item.disableCollapsible ? 'cursor-text' : 'cursor-pointer'
         )}
         onClick={handleCollapseToggle}
       >
-        {item.disableCollapsible ? (
-          <Link
-            href={item.path as string}
-            className="hover:underline"
-            prefetch={false}
-          >
-            {item.name}
-          </Link>
-        ) : (
-          <>
-            {item.name} <CollapsibleIcon isCollapsed={collapsed} />
-          </>
+        {isDirectTechnologyChild && (
+          <div className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center">
+            <img
+              className="h-5 w-5 object-cover opacity-100 dark:invert"
+              loading="lazy"
+              src={iconsMap[iconKey || 'nx']}
+              alt={item.name + ' illustration'}
+              aria-hidden="true"
+            />
+          </div>
         )}
+        <div className={cx('flex flex-grow items-center justify-between')}>
+          {item.disableCollapsible ? (
+            <Link
+              href={item.path as string}
+              className="hover:underline"
+              prefetch={false}
+            >
+              {item.name}
+            </Link>
+          ) : (
+            <>
+              <span className={isDirectTechnologyChild ? 'flex-grow' : ''}>
+                {item.name}
+              </span>
+              <CollapsibleIcon isCollapsed={collapsed} />
+            </>
+          )}
+        </div>
       </h5>
       <ul className={cx('mb-6', collapsed ? 'hidden' : '')}>
-        {(item.children as MenuItem[]).map((subItem, index) => {
+        {children.map((subItem, index) => {
           const isActiveLink = withoutAnchors(router.asPath).startsWith(
             subItem.path
           );
@@ -150,8 +213,12 @@ function SidebarSectionItems({
                     : 'border-l-transparent hover:border-blue-300 dark:border-l-transparent dark:hover:border-sky-400')
               )}
             >
-              {subItem.children.length ? (
-                <SidebarSectionItems item={subItem} isNested={true} />
+              {(subItem.children || []).length ? (
+                <SidebarSectionItems
+                  item={subItem}
+                  isNested={true}
+                  isInTechnologiesPath={isTechnologiesItem}
+                />
               ) : (
                 <Link
                   href={subItem.path}
@@ -369,6 +436,7 @@ export function SidebarMobile({
                       <SidebarSection
                         key={section.id + '-' + index}
                         section={section}
+                        isInTechnologiesPath={false}
                       />
                     ))}
                   </nav>
@@ -381,3 +449,68 @@ export function SidebarMobile({
     </Transition>
   );
 }
+
+function getIconKeyForTechnology(idOrName: string): string {
+  // Normalize the input to lowercase for more reliable matching
+  const normalized = idOrName.toLowerCase();
+
+  // Technology icon mapping
+  const technologyIconMap: Record<string, string> = {
+    // JavaScript/TypeScript
+    typescript: 'js',
+    js: 'js',
+
+    // Angular
+    angular: 'angular',
+    'angular-rspack': 'angular-rspack',
+    'angular-rsbuild': 'angular-rsbuild',
+
+    // React
+    react: 'react',
+    'react-native': 'react-native',
+    remix: 'remix',
+    next: 'next',
+    expo: 'expo',
+
+    // Vue
+    vue: 'vue',
+    nuxt: 'nuxt',
+
+    // Node
+    nodejs: 'node',
+    'node.js': 'node',
+    node: 'node',
+
+    // Java
+    java: 'gradle',
+    gradle: 'gradle',
+
+    // Module Federation
+    'module-federation': 'module-federation',
+
+    // Linting
+    eslint: 'eslint',
+    'eslint-technology': 'eslint',
+
+    // Testing
+    'testing-tools': 'jest',
+    cypress: 'cypress',
+    jest: 'jest',
+    playwright: 'playwright',
+    storybook: 'storybook',
+    detox: 'detox',
+
+    // Build tools
+    'build-tools': 'webpack',
+    'build tools': 'webpack',
+    webpack: 'webpack',
+    vite: 'vite',
+    rollup: 'rollup',
+    esbuild: 'esbuild',
+    rspack: 'rspack',
+    rsbuild: 'rsbuild',
+  };
+
+  // Return the mapped icon or 'nx' as default
+  return technologyIconMap[normalized] || 'nx';
+}