website: update swizzled items

website/src/theme/DocSidebar/index.js

@@ -10,9 +10,10 @@ import {
   useThemeConfig,
   useAnnouncementBar,
   MobileSecondaryMenuFiller,
+  ThemeClassNames,
+  useScrollPosition,
 } from '@docusaurus/theme-common';
 import useWindowSize from '@theme/hooks/useWindowSize';
-import useScrollPosition from '@theme/hooks/useScrollPosition';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
@@ -21,14 +22,17 @@ import styles from './styles.module.css';
 import SidebarAd from '../../components/SidebarAd';
 
 function useShowAnnouncementBar() {
-  const {isClosed} = useAnnouncementBar();
-  const [showAnnouncementBar, setShowAnnouncementBar] = useState(!isClosed);
-  useScrollPosition(({scrollY}) => {
-    if (!isClosed) {
-      setShowAnnouncementBar(scrollY === 0);
-    }
-  });
-  return showAnnouncementBar;
+  const {isActive} = useAnnouncementBar();
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
+  useScrollPosition(
+    ({scrollY}) => {
+      if (isActive) {
+        setShowAnnouncementBar(scrollY === 0);
+      }
+    },
+    [isActive],
+  );
+  return isActive && showAnnouncementBar;
 }
 
 function HideableSidebarButton({onClick}) {
@@ -61,7 +65,6 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
     navbar: {hideOnScroll},
     hideableSidebar,
   } = useThemeConfig();
-  const {isClosed: isAnnouncementBarClosed} = useAnnouncementBar();
   return (
     <div
       className={clsx(styles.sidebar, {
@@ -71,11 +74,10 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <nav
         className={clsx('menu thin-scrollbar', styles.menu, {
-          [styles.menuWithAnnouncementBar]:
-            !isAnnouncementBarClosed && showAnnouncementBar,
+          [styles.menuWithAnnouncementBar]: showAnnouncementBar,
         })}>
-        <ul className="menu__list">
-          <DocSidebarItems items={sidebar} activePath={path} />
+        <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+          <DocSidebarItems items={sidebar} activePath={path} level={1} />
         </ul>
       </nav>
       {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
@@ -85,11 +87,12 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
 
 const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => {
   return (
-    <ul className="menu__list">
+    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
       <DocSidebarItems
         items={sidebar}
         activePath={path}
         onItemClick={() => toggleSidebar()}
+        level={1}
       />
       <div className="margin--md">
         <SidebarAd />

website/src/theme/DocSidebarItem/index.js

@@ -11,7 +11,9 @@ import {
   usePrevious,
   Collapsible,
   useCollapsible,
+  ThemeClassNames,
 } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/IconExternalLink';
 import styles from './styles.module.css';
@@ -74,8 +76,14 @@ function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
   }, [isActive, wasActive, collapsed]);
 }
 
-function DocSidebarItemCategory({item, onItemClick, activePath, ...props}) {
-  const {items, label, collapsible} = item;
+function DocSidebarItemCategory({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  ...props
+}) {
+  const {items, label, collapsible, className} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const {collapsed, setCollapsed, toggleCollapsed} = useCollapsible({
     // active categories are always initialized as expanded
@@ -95,9 +103,15 @@ function DocSidebarItemCategory({item, onItemClick, activePath, ...props}) {
   });
   return (
     <li
-      className={clsx('menu__list-item', {
-        'menu__list-item--collapsed': collapsed,
-      })}>
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemCategory,
+        ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
+        'menu__list-item',
+        {
+          'menu__list-item--collapsed': collapsed,
+        },
+        className,
+      )}>
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a
         className={clsx('menu__link', {
@@ -124,22 +138,34 @@ function DocSidebarItemCategory({item, onItemClick, activePath, ...props}) {
           tabIndex={collapsed ? -1 : 0}
           onItemClick={onItemClick}
           activePath={activePath}
+          level={level + 1}
         />
       </Collapsible>
     </li>
   );
 }
 
-function DocSidebarItemLink({item, onItemClick, activePath, ...props}) {
-  const {href, label} = item;
+function DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
+  const {href, label, className} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   return (
-    <li className="menu__list-item" key={label}>
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        'menu__list-item',
+        className,
+      )}
+      key={label}>
       <a
         className={clsx('menu__link', {
           'menu__link--active': isActive,
         })}
+        aria-current={isActive ? 'page' : undefined}
         href={href}
+        {...(isInternalUrl(href) && {
+          onClick: onItemClick,
+        })}
         {...props}>
         {isInternalUrl(href) ? (
           label

website/src/theme/TOC/index.js

@@ -6,50 +6,25 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import useTOCHighlight from '@theme/hooks/useTOCHighlight';
-import styles from './styles.module.css';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css'; // Using a custom className
 import SidebarAd from '../../components/SidebarAd';
+// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
 
-const LINK_CLASS_NAME = 'table-of-contents__link';
-const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
-const TOP_OFFSET = 100;
-/* eslint-disable jsx-a11y/control-has-associated-label */
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
-export function TOCHeadings({toc, isChild}) {
-  if (!toc.length) {
-    return null;
-  }
-
-  return (
-    <ul
-      className={
-        isChild ? '' : 'table-of-contents table-of-contents__left-border'
-      }>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`}
-            className={LINK_CLASS_NAME} // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: heading.value,
-            }}
-          />
-          <TOCHeadings isChild toc={heading.children} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function TOC({toc}) {
-  useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
+function TOC({className, ...props}) {
   return (
-    <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
       <div className="margin--md">
         <SidebarAd />
       </div>
-      <TOCHeadings toc={toc} />
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
     </div>
   );
 }

website/src/theme/TOC/styles.module.css

@@ -12,7 +12,7 @@
   top: calc(var(--ifm-navbar-height) + 1rem);
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .tableOfContents {
     display: none;
   }