[aries-core] NavMenu - Added ability to support grouping child NavItems with subheadings (#5700)

* Created reusable NavigationPanel

* Unique keys for sessionStorage

* Progress towards supporting subheadings

* Progress towards supporting subheadings

* Adjusted NavItem label color at rest and hover + padding for icon alignment

* Adjusted NavItem label color at active

* Adjusted NavItem label color at focus

* modified group border treatment

* Adjust label indentation levels

* Created NavGroup

* Created NavGroup

* Added tests

* Updated documentation

* Removed unused imports

* fixed diagram

* Update shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/NavGroup.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Cleaned up indentation type

* Ensure nav items have unique ids

* removed assignment where equivalent

* Use id instead of label

* Memoized assignUniqueIds

* Fixed test to be async

* removed unnecessary role

* Prettier

* Using item.id as identifiers

* Added a missing item.id

* Fixed all id usage

* fixed import

* cleanups

* fixed type

* type update

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: halocline

shared/aries-core/src/js/components/core/NavigationMenu/DOCUMENTATION.md

@@ -184,6 +184,7 @@ export type NavItemType = {
   url?: string; // Navigation URL
   icon?: React.ReactNode; // Display icon
   children?: NavItemType[]; // Nested items
+  type?: 'group' | 'item'; // Optional grouping type
 };
 ```
 
@@ -254,6 +255,42 @@ const hierarchicalNavItems: NavItemType[] = [
 />;
 ```
 
+### Grouped Navigation Menu
+
+```tsx
+const groupedNavItems: NavItemType[] = [
+  {
+    label: 'Components',
+    children: [
+      {
+        label: 'Layout',
+        type: 'group',
+        children: [
+          { label: 'Box', url: '/components/box' },
+          { label: 'Grid', url: '/components/grid' },
+          { label: 'Layer', url: '/components/layer' },
+        ],
+      },
+      {
+        label: 'Controls',
+        type: 'group',
+        children: [
+          { label: 'Button', url: '/components/button' },
+          { label: 'CheckBox', url: '/components/checkbox' },
+        ],
+      },
+    ],
+  },
+];
+
+<NavigationMenu
+  items={groupedNavItems}
+  open={isOpen}
+  title="Grouped Components"
+  onSelect={handleItemSelect}
+/>;
+```
+
 ### Navigation Menu with Custom Header
 
 ```tsx

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/GroupHeading.tsx

@@ -0,0 +1,36 @@
+import { Box, Text } from 'grommet';
+import { NavItemWithLevel } from '../NavList';
+
+const indentation: Record<number, string> = {
+  1: 'medium',
+  2: 'large',
+};
+
+interface GroupHeadingProps {
+  id: string;
+  item: NavItemWithLevel;
+}
+
+export const GroupHeading = ({ id, item }: GroupHeadingProps) => {
+  return (
+      <Box
+        direction="row"
+        pad={{
+          left: item.level ? indentation[item.level] : 'small',
+          top: 'xxsmall',
+          bottom: '5xsmall',
+        }}
+        role="presentation"
+      >
+        <Text
+          id={id}
+          size="xsmall"
+          weight="bold"
+          role="heading"
+          aria-level={3} // TODO: Consider making this dynamic based on nesting level or allowing it to be passed in as a prop for more flexibility.
+        >
+          {item.label}
+        </Text>
+      </Box>
+  );
+};

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/NavGroup.tsx

@@ -0,0 +1,33 @@
+import { Box } from 'grommet';
+import { NavItemWithLevel } from '../NavList';
+import { GroupHeading } from './GroupHeading';
+
+interface NavGroupProps {
+  item: NavItemWithLevel;
+  render: (item: NavItemWithLevel) => React.ReactNode;
+  defaultItemProps?: { [key: string]: any };
+}
+
+export const NavGroup = ({ item, render, defaultItemProps }: NavGroupProps) => {
+  const headerId = `${item.id}-heading`;
+
+  return (
+    <Box>
+      <GroupHeading id={headerId} item={item} />
+      <Box
+        role="group"
+        aria-labelledby={headerId}
+        border={{ side: 'bottom', color: 'border-weak' }}
+      >
+        {item.children?.map(child => (
+          <Box
+            key={child.id}
+            {...defaultItemProps}
+          >
+            {render(child)}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};

shared/aries-core/src/js/components/core/NavigationMenu/NavGroup/index.ts

@@ -0,0 +1 @@
+export * from './NavGroup';

shared/aries-core/src/js/components/core/NavigationMenu/NavItem/ItemLabel.tsx

@@ -1,28 +1,29 @@
 import React from 'react';
 import { Box, Text } from 'grommet';
 
-const labelColor = 'text-strong';
+const labelColor = 'text';
 interface ItemLabelProps {
   icon: React.ReactNode;
   label: string;
+  color?: string;
 }
 
-export const ItemLabel = ({ icon, label }: ItemLabelProps) => {
+export const ItemLabel = ({ icon, label, color = labelColor }: ItemLabelProps) => {
   const adjIcon = React.isValidElement(icon)
     ? React.cloneElement(icon as React.ReactElement<{ color?: string }>, {
-        color: labelColor,
+        color,
       })
     : icon;
 
   return (
     <Box direction="row" gap="xxsmall" flex>
-      <Box
-        pad={{ top: '5xsmall' }} // aligning icon with label text
+      {adjIcon && <Box
+        pad={{ top: '4xsmall' }} // aligning icon with label text
         flex={false}
       >
         {adjIcon}
-      </Box>
-      <Text color={labelColor}>{label}</Text>
+      </Box>}
+      <Text color={color}>{label}</Text>
     </Box>
   );
 };

shared/aries-core/src/js/components/core/NavigationMenu/NavItem/NavItem.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
 import { Button } from 'grommet';
 import { ItemContainer } from './ItemContainer';
 import { ItemLabel } from './ItemLabel';
 
 export type NavItemType = {
+  id?: string; // Added optional id for better key management
   label: string;
   url?: string;
   icon?: React.ReactNode;
   children?: NavItemType[];
+  type?: 'group' | 'item';
 };
 
 interface NavItemProps {
@@ -61,7 +62,7 @@ export const NavItem = ({
           ref={ref as any}
           {...(rest as any)}
         >
-          {({ hover }) => {
+          {({ hover, focus }) => {
             return (
               <ItemContainer
                 active={active as boolean | undefined}
@@ -71,6 +72,7 @@ export const NavItem = ({
                 <ItemLabel
                   icon={icon as React.ReactNode}
                   label={label as string}
+                  color={hover || focus || active ? 'text-strong' : 'text'}
                 />
                 {actions as React.ReactNode}
               </ItemContainer>