From 287f10fc8c6773f73063f4aebe347039f5495518 Mon Sep 17 00:00:00 2001
From: mohamedYabarow <yabarow04@gmail.com>
Date: Tue, 16 Apr 2024 10:19:42 +0000
Subject: [PATCH 1/2] chore:mahamad wokring cnages

---
 src/views/Home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Home.js b/src/views/Home.js
index 76ef507..801915c 100644
--- a/src/views/Home.js
+++ b/src/views/Home.js
@@ -4,6 +4,6 @@ export const Home = () => (
     <div>
         <h1>Home</h1>
 
-        <p>DHIS2 Web App Academy 2024</p>
+        <p>DHIS2 Web App Academy 2024 ( Mohamad change )</p>
     </div>
 )

From c0f37a81ca58e2e51ec2130d89be3bc6ed094b90 Mon Sep 17 00:00:00 2001
From: mohamedYabarow <yabarow04@gmail.com>
Date: Tue, 16 Apr 2024 12:06:46 +0000
Subject: [PATCH 2/2] Day 2 Task one

---
 src/navigation/Navigation.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js
index 38b5781..ad4fcf4 100644
--- a/src/navigation/Navigation.js
+++ b/src/navigation/Navigation.js
@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+
+//step 1 import the menu library
+import { Menu, MenuItem } from '@dhis2/ui'
 // @TODO: Import the `Menu` and `MenuItem` components
 import { useNavigate, useMatch } from 'react-router-dom'
 
@@ -17,7 +20,8 @@ const NavigationItem = ({ path, label }) => {
     const onClick = () => navigate(path)
 
     // @TODO: Use the `MenuItem` component instead of the `div`
-    return <div>{label}</div>
+    //step 2 activate the menu bar
+    return <MenuItem label={label} target={path} active={isActive} onClick={onClick}/>
 }
 
 NavigationItem.propTypes = {
@@ -27,7 +31,8 @@ NavigationItem.propTypes = {
 
 export const Navigation = () => (
     // @TODO: Use the `Menu` components instead of the `div`
-    <div>
+    //step 3 convert div int menu
+    <Menu>
         <NavigationItem
             // Menu item for the home page
             label="Home"
@@ -45,5 +50,5 @@ export const Navigation = () => (
             label="Form"
             path="/form"
         />
-    </div>
+    </Menu>
 )