Mm 005 header v2

src/App.test.tsx

@@ -1,10 +1,24 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+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';
 
 // remove this test when real tests are added
 test('renders header', () => {
     render(<App />);
     const header = screen.getAllByText(/MarsioKart/i);
     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);
+  });
+

src/App.tsx

@@ -2,14 +2,18 @@ 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 { Quiz } from './Quiz/Quiz';
 import Footer from './Footer/Footer';
 
+
+
 function App() {
   return (
     <div className="App">
       <Router>
         <h1>MarsioKart</h1>
+        <Header/>
         <Routes>
           <Route path='/'
           element={<Home/>}/>

src/Hamburgerbutton.scss

@@ -0,0 +1,18 @@
+.hamburger {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .line {
+    width: 100%;
+    height: 3px;
+    background-color: black;
+    transition: all 0.3s ease;
+  }
+

src/Hamburgerbutton.tsx

@@ -0,0 +1,27 @@
+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;

src/header.tsx

@@ -0,0 +1,16 @@
+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={""}/>
+    </div>
+  );
+};
+
+export default Header;