MM-112-menuoptions: display menu items on/off when hamburger is clicked

src/App.test.tsx

@@ -3,7 +3,8 @@ import { render, screen, fireEvent  } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import App from './App';
 import "@testing-library/jest-dom";
-import Hamburger from './Hamburgerbutton';
+import Hamburger from './Header/Hamburgerbutton';
+import Menu from './Header/Menu';
 
 // remove this test when real tests are added
 test('renders header', () => {
@@ -12,13 +13,40 @@ test('renders header', () => {
     expect(header[0]).toBeInTheDocument();
   });
 
-test('calls onClick when Hamburger button is clicked', () => {
-    const handleClick = jest.fn();
-    render(<Hamburger onClick={handleClick} label="Click Me" />);
-
-    const button = screen.getByText('Click Me');
-    fireEvent.click(button);
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
+// test('calls onClick when Hamburger button is clicked', () => {
+//     const handleClick = jest.fn();
+//     render(<Hamburger label="Click Me" />);
+//     const button = screen.getByText('Click Me');
+//     fireEvent.click(button);
+//     expect(handleClick).towHaveBeenCalledTimes(1);;
+//   });
+
+//   test('test for hamburger menu options ', () => {
+//     const handleClick = jest.fn();
+//     render(<Hamburger label="Click Me" />);
+//     const button = screen.getByText('Click Me');
+//     fireEvent.click(button);
+//     const menuitem = screen.getByText('Your Acheivements');
+//     expect(menuitem).toBeInTheDocument();
+//   });
+
+test('should toggle menu on button click', () => {
+  render(<Hamburger />);
+
+  const button = screen.getByTestId('toggle-button');
+  const menu = screen.queryByTestId('data-testid');
+
+  // Initially, the menu should not be visible
+  expect(menu).not.toBeInTheDocument();
+
+  // Click the button to open the menu
+  fireEvent.click(button);
+  expect(screen.getByTestId('menu')).toBeInTheDocument();
+
+  // Click the button again to close the menu
+  fireEvent.click(button);
+  expect(screen.queryByTestId('menu')).not.toBeInTheDocument();
+});
+
+
 

src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
-import Header from './header';
+import Header from './Header/header';
 import { Quiz } from './Quiz/Quiz';
 import Footer from './Footer/Footer';
 

src/Header/Hamburgerbutton.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import './Hamburgerbutton.scss'; // styling for the hmauburger button icon
+import Menu from './Menu'
+import { menuItems } from './MenuItems';
+
+interface HamburgerProps {
+  // onClick: () => void;
+    // label: string;
+
+}
+
+const Hamburger: React.FC<HamburgerProps> = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    // menu items display/not display on click
+    setIsOpen(!isOpen);
+    console.log('Hamburger menu display options!');
+    <Menu items={menuItems}  />
+  };
+
+  return (
+    <div>
+    <button onClick={handleClick} className="hamburger" data-testid="toggle-button">
+         {/* draw the 3 lines which make up the hmburger  */}
+        <div className="line" />
+        <div className="line" />
+        <div className="line" />
+    </button>
+{/* display the menu list of clicked/unclicked */}
+    {isOpen && (
+        <div className="menu">
+          <Menu items={menuItems} />
+      </div>
+  )}
+  </div>
+  );
+};
+
+export default Hamburger;

src/Header/Menu.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface MenuItem {
+  label: string;
+  link: string;
+}
+
+interface MenuProps {
+  items: MenuItem[];
+}
+
+const Menu: React.FC<MenuProps> = ({ items }) => {
+  return (
+    <div>
+      <h1>Menu </h1>
+    <nav>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <a href={item.link}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+    </div>
+  );
+};
+
+export default Menu;
+

src/Header/MenuItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// list of the menu options that will be displayed when clicking on hamburger button
+export const menuItems = [
+  { label: 'Home', link: '/' },
+  { label: 'Quiz', link: '' },
+  { label: 'Leader board', link: '' },
+  { label: 'Your Mars Rover Collection', link: '' },
+  { label: 'Your Achievements', link: '' },
+];

src/header.tsx → src/Header/header.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import Hamburger from './Hamburgerbutton';
 
 const Header: React.FC = () => {
-  const handleHamburgerClick = () => {
-    console.log('Hamburger menu clicked!');
-  };
-
   return (
     <div className="App">
-      <Hamburger onClick={handleHamburgerClick} label={""}/>
+      {/* call to display the hamburger button and menu items */}
+      <Hamburger />
     </div>
   );
 };