Simplify menu logic

src/App.tsx

@@ -2,7 +2,6 @@ import { lazy, Suspense } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ResumeProvider } from 'contexts/ResumeContext';
-import { MenuProvider } from 'contexts/MenuContext';
 import LoadingView from 'views/LoadingView';
 import ErrorView from 'views/ErrorView';
 
@@ -24,9 +23,7 @@ export function App() {
       <Suspense fallback={<LoadingView />}>
         <QueryClientProvider client={queryClient}>
           <ResumeProvider>
-            <MenuProvider>
-              <CurriculumVitae />
-            </MenuProvider>
+            <CurriculumVitae />
           </ResumeProvider>
         </QueryClientProvider>
       </Suspense>

src/hooks/useMenu.ts

@@ -3,7 +3,12 @@ import twConfig from '~/tailwind.config.js';
 
 const BP = Number.parseInt(twConfig.theme.screens.sm);
 
-export default function useMenu() {
+export type MenuState = {
+  isOpen: boolean;
+  toggleOpen: VoidFunction;
+};
+
+export default function useMenu(): MenuState {
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {

src/layouts/CVLayout.tsx

@@ -1,9 +1,9 @@
-import { PropsWithChildren, useContext } from 'react';
-import { MenuContext } from 'contexts/MenuContext';
+import { PropsWithChildren } from 'react';
 import MenuWidget from 'widgets/MenuWidget';
 import CVFooter from 'layouts/CVFooter';
 import CVMeta from 'layouts/CVMeta';
 import type { CVMetaProps } from 'layouts/CVMeta';
+import useMenu from 'hooks/useMenu';
 
 export type CVLayoutProps = PropsWithChildren<{
   meta: CVMetaProps;
@@ -12,28 +12,35 @@ export type CVLayoutProps = PropsWithChildren<{
 }>;
 
 export default function CVLayout({ meta, top, left, children }: CVLayoutProps) {
-  const { menuStyle, restStyle } = useContext(MenuContext);
+  const { isOpen, toggleOpen } = useMenu();
+
+  const menuStyle: React.CSSProperties = isOpen
+    ? {
+        display: 'block',
+        paddingTop: '5rem',
+      }
+    : {};
 
   return (
     <>
       <CVMeta {...meta} />
-      <MenuWidget />
+      <MenuWidget isOpen={isOpen} toggleOpen={toggleOpen} />
       <div className="min-h-screen w-full">
         <main className="container mx-auto px-6 pb-60 sm:px-0">
           <div
             className="border-b-2 border-dashed border-gray-400 py-6 sm:py-8"
-            style={restStyle}
+            hidden={isOpen}
           >
             {top}
           </div>
-          <div className="flex flex-col pt-6 sm:flex-row">
+          <div className="flex flex-row pt-6">
             <aside
               className="hidden w-full space-y-8 pe-2 font-light sm:block sm:w-60 sm:text-sm"
               style={menuStyle}
             >
               {left}
             </aside>
-            <div className="w-full space-y-10" style={restStyle}>
+            <div className="w-full space-y-10" hidden={isOpen}>
               {children}
               <CVFooter />
             </div>

src/widgets/MenuWidget.tsx

@@ -1,15 +1,13 @@
-import { useContext } from 'react';
-import { faBars, faClose } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { MenuContext } from 'contexts/MenuContext';
+import { faBars, faClose } from '@fortawesome/free-solid-svg-icons';
+import { MenuState } from 'hooks/useMenu';
 
 export const icons = {
   open: faBars,
   close: faClose,
 };
 
-export default function MenuWidget() {
-  const { isOpen, toggleOpen } = useContext(MenuContext);
+export default function MenuWidget({ isOpen, toggleOpen }: MenuState) {
   const icon = isOpen ? icons.close : icons.open;
 
   return (

src/widgets/__tests__/MenuWidget.test.tsx

@@ -1,15 +1,12 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, renderHook, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MenuProvider } from 'contexts/MenuContext';
 import MenuWidget, { icons } from '../MenuWidget';
+import useMenu from 'hooks/useMenu';
 
 describe('<MenuWidget />', () => {
   test('should handle open/close state', async () => {
-    render(
-      <MenuProvider>
-        <MenuWidget />
-      </MenuProvider>,
-    );
+    const { result } = renderHook(useMenu);
+    const { rerender } = render(<MenuWidget {...result.current} />);
 
     const button = screen.getByRole('button');
     const icon = button.querySelector('svg');
@@ -20,11 +17,17 @@ describe('<MenuWidget />', () => {
     expect(icon).toHaveAttribute('data-icon', icons.open.iconName);
 
     // Click to open
-    await userEvent.click(button);
+    await act(async () => {
+      await userEvent.click(button);
+    });
+    rerender(<MenuWidget {...result.current} />);
     expect(icon).toHaveAttribute('data-icon', icons.close.iconName);
 
     // Click to close
-    await userEvent.click(button);
+    await act(async () => {
+      await userEvent.click(button);
+    });
+    rerender(<MenuWidget {...result.current} />);
     expect(icon).toHaveAttribute('data-icon', icons.open.iconName);
   });
 });