From 11577aa15766072913c721cff741ca5ed6f02c9b Mon Sep 17 00:00:00 2001 From: katiegoines Date: Tue, 23 Jul 2024 12:54:29 -0700 Subject: [PATCH 1/9] mobile toc styling --- src/components/Layout/Layout.tsx | 4 ++ src/components/Layout/LayoutHeader.tsx | 65 +++++++++++++++++++++++- src/components/Layout/LayoutProvider.tsx | 6 ++- src/styles/layout.scss | 12 +++++ 4 files changed, 85 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 4b73cc128cc..045a7089d45 100644 --- a/src/components/Layout/Layout.tsx +++ b/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('system'); const [tocHeadings, setTocHeadings] = useState([]); 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} > { const { menuOpen, toggleMenuOpen } = useContext(LayoutContext); const menuButtonRef = useRef(null); const sidebarMenuButtonRef = useRef(null); + const { tocOpen, toggleTocOpen } = useContext(LayoutContext); + const tocButtonRef = useRef(null); + const sidebarTocButtonRef = useRef(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 + + + + {/* toc */} + + + toggleTocOpen(false)} + > + +
+ +
+ + ); }; diff --git a/src/components/Layout/LayoutProvider.tsx b/src/components/Layout/LayoutProvider.tsx index 6d820d25700..586ba095a28 100644 --- a/src/components/Layout/LayoutProvider.tsx +++ b/src/components/Layout/LayoutProvider.tsx @@ -5,14 +5,18 @@ type LayoutContextType = { colorMode: ColorMode; handleColorModeChange: (value: ColorMode) => ColorMode; menuOpen: boolean; + tocOpen: boolean; toggleMenuOpen: Dispatch>; + toggleTocOpen: Dispatch>; }; export const LayoutContext = createContext({ colorMode: 'system', handleColorModeChange: (value) => value, menuOpen: false, - toggleMenuOpen: () => {} + tocOpen: false, + toggleMenuOpen: () => {}, + toggleTocOpen: () => {} }); export function LayoutProvider({ value, children }) { diff --git a/src/styles/layout.scss b/src/styles/layout.scss index e992100a51d..438399b11a3 100644 --- a/src/styles/layout.scss +++ b/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; From 6487e5c4dc30d134227e854bd74617aaee6f250a Mon Sep 17 00:00:00 2001 From: katiegoines Date: Wed, 24 Jul 2024 14:20:46 -0700 Subject: [PATCH 2/9] add mobile toc menu --- src/components/Layout/Layout.tsx | 2 - src/components/Layout/LayoutHeader.tsx | 89 ++++++++++++++------------ src/styles/layout.scss | 20 +++++- 3 files changed, 67 insertions(+), 44 deletions(-) diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 045a7089d45..6da90d90379 100644 --- a/src/components/Layout/Layout.tsx +++ b/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 && } - {showTOC ? : null}