[Enterprise Search] Add nested sub navigation to SideNavLinks (#77685)

* Add subNav prop to SideNavLinks

- for nested navigation

* [Probably extra] Tweak CSS to allow for recursive subnesting

- while attempting to expand the hitbox area of nested links as much as possible

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.scss

@@ -72,4 +72,15 @@ $euiSizeML: $euiSize * 1.25; // 20px - between medium and large ¯\_(ツ)_/¯
       }
     }
   }
+
+  &__subNav {
+    padding-left: $euiSizeML;
+
+    // Extends the click area of links more to the left, so that second tiers
+    // of subnavigation links still have the same hitbox as first tier links
+    .enterpriseSearchNavLinks__item {
+      margin-left: -$euiSizeML;
+      padding-left: $euiSizeXXL;
+    }
+  }
 }

x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.test.tsx

@@ -89,4 +89,20 @@ describe('SideNavLink', () => {
     expect(wrapper.find('.testing')).toHaveLength(1);
     expect(wrapper.find('[data-test-subj="testing"]')).toHaveLength(1);
   });
+
+  it('renders nested subnavigation', () => {
+    const subNav = (
+      <SideNavLink to="/elsewhere" data-test-subj="subNav">
+        Another link!
+      </SideNavLink>
+    );
+    const wrapper = shallow(
+      <SideNavLink to="/" subNav={subNav}>
+        Link
+      </SideNavLink>
+    );
+
+    expect(wrapper.find('.enterpriseSearchNavLinks__subNav')).toHaveLength(1);
+    expect(wrapper.find('[data-test-subj="subNav"]')).toHaveLength(1);
+  });
 });

x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx

@@ -66,6 +66,7 @@ interface ISideNavLinkProps {
   isExternal?: boolean;
   className?: string;
   isRoot?: boolean;
+  subNav?: React.ReactNode;
 }
 
 export const SideNavLink: React.FC<ISideNavLinkProps> = ({
@@ -74,6 +75,7 @@ export const SideNavLink: React.FC<ISideNavLinkProps> = ({
   children,
   className,
   isRoot,
+  subNav,
   ...rest
 }) => {
   const { closeNavigation } = useContext(NavContext) as INavContext;
@@ -103,6 +105,7 @@ export const SideNavLink: React.FC<ISideNavLinkProps> = ({
           {children}
         </EuiLink>
       )}
+      {subNav && <ul className="enterpriseSearchNavLinks__subNav">{subNav}</ul>}
     </li>
   );
 };