Add basic tab selection

mongodb · Dec 18, 2024 · 73cb1db · 73cb1db
1 parent b00fed8
commit 73cb1db
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/components/UnifiedSidenav/UnifiedSidenav.js b/src/components/UnifiedSidenav/UnifiedSidenav.js
@@ -22,7 +22,10 @@ const caretStyle = css`
   min-width: 16px;
 `;
 
-function CollapsibleNavItem({ items, label, level = 1 }) {
+function isSelectedTab(slug) {
+  return window.location.pathname === `${slug}/`;
+}
+function CollapsibleNavItem({ items, label, url, level = 1 }) {
   const [isOpen, setIsOpen] = useState(false);
   const iconType = isOpen ? 'CaretDown' : 'CaretRight';
 
@@ -31,11 +34,18 @@ function CollapsibleNavItem({ items, label, level = 1 }) {
     setIsOpen(!isOpen);
   };
 
+  console.log();
   return (
     <>
-      <SideNavItem as="a" className={cx(sideNavItemTOCStyling({ level }))} onClick={() => setIsOpen(!isOpen)}>
+      <SideNavItem
+        hideExternalIcon={true}
+        as="a"
+        active={isSelectedTab(url)}
+        className={cx(sideNavItemTOCStyling({ level }))}
+        onClick={() => setIsOpen(!isOpen)}
+      >
         <Icon className={cx(caretStyle)} glyph={iconType} fill={palette.gray.base} onClick={onCaretClick} />
-        <FormatTitle style={{ '--margin-left': '21px' }}>{label}</FormatTitle>
+        <FormatTitle style={{ '--margin-left': '3px' }}>{label}</FormatTitle>
       </SideNavItem>
       {isOpen && items.map((item) => <UnifiedTocNavItem {...item} level={level + 1} />)}
     </>
@@ -56,11 +66,19 @@ function UnifiedTocNavItem({ label, group, url, collapsible, items, level = 1 })
 
   // collapsible is for items that have nested links
   if (collapsible) {
-    return <CollapsibleNavItem items={items} label={label} className={cx(sideNavItemTOCStyling({ level }))} />;
+    return (
+      <CollapsibleNavItem items={items} label={label} url={url} className={cx(sideNavItemTOCStyling({ level }))} />
+    );
   }
 
   return (
-    <SideNavItem aria-label={label} as={Link} to={url} className={cx(sideNavItemTOCStyling({ level }))}>
+    <SideNavItem
+      active={isSelectedTab(url)}
+      aria-label={label}
+      as={Link}
+      to={url}
+      className={cx(sideNavItemTOCStyling({ level }))}
+    >
       {label}
     </SideNavItem>
   );

diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -119,7 +119,7 @@ const DefaultLayout = ({ children, data: { page }, pageContext: { slug, repoBran
         <GlobalGrid isInPresentationMode={isInPresentationMode}>
           {!isInPresentationMode ? <Header eol={eol} template={template} /> : <div />}
           {isUnifiedToc ? (
-            <UnifiedSidenav />
+            <UnifiedSidenav slug={slug} />
           ) : sidenav && !isInPresentationMode ? (
             <Sidenav
               chapters={chapters}