fix(s2-docs): auto-scroll and expand section for group selected nav link (adobe#9664)

* fix(s2-docs): auto-scroll and expand section for group selected nav link

* refactor(s2-docs): utilize scrollIntoViewport with added behavior and alignment options

* refactor(s2-docs): remove redundant type annotation and verbose boolean comparison

* fix: remove behavior option

* go back to native scroll into view

---------

Co-authored-by: Robert Snow <snowystinger@gmail.com>

Author: domhhv

packages/dev/s2-docs/src/Nav.tsx

@@ -188,7 +188,7 @@ export function Nav() {
           );
         }
         return (
-          <Disclosure id={name} key={name} isQuiet density="spacious" defaultExpanded={name === 'Components' || name === currentPage.exports?.section} styles={style({minWidth: 185})}>
+          <Disclosure id={name} key={name} isQuiet density="spacious" defaultExpanded={name === 'Components' || name === currentPage.exports?.section || name === currentPage.exports?.group} styles={style({minWidth: 185})}>
             <DisclosureTitle>{name}</DisclosureTitle>
             <DisclosurePanel>
               <div className={style({paddingStart: space(18)})}>{nav}</div>
@@ -255,10 +255,19 @@ export function SideNavItem(props) {
 }
 
 export function SideNavLink(props) {
-  let linkRef = useRef(null);
+  let linkRef = useRef<HTMLAnchorElement | null>(null);
   let selected = useContext(SideNavContext);
   let {isExternal, ...linkProps} = props;
-  
+
+  useEffect(() => {
+    let link = linkRef.current;
+    if (!link || !props.isSelected) {
+      return;
+    }
+
+    link.scrollIntoView({block: 'start', behavior: 'smooth'});
+  }, [props.isSelected]);
+
   return (
     <BaseLink
       {...linkProps}
@@ -283,7 +292,8 @@ export function SideNavLink(props) {
         },
         textDecoration: 'none',
         borderRadius: 'default',
-        transition: 'default'
+        transition: 'default',
+        scrollMarginTop: 64
       })}>
       {(renderProps) => (<>
         <span