MM-005: Add header with hamburger button

src/App.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.scss';
+import Header from './header';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        {/* <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
@@ -17,7 +18,10 @@ function App() {
           rel="noopener noreferrer"
         >
           Learn React
-        </a>
+        </a> */}
+
+        <Header/>
+
       </header>
     </div>
   );

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,24 @@
+import React from 'react';
+import './Hamburgerbutton.scss'; // styling for the hmauburger button icon
+
+interface HamburgerProps {
+  onClick: () => void;
+}
+
+const Hamburger: React.FC<HamburgerProps> = ({ onClick }) => {
+
+  const handleClick = () => {
+    onClick();
+  };
+
+  return (
+    <button onClick={handleClick} className="hamburger">
+         {/* draw the 3 lines which make up the hmburger  */}
+        <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} />
+    </div>
+  );
+};
+
+export default Header;