docs(core): collapse concepts and recipes (#23246)

Collapse concepts and recipes top level sections

Also make sure that sidebar expands to the active link even if it is
multiple sections down

nx-dev/data-access-menu/src/lib/menu.utils.ts

@@ -1,5 +1,7 @@
 import { MenuItem, MenuSection } from '@nx/nx-dev/models-menu';
 
+const COLLAPSIBLE_SECTIONS = ['concepts', 'recipes'];
+
 export function getBasicNxSection(items: MenuItem[]): MenuSection {
   return {
     id: 'basic',
@@ -19,7 +21,9 @@ export function getBasicNxSection(items: MenuItem[]): MenuSection {
       .map((m) => {
         return {
           ...m,
-          disableCollapsible: !m.id.endsWith('tutorial'),
+          disableCollapsible: !COLLAPSIBLE_SECTIONS.some((collapsibleSection) =>
+            m.id.endsWith(collapsibleSection)
+          ),
         };
       }),
   };

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

@@ -109,7 +109,9 @@ function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
       </h5>
       <ul className={cx('mb-6 ml-3', collapsed ? 'hidden' : '')}>
         {(item.children as MenuItem[]).map((subItem, index) => {
-          const isActiveLink = subItem.path === withoutAnchors(router.asPath);
+          const isActiveLink = withoutAnchors(router.asPath).startsWith(
+            subItem.path
+          );
           if (isActiveLink && collapsed) {
             handleCollapseToggle();
           }