changes re: heather

Author: katiegoines

src/components/Layout/Layout.tsx

@@ -274,7 +274,9 @@ export const Layout = ({
                   {children}
                   {showNextPrev && <NextPrevious />}
                 </Flex>
-                {showTOC ? <TableOfContents headers={tocHeadings} /> : null}
+                {showTOC ? (
+                  <TableOfContents headers={tocHeadings} forDesktop />
+                ) : null}
               </View>
               <Footer hasTOC={showTOC} />
             </View>

src/components/Layout/LayoutHeader.tsx

@@ -8,7 +8,7 @@ import {
   ALGOLIA_INDEX_NAME,
   ALGOLIA_APP_ID
 } from '../../constants/algolia';
-import { IconMenu, IconDoubleChevron } from '@/components/Icons';
+import { IconTOC, IconDoubleChevron } from '@/components/Icons';
 import { Menu } from '@/components/Menu';
 import { LayoutContext } from '@/components/Layout';
 import { PlatformNavigator } from '@/components/PlatformNavigator';
@@ -46,8 +46,8 @@ export const LayoutHeader = ({
   const router = useRouter();
   const asPathWithNoHash = usePathWithoutHash();
 
-  const handleMenuToggle = (menu) => {
-    if (menu === 'menu' && !menuOpen) {
+  const handleMenuToggle = () => {
+    if (!menuOpen) {
       toggleMenuOpen(true);
       // For keyboard navigators, move focus to the close menu button in the nav
       setTimeout(() => sidebarMenuButtonRef?.current?.focus(), 0);
@@ -56,8 +56,10 @@ export const LayoutHeader = ({
       // For keyboard navigators, move focus back to menu button in header
       menuButtonRef?.current?.focus();
     }
+  };
 
-    if (menu === 'toc' && !tocOpen) {
+  const handleTocToggle = () => {
+    if (!tocOpen) {
       toggleTocOpen(true);
       // For keyboard navigators, move focus to the close menu button in the nav
       setTimeout(() => sidebarTocButtonRef?.current?.focus(), 0);
@@ -86,22 +88,22 @@ export const LayoutHeader = ({
     <View as="header" className="layout-header">
       <Flex className={`layout-search layout-search--${pageType}`}>
         <Button
-          onClick={() => handleMenuToggle('menu')}
+          onClick={() => handleMenuToggle()}
           size="small"
           ref={menuButtonRef}
           className="search-menu-toggle mobile-toggle"
         >
-          <IconMenu aria-hidden="true" />
+          <IconTOC aria-hidden="true" />
           Menu
         </Button>
         {showTOC ? (
           <Button
-            onClick={() => handleMenuToggle('toc')}
+            onClick={() => handleTocToggle()}
             size="small"
             ref={tocButtonRef}
             className="search-menu-toggle mobile-toggle"
           >
-            <IconMenu aria-hidden="true" />
+            <IconTOC aria-hidden="true" />
             On this page
           </Button>
         ) : null}
@@ -152,7 +154,7 @@ export const LayoutHeader = ({
               'layout-sidebar__mobile-toggle--open': menuOpen
             })}
             ref={sidebarMenuButtonRef}
-            onClick={() => handleMenuToggle('menu')}
+            onClick={() => handleMenuToggle()}
           >
             <IconDoubleChevron />
             <VisuallyHidden>Close menu</VisuallyHidden>
@@ -176,7 +178,6 @@ export const LayoutHeader = ({
             )}
           </div>
         </View>
-        {showTOC ? <div className=""></div> : null}
       </View>
 
       {showTOC ? (
@@ -207,13 +208,13 @@ export const LayoutHeader = ({
                 }
               )}
               ref={sidebarTocButtonRef}
-              onClick={() => handleMenuToggle('toc')}
+              onClick={() => handleTocToggle()}
             >
               <IconDoubleChevron />
               <VisuallyHidden>Close table of contents</VisuallyHidden>
             </Button>
             <div className="layout-sidebar-menu">
-              <TableOfContents headers={tocHeadings} />
+              <TableOfContents headers={tocHeadings} forDesktop={false} />
             </div>
           </View>
         </View>

src/components/TableOfContents/TableOfContents.tsx

@@ -9,9 +9,10 @@ export interface HeadingInterface {
 }
 interface TableOfContents {
   headers?: HeadingInterface[];
+  forDesktop?: boolean;
 }
 
-export const TableOfContents = ({ headers }) => {
+export const TableOfContents = ({ headers, forDesktop }) => {
   const { tocOpen, toggleTocOpen } = useContext(LayoutContext);
 
   const onLinkClick = () => {
@@ -21,8 +22,14 @@ export const TableOfContents = ({ headers }) => {
     }
   };
 
+  const hideOnMobile = forDesktop ? 'desktop-toc' : '';
+
   return (
-    <Flex as="nav" className="toc" aria-labelledby="tocHeader">
+    <Flex
+      as="nav"
+      className={`toc ${hideOnMobile}`}
+      aria-labelledby="tocHeader"
+    >
       {headers ? (
         <Heading level={2} id="tocHeader" className="toc-header">
           <IconTOC /> On this page

src/styles/layout.scss

@@ -228,7 +228,7 @@
   }
 }
 
-@media (min-width: 1360px) {
+@media (min-width: $mq-mobile) {
   .main--toc {
     margin-inline-end: var(--layout-toc-width);
   }

src/styles/toc.scss

@@ -3,6 +3,17 @@
   margin-top: var(--amplify-space-large);
   padding-block: var(--amplify-space-large);
   border-top: 1px solid var(--amplify-colors-neutral-20);
+
+  &.desktop-toc {
+    @media (max-width: $mq-mobile) {
+      display: none;
+    }
+  }
+
+  @media (min-width: $mq-mobile) {
+    margin-top: inherit;
+    border-top: inherit;
+  }
 }
 .toc-header {
   font-size: var(--amplify-font-sizes-medium);
@@ -12,6 +23,10 @@
   align-items: center;
   gap: var(--amplify-space-xxs);
   color: var(--amplify-colors-font-tertiary);
+
+  @media (max-width: $mq-mobile) {
+    padding: var(--amplify-space-xs) var(--amplify-space-large);
+  }
 }
 .toc-list {
   margin: 0;
@@ -27,6 +42,10 @@
     text-decoration: none;
     line-height: var(--amplify-line-heights-small);
     margin-block: var(--amplify-space-xs);
+
+    @media (max-width: $mq-mobile) {
+      padding: var(--amplify-space-xs) var(--amplify-space-large);
+    }
     &:visited {
       color: var(--amplify-colors-font-primary);
     }