Merge pull request #13 from wethmiranasinghe/main

Pages linked

front-end/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

front-end/src/App.jsx

@@ -1,14 +1,44 @@
-import Header from "./Header"
-import Footer from "./Footer"
+import {BrowserRouter, Routes, Route} from 'react-router-dom';  //Add page routing using router dom
+
+import Header from "./Header";
+import Footer from "./Footer";
 import './Header.css'
 import './Footer.css'
 
+import Home from './Pages/Home';
+import ProjectOverview from './Pages/ProjectOverview';
+import Team from './Pages/Team';
+import NewsAndEvents from './Pages/NewsAndEvents';
+import Downloads from './Pages/Downloads';
+import Contact from './Pages/Contact';
+import Overview from './Pages/Overview';
+import Workplan from './Pages/Workplan';
+import Deliverables from './Pages/Deliverables';
+import Error from './Pages/Error';
+
+
 function App() {
   return(
-    <><Header></Header>
-    <Footer></Footer>
+    <>
+    <BrowserRouter>
+    <nav> <Header/> </nav>
+      <Routes>
+          <Route path = '/' element = {<Home />} />
+          <Route path = 'project overview' element = {<ProjectOverview />}>
+            <Route path = 'overview' element = {<Overview />}/>
+            <Route path = 'workplan' element = {<Workplan />}/>
+            <Route path = 'deliverbles' element = {<Deliverables />}/>
+          </Route>
+          <Route path = 'team' element = {<Team />} />
+          <Route path = 'news' element = {<NewsAndEvents />} />
+          <Route path = 'downloads' element = {<Downloads />} />
+          <Route path = 'contact' element = {<Contact />} />
+          <Route path = '*' element = {<Error />} />
+      </Routes>
+      <footer> <Footer/> </footer>  {/* Adding footer to all pages */}
+    </BrowserRouter>
     </>
-  );
-}
+  )
+  }
 
-export default App
+  export default App;

front-end/src/Header.jsx

@@ -1,3 +1,5 @@
+import {Link, Outlet} from 'react-router-dom';  // //Add page routing using router dom
+
 import cylcleLogo from './assets/CYCLE-logo.png';
 import erasmusLogo from './assets/erasmus-plus-logo.jpg';
 
@@ -12,25 +14,25 @@ function Header(){
             <h2><span style={{ color:'rgb(50, 78, 148)'}}>CYberseCurityLEarning: Master's degree in Cybersecurity</span></h2>
             <nav className = "headerNavBar">
                 <ul>
-                    <li><a href = "index.html">HOME</a></li>
+                    <li><Link to = '/'>HOME</Link></li>
                     <li className = "headerDropDown">
-                    <a href = "">PROJECT OVERVIEW &nbsp; &nbsp; &#x25BC;</a>
+                    <Link to = '/project overview'>PROJECT OVERVIEW &nbsp; &nbsp; &#x25BC;</Link>
                         <div className = "dropdown-content">
-                            <a href = "projectOverview.html">Project Overview</a>
-                            <a href = "#">Cycle Workplan</a>
-                            <a href = "#">Deliverables</a>
+                            <Link to = '/project overview/overview'>Overview</Link>
+                            <Link to = '/project overview/workplan'>Cycle Workplan</Link>
+                            <Link to = '/project overview/deliverables'>Deliverables</Link>
                         </div>
                         </li>
-                    <li><a href = "team.html">TEAM</a></li>
+                    <li><Link to = '/team'>TEAM</Link></li>
                     <li className = "headerDropDown">
-                    <a href = "#">NEWS & EVENTS &nbsp; &nbsp; &#x25BC;</a>
+                    <Link to = '/news'>NEWS & EVENTS &nbsp; &nbsp; &#x25BC;</Link>
                         <div className = "dropdown-content">
-                            <a href = "#">News & Events</a>
-                            <a href = "#">Gallery</a>
+                            <Link to = '/news'>News & Events</Link>
+                            <Link to = '/gallery'>Gallery</Link>
                         </div>
                     </li>
-                    <li><a href = "downloads">DOWNLOADS</a></li>
-                    <li><a href = "#">CONTACT</a></li>
+                    <li><Link to = '/downloads'>DOWNLOADS</Link></li>
+                    <li><Link to = '/contact'>CONTACT</Link></li>
                 </ul>
             </nav>
         </header>

front-end/src/Pages/Contact.jsx

@@ -0,0 +1,9 @@
+function Contact() {
+  return(
+    <>
+    <h1>Contact</h1>
+      </>
+  );
+}
+
+export default Contact;

front-end/src/Pages/Deliverables.jsx

@@ -0,0 +1,9 @@
+function Deliverables() {
+    return(
+      <>
+      <h1>Deliverables</h1>
+        </>
+    );
+  }
+
+  export default Deliverables;

front-end/src/Pages/Downloads.jsx

@@ -0,0 +1,9 @@
+function Downloads() {
+  return(
+    <>
+    <h1>Downloads</h1>
+      </>
+  );
+}
+
+export default Downloads;

front-end/src/Pages/Error.jsx

@@ -0,0 +1,13 @@
+import {Link} from 'react-router-dom';
+
+const Error = () => {
+    return(
+        <section className ='section'>
+            <h2>404</h2>
+            <p>Page not found</p>
+            <Link to = '/'>back home</Link>
+        </section>
+    )
+}
+
+export default Error;

front-end/src/Pages/Home.jsx

@@ -0,0 +1,12 @@
+import Conference from '../assets/Conference.jpg';
+
+function Home() {
+  return(
+    <>
+    <h1>Home</h1>
+    <img src = {Conference} width={1000}/>
+    </>
+  );
+}
+
+export default Home;

front-end/src/Pages/NewsAndEvents.jsx

@@ -0,0 +1,9 @@
+function NewsAndEvents() {
+  return(
+    <>
+    <h1>News & Events</h1>
+    </>
+  );
+}
+
+export default NewsAndEvents;

front-end/src/Pages/Overview.jsx

@@ -0,0 +1,9 @@
+function Overview() {
+    return(
+      <>
+      <h2>Overview</h2>
+        </>
+    );
+  }
+
+  export default Overview;

front-end/src/Pages/ProjectOverview.jsx

@@ -0,0 +1,9 @@
+function ProjectOverview() {
+  return(
+    <>
+    <h1>Project Overview</h1>
+    </>
+  );
+}
+
+export default ProjectOverview;

front-end/src/Pages/Team.jsx

@@ -0,0 +1,9 @@
+function Team() {
+  return(
+    <>
+    <h1>Team</h1>
+    </>
+  );
+}
+
+export default Team;

front-end/src/Pages/Workplan.jsx

@@ -0,0 +1,9 @@
+function Workplan() {
+    return(
+      <>
+      <h1>Cycle Workplan</h1>
+        </>
+    );
+  }
+
+  export default Workplan;