mobile toc styling

Author: katiegoines

src/components/Layout/Layout.tsx

@@ -61,6 +61,7 @@ export const Layout = ({
   useCustomTitle?: boolean;
 }) => {
   const [menuOpen, toggleMenuOpen] = useState(false);
+  const [tocOpen, toggleTocOpen] = useState(false);
   const [colorMode, setColorMode] = useState<ColorMode>('system');
   const [tocHeadings, setTocHeadings] = useState<HeadingInterface[]>([]);
   const mainId = 'pageMain';
@@ -213,7 +214,9 @@ export const Layout = ({
         value={{
           colorMode,
           menuOpen,
+          tocOpen,
           toggleMenuOpen,
+          toggleTocOpen,
           handleColorModeChange
         }}
       >
@@ -247,6 +250,7 @@ export const Layout = ({
                 currentPlatform={currentPlatform}
                 pageType={pageType}
                 showLastUpdatedDate={showLastUpdatedDate}
+                tocHeadings={tocHeadings}
               ></LayoutHeader>
               <View key={asPathWithNoHash} className="layout-main">
                 <Flex

src/components/Layout/LayoutHeader.tsx

@@ -19,23 +19,29 @@ import { PageLastUpdated } from '../PageLastUpdated';
 import Feedback from '../Feedback';
 import RepoActions from '../Menu/RepoActions';
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
+import { TableOfContents } from '../TableOfContents';
 
 export const LayoutHeader = ({
   currentPlatform,
   isGen1,
   pageType = 'inner',
   showLastUpdatedDate = true,
-  showTOC
+  showTOC,
+  tocHeadings
 }: {
   currentPlatform: Platform;
   isGen1: boolean;
   pageType?: 'home' | 'inner';
   showLastUpdatedDate: boolean;
   showTOC?: boolean;
+  tocHeadings;
 }) => {
   const { menuOpen, toggleMenuOpen } = useContext(LayoutContext);
   const menuButtonRef = useRef<HTMLButtonElement>(null);
   const sidebarMenuButtonRef = useRef<HTMLButtonElement>(null);
+  const { tocOpen, toggleTocOpen } = useContext(LayoutContext);
+  const tocButtonRef = useRef<HTMLButtonElement>(null);
+  const sidebarTocButtonRef = useRef<HTMLButtonElement>(null);
   const router = useRouter();
   const asPathWithNoHash = usePathWithoutHash();
 
@@ -51,6 +57,18 @@ export const LayoutHeader = ({
     }
   };
 
+  const handleTocToggle = () => {
+    if (!tocOpen) {
+      toggleTocOpen(true);
+      // For keyboard navigators, move focus to the close menu button in the nav
+      setTimeout(() => sidebarTocButtonRef?.current?.focus(), 0);
+    } else {
+      toggleTocOpen(false);
+      // For keyboard navigators, move focus back to menu button in header
+      tocButtonRef?.current?.focus();
+    }
+  };
+
   // Search result transform function that will strip out the pageMain anchor tag
   // Algolia search results include the anchor tag where the content was found but since we
   // are aggregating records this ends up always being the pageMain anchor tag which is the
@@ -78,6 +96,16 @@ export const LayoutHeader = ({
           Menu
         </Button>
 
+        <Button
+          onClick={() => handleTocToggle()}
+          size="small"
+          ref={tocButtonRef}
+          className="search-menu-toggle mobile-toggle"
+        >
+          <IconMenu aria-hidden="true" />
+          On this page
+        </Button>
+
         <View
           className={classNames(
             'layout-search__search',
@@ -149,6 +177,41 @@ export const LayoutHeader = ({
           </div>
         </View>
       </View>
+
+      {/* toc */}
+      <View
+        className={classNames('layout-sidebar', {
+          'layout-sidebar--expanded': tocOpen
+        })}
+      >
+        <Button
+          size="small"
+          colorTheme="overlay"
+          className={classNames('layout-sidebar__mobile-toggle', 'right-menu', {
+            'layout-sidebar__mobile-toggle--open': tocOpen
+          })}
+          ref={sidebarTocButtonRef}
+          onClick={() => handleTocToggle()}
+        >
+          <IconDoubleChevron />
+          <VisuallyHidden>Close table of contents</VisuallyHidden>
+        </Button>
+        <View
+          className={classNames('layout-sidebar__backdrop', {
+            'layout-sidebar__backdrop--expanded': tocOpen
+          })}
+          onClick={() => toggleTocOpen(false)}
+        ></View>
+        <View
+          className={classNames('layout-sidebar__inner', 'right-menu', {
+            'layout-sidebar__inner--expanded': tocOpen
+          })}
+        >
+          <div className="layout-sidebar-menu">
+            <TableOfContents headers={tocHeadings} />
+          </div>
+        </View>
+      </View>
     </View>
   );
 };

src/components/Layout/LayoutProvider.tsx

@@ -5,14 +5,18 @@ type LayoutContextType = {
   colorMode: ColorMode;
   handleColorModeChange: (value: ColorMode) => ColorMode;
   menuOpen: boolean;
+  tocOpen: boolean;
   toggleMenuOpen: Dispatch<SetStateAction<boolean>>;
+  toggleTocOpen: Dispatch<SetStateAction<boolean>>;
 };
 
 export const LayoutContext = createContext<LayoutContextType>({
   colorMode: 'system',
   handleColorModeChange: (value) => value,
   menuOpen: false,
-  toggleMenuOpen: () => {}
+  tocOpen: false,
+  toggleMenuOpen: () => {},
+  toggleTocOpen: () => {}
 });
 
 export function LayoutProvider({ value, children }) {

src/styles/layout.scss

@@ -64,6 +64,9 @@
   gap: var(--amplify-space-small);
   padding: var(--amplify-space-medium);
   opacity: 0;
+  &.right-menu {
+    transform: rotate(180deg);
+  }
   &:focus {
     box-shadow: none;
   }
@@ -86,6 +89,15 @@
   display: grid;
   grid-template-rows: auto 1fr;
   overflow: visible;
+
+  &.right-menu {
+    position: fixed;
+    right: 0;
+    transform: translate(100%, 0);
+    border-right: none;
+    border-left: 1px solid var(--amplify-colors-neutral-20);
+  }
+
   &--expanded {
     animation: menu 0.2s ease-out forwards;
     animation-delay: 0.1s;