Update navlist for MiniTocs (#30167)

* update navlist

* fix tests

* update to component

* update platform

* update key

* fix platform tool picker issue

* add key

* remove unnecessary key

* fix test

* update styling

* fix indented test

* Update components/ui/MiniTocs/MiniTocs.tsx

Co-authored-by: Peter Bengtsson <peterbe@github.com>

* remove null

Co-authored-by: Peter Bengtsson <peterbe@github.com>

components/ui/MiniTocs/MiniTocs.tsx

@@ -1,43 +1,43 @@
+import React from 'react'
+import { Heading, NavList } from '@primer/react'
 import cx from 'classnames'
-import { ActionList, Heading } from '@primer/react'
 
-import type { MiniTocItem } from 'components/context/ArticleContext'
+import { MiniTocItem } from 'components/context/ArticleContext'
 import { Link } from 'components/Link'
 import { useTranslation } from 'components/hooks/useTranslation'
 
+import styles from './Minitocs.module.scss'
+
 export type MiniTocsPropsT = {
   pageTitle: string
   miniTocItems: MiniTocItem[]
 }
 
-const renderTocItem = (item: MiniTocItem) => {
+function RenderTocItem(item: MiniTocItem) {
   return (
-    <ActionList.Item
-      as="li"
-      key={item.contents.href}
-      className={item.platform}
-      sx={{
-        listStyle: 'none',
-        padding: '2px',
-        ':hover': {
-          bg: 'var(--color-canvas-inset) !important',
-        },
-        'ul > li': {
-          ':hover': {
-            bg: 'var(--color-neutral-subtle) !important',
-          },
-        },
-      }}
-    >
-      <div className={cx('lh-condensed d-block width-full')}>
-        <a className="d-block width-auto" href={item.contents.href}>
-          {item.contents.title}
-        </a>
-        {item.items && item.items.length > 0 ? (
-          <ul className="ml-3">{item.items.map(renderTocItem)}</ul>
-        ) : null}
-      </div>
-    </ActionList.Item>
+    <div className={cx(styles.nested, item.platform)}>
+      <NavList.Item
+        href={item.contents.href}
+        sx={{
+          padding: '4px 0 4px 0',
+          marginLeft: '7px',
+        }}
+      >
+        {item.contents.title}
+      </NavList.Item>
+      {item.items && item.items.length > 0 && (
+        <ul className={cx(styles.indentNested)}>
+          {item.items.map((toc) => (
+            <RenderTocItem
+              key={toc.contents.href}
+              contents={toc.contents}
+              items={toc.items}
+              platform={toc.platform}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
   )
 }
 
@@ -46,17 +46,22 @@ export function MiniTocs({ pageTitle, miniTocItems }: MiniTocsPropsT) {
 
   return (
     <>
-      <Heading as="h2" id="in-this-article" className="mb-1" sx={{ fontSize: 1 }}>
+      <Heading as="h2" id="in-this-article" className="mb-1 ml-3" sx={{ fontSize: 1 }}>
         <Link href="#in-this-article">{t('miniToc')}</Link>
       </Heading>
 
-      <ActionList variant="full" className="my-2" key={pageTitle} as="div">
-        <div>
-          {miniTocItems.map((items, i) => {
-            return <ul key={pageTitle + i}>{renderTocItem(items)}</ul>
-          })}
-        </div>
-      </ActionList>
+      <NavList className="my-2" key={pageTitle}>
+        {miniTocItems.map((items, i) => {
+          return (
+            <RenderTocItem
+              key={items.contents.href + i}
+              contents={items.contents}
+              items={items.items}
+              platform={items.platform}
+            />
+          )
+        })}
+      </NavList>
     </>
   )
 }

components/ui/MiniTocs/Minitocs.module.scss

@@ -0,0 +1,12 @@
+.indentNested {
+  padding-inline-start: 0;
+}
+
+.nested {
+  div ul div li {
+    padding-left: 4em;
+  }
+  div li {
+    padding-left: 2em;
+  }
+}