Adjust menu item spacing and highlighting, scroll to active menu item on page load

apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx

@@ -22,7 +22,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
     icon?: string
   }) => {
     return (
-      <li key={id} className="function-link-item text-scale-1000">
+      <li key={id} className="function-link-item text-scale-1000 leading-3">
         <Link href={`#${id}`} passHref>
           <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
             {icon && <img className="w-3" src={`${router.basePath}${icon}`} />}

apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx

@@ -2,7 +2,7 @@ import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { IconChevronLeft } from '~/../../packages/ui'
 import * as Accordion from '@radix-ui/react-accordion'
 
@@ -43,6 +43,8 @@ const HeaderLink = React.memo(function HeaderLink(props: {
 const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) {
   const router = useRouter()
   const { isDarkMode } = useTheme()
+  const activeItem = props.subItem.url === router.pathname
+  const activeItemRef = useRef(null)
 
   const LinkContainer = (props) => {
     return (
@@ -52,6 +54,15 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
     )
   }
 
+  useEffect(() => {
+    // scroll to active item
+    if (activeItem && activeItemRef.current) {
+      // this is a hack, but seems a common one on Stackoverflow
+      setTimeout(() => {
+        activeItemRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      }, 0)
+    }
+  })
   return (
     <>
       {props.subItemIndex === 0 && (
@@ -63,15 +74,15 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
         </>
       )}
       <Accordion.Item key={props.subItem.label} value={props.subItem.url}>
-        <li key={props.subItem.name}>
+        <li key={props.subItem.name} ref={activeItem ? activeItemRef : null}>
           <LinkContainer
             url={props.subItem.url}
             className={[
               'flex items-center gap-2',
               'cursor-pointer transition text-sm',
-              props.subItem.url === router.pathname
-                ? 'text-brand-900'
-                : 'hover:text-brand-900 text-scale-1000',
+              activeItem
+                ? 'text-brand-900 font-medium'
+                : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
             ].join(' ')}
             parent={props.subItem.parent}
           >
@@ -120,14 +131,14 @@ const ContentLink = React.memo(function ContentLink(props: any) {
   const router = useRouter()
 
   return (
-    <li>
+    <li className="mb-1.5">
       <Link href={`${props.url}`} passHref>
         <a
           className={[
             'cursor-pointer transition text-sm',
             props.url === router.pathname
               ? 'text-brand-900'
-              : 'hover:text-brand-900 text-scale-1000',
+              : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
           ].join(' ')}
         >
           {props.icon && (
@@ -179,15 +190,17 @@ const Content = (props) => {
         return (
           <div key={x.name}>
             {x.items && x.items.length > 0 ? (
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col gap-2.5">
                 {x.items.map((subItem, subItemIndex) => {
                   return (
-                    <ContentAccordionLink
-                      key={subItem.name}
-                      subItem={subItem}
-                      subItemIndex={subItemIndex}
-                      parent={x}
-                    />
+                    <>
+                      <ContentAccordionLink
+                        key={subItem.name}
+                        subItem={subItem}
+                        subItemIndex={subItemIndex}
+                        parent={x}
+                      />
+                    </>
                   )
                 })}
               </div>

apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx

@@ -1,7 +1,7 @@
 import * as Accordion from '@radix-ui/react-accordion'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { IconChevronLeft } from 'ui'
+import { IconChevronLeft, IconChevronUp } from 'ui'
 import * as NavItems from './NavigationMenu.constants'
 
 import { find } from 'lodash'
@@ -15,6 +15,7 @@ import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
 import React, { Fragment } from 'react'
 import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers'
 import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils'
+import { cn } from 'ui/src/utils/cn'
 
 const HeaderImage = React.memo(function HeaderImage(props: any) {
   const router = useRouter()
@@ -31,8 +32,6 @@ const HeaderImage = React.memo(function HeaderImage(props: any) {
 })
 
 const HeaderLink = React.memo(function HeaderLink(props: any) {
-  const router = useRouter()
-
   return (
     <span className={['text-base text-brand-1200 ', !props.title && 'capitalize'].join(' ')}>
       {props.title ?? props.id}
@@ -46,6 +45,8 @@ const FunctionLink = React.memo(function FunctionLink({
   icon,
   library,
   slug,
+  isParent = false,
+  isSubItem = false,
 }: {
   title: string
   name?: string
@@ -54,6 +55,8 @@ const FunctionLink = React.memo(function FunctionLink({
   product?: string
   library: string
   slug: string
+  isParent: boolean
+  isSubItem: boolean
 }) {
   const router = useRouter()
   const activeAccordianItem = useMenuActiveRefId()
@@ -70,16 +73,29 @@ const FunctionLink = React.memo(function FunctionLink({
 
   const active = activeAccordianItem === id
   return (
-    <li key={id} className="function-link-item">
+    <li key={id} className="function-link-item leading-5">
       <Link href={`/reference/${library}/${version ? version + '/' : ''}${slug}`} passHref>
         <a
-          className={[
-            'cursor-pointer transition text-sm hover:text-brand-900 flex gap-3',
-            active ? 'text-brand-900' : 'text-scale-1000',
-          ].join(' ')}
+          className={cn(
+            'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
+            isParent ? 'flex justify-between' : 'leading-3',
+            active ? 'text-brand-900' : 'text-scale-1000'
+          )}
         >
           {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
           {title}
+          {active && !isSubItem && (
+            <div
+              aria-hidden="true"
+              className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
+            ></div>
+          )}
+          {isParent && (
+            <IconChevronUp
+              width={16}
+              className="data-open-parent:rotate-0 data-closed-parent:rotate-90 transition"
+            />
+          )}
         </a>
       </Link>
     </li>
@@ -121,26 +137,37 @@ const RenderLink = React.memo(function RenderLink(props: any) {
       value={active ? props.id : ''}
     >
       <Accordion.Item key={props.id + '-accordian-item'} value={props.id}>
-        <FunctionLink library={props.lib} title={props.title} id={props.id} slug={props.slug} />
-        <Accordion.Content
-          key={props.id + '-sub-items-accordion-container'}
-          className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2"
-        >
-          {props.items &&
-            props.items
-              .filter((item) => props.allowedKeys.includes(item.id))
-              .map((item) => {
-                return (
-                  <FunctionLink
-                    key={item.title}
-                    library={props.lib}
-                    title={item.title}
-                    id={item.id}
-                    slug={item.slug}
-                  />
-                )
-              })}
-        </Accordion.Content>
+        <FunctionLink
+          library={props.lib}
+          title={props.title}
+          id={props.id}
+          slug={props.slug}
+          isParent={props.items}
+          isSubItem={true}
+        />
+        {props.items && (
+          <Accordion.Content
+            key={props.id + '-sub-items-accordion-container'}
+            className="transition data-open:animate-slide-down data-closed:animate-slide-up border-l border-scale-600 pl-3 ml-1 data-open:mt-2 grid gap-2.5"
+          >
+            {props.items &&
+              props.items
+                .filter((item) => props.allowedKeys.includes(item.id))
+                .map((item) => {
+                  return (
+                    <FunctionLink
+                      key={item.title}
+                      library={props.lib}
+                      title={item.title}
+                      id={item.id}
+                      slug={item.slug}
+                      isParent={false}
+                      isSubItem={false}
+                    />
+                  )
+                })}
+          </Accordion.Content>
+        )}
       </Accordion.Item>
     </Accordion.Root>
   )
@@ -244,7 +271,7 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
         <RevVersionDropdown />
       </div>
 
-      <ul className="function-link-list flex flex-col gap-1">
+      <ul className="function-link-list flex flex-col gap-2">
         {sections.map((fn: any, fnIndex) => {
           // run allow check
           if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {