From a6da30a69cba9c873182192e2823b94a9bcbab71 Mon Sep 17 00:00:00 2001
From: Purbai <purbai.varsani@softwire.com>
Date: Wed, 31 Jul 2024 15:39:00 +0100
Subject: [PATCH] MM-112-menuoptions: display menu items on/off when hamburger
 is clicked

---
 src/App.test.tsx                      | 48 +++++++++++++++++++++------
 src/App.tsx                           |  2 +-
 src/Hamburgerbutton.tsx               | 27 ---------------
 src/{ => Header}/Hamburgerbutton.scss |  0
 src/Header/Hamburgerbutton.tsx        | 40 ++++++++++++++++++++++
 src/Header/Menu.tsx                   | 30 +++++++++++++++++
 src/Header/MenuItems.tsx              | 10 ++++++
 src/{ => Header}/header.tsx           |  7 ++--
 8 files changed, 121 insertions(+), 43 deletions(-)
 delete mode 100644 src/Hamburgerbutton.tsx
 rename src/{ => Header}/Hamburgerbutton.scss (100%)
 create mode 100644 src/Header/Hamburgerbutton.tsx
 create mode 100644 src/Header/Menu.tsx
 create mode 100644 src/Header/MenuItems.tsx
 rename src/{ => Header}/header.tsx (54%)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 441db62..cf68288 100644
--- a/src/App.test.tsx
+++ b/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();
+});
+
+
 
diff --git a/src/App.tsx b/src/App.tsx
index 29788f9..a123805 100644
--- a/src/App.tsx
+++ b/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';
 
diff --git a/src/Hamburgerbutton.tsx b/src/Hamburgerbutton.tsx
deleted file mode 100644
index 505bff2..0000000
--- a/src/Hamburgerbutton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import './Hamburgerbutton.scss'; // styling for the hmauburger button icon
-
-interface HamburgerProps {
-  onClick: () => void;
-  label: string;
-
-}
-
-const Hamburger: React.FC<HamburgerProps> = ({ onClick , label}) => {
-
-  const handleClick = () => {
-    onClick();
-  };
-
-  return (
-    <button onClick={handleClick} className="hamburger">
-         {/* draw the 3 lines which make up the hmburger  */}
-         {label}
-        <div className="line" />
-        <div className="line" />
-        <div className="line" />
-    </button>
-  );
-};
-
-export default Hamburger;
\ No newline at end of file
diff --git a/src/Hamburgerbutton.scss b/src/Header/Hamburgerbutton.scss
similarity index 100%
rename from src/Hamburgerbutton.scss
rename to src/Header/Hamburgerbutton.scss
diff --git a/src/Header/Hamburgerbutton.tsx b/src/Header/Hamburgerbutton.tsx
new file mode 100644
index 0000000..5158b5c
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/Header/Menu.tsx b/src/Header/Menu.tsx
new file mode 100644
index 0000000..41d8625
--- /dev/null
+++ b/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;
+
diff --git a/src/Header/MenuItems.tsx b/src/Header/MenuItems.tsx
new file mode 100644
index 0000000..15f1d86
--- /dev/null
+++ b/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: '' },
+];
\ No newline at end of file
diff --git a/src/header.tsx b/src/Header/header.tsx
similarity index 54%
rename from src/header.tsx
rename to src/Header/header.tsx
index d4fd937..95c7347 100644
--- a/src/header.tsx
+++ b/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>
   );
 };