add mobile toc menu

Author: katiegoines

src/components/Layout/Layout.tsx

@@ -24,7 +24,6 @@ import {
 import { SpaceShip } from '@/components/SpaceShip';
 import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
 import { LayoutProvider, LayoutHeader } from '@/components/Layout';
-import { TableOfContents } from '@/components/TableOfContents';
 import type { HeadingInterface } from '@/components/TableOfContents/TableOfContents';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { debounce } from '@/utils/debounce';
@@ -272,7 +271,6 @@ export const Layout = ({
                   {children}
                   {showNextPrev && <NextPrevious />}
                 </Flex>
-                {showTOC ? <TableOfContents headers={tocHeadings} /> : null}
               </View>
               <Footer hasTOC={showTOC} />
             </View>

src/components/Layout/LayoutHeader.tsx

@@ -95,16 +95,17 @@ export const LayoutHeader = ({
           <IconMenu aria-hidden="true" />
           Menu
         </Button>
-
-        <Button
-          onClick={() => handleTocToggle()}
-          size="small"
-          ref={tocButtonRef}
-          className="search-menu-toggle mobile-toggle"
-        >
-          <IconMenu aria-hidden="true" />
-          On this page
-        </Button>
+        {showTOC ? (
+          <Button
+            onClick={() => handleTocToggle()}
+            size="small"
+            ref={tocButtonRef}
+            className="search-menu-toggle mobile-toggle"
+          >
+            <IconMenu aria-hidden="true" />
+            On this page
+          </Button>
+        ) : null}
 
         <View
           className={classNames(
@@ -176,42 +177,50 @@ export const LayoutHeader = ({
             )}
           </div>
         </View>
+        <div className="">
+          {showTOC ? <TableOfContents headers={tocHeadings} /> : null}
+        </div>
       </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>
+      {showTOC ? (
         <View
-          className={classNames('layout-sidebar__inner', 'right-menu', {
-            'layout-sidebar__inner--expanded': tocOpen
+          className={classNames('layout-sidebar', 'right-menu', {
+            'layout-sidebar--expanded': tocOpen
           })}
         >
-          <div className="layout-sidebar-menu">
-            <TableOfContents headers={tocHeadings} />
-          </div>
+          <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-right': 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>
+            <div className="layout-sidebar-menu">
+              <TableOfContents headers={tocHeadings} />
+            </div>
+          </View>
         </View>
-      </View>
+      ) : null}
     </View>
   );
 };

src/styles/layout.scss

@@ -66,6 +66,8 @@
   opacity: 0;
   &.right-menu {
     transform: rotate(180deg);
+    inset-inline-start: unset;
+    inset-inline-end: var(--layout-sidebar-width);
   }
   &:focus {
     box-shadow: none;
@@ -99,7 +101,12 @@
   }
 
   &--expanded {
-    animation: menu 0.2s ease-out forwards;
+    animation: menuLeft 0.2s ease-out forwards;
+    animation-delay: 0.1s;
+  }
+
+  &--expanded-right {
+    animation: menuRight 0.2s ease-out forwards;
     animation-delay: 0.1s;
   }
 }
@@ -151,7 +158,7 @@
   z-index: 1;
 }
 
-@keyframes menu {
+@keyframes menuLeft {
   0% {
     transform: translate(-100%, 0);
   }
@@ -169,6 +176,15 @@
   }
 }
 
+@keyframes menuRight {
+  0% {
+    transform: translate(100%, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
 @media (min-width: $mq-mobile) {
   .search-menu-toggle {
     display: none;