navbar buttons change page content

src/client/About.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import ImagesWithDescription from './ImagesWithDescription';
+
+/**
+ * @return {jsx} The homepage component
+ */
+export default function About() {
+	return (
+		<React.Fragment>
+			<ImagesWithDescription
+				images={[
+					{
+						image: 'urbex.webp',
+						title: 'Explorations',
+						description: `Amateurs d'escalade et de sensations 
+							fortes, nous cherchons des lieux abandonnés ou 
+							difficiles d'accès.`,
+					}, {
+						image: 'cliff.jpeg',
+						title: 'Découvertes',
+						description: 'De beaux paysages, tu connais.',
+					}, {
+						image: 'eye.webp',
+						title: 'Rencontres',
+						description: `Notre voyage sera avant tout rythmé de 
+							nouveaux visages. Sans personne pour nous aider 
+							ce voyage aurait peu de sens.`,
+					},
+				]}/>
+		</React.Fragment>
+	);
+}

src/client/Blog.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Banner from './Banner';
+
+/**
+ * @return {jsx} The homepage component
+ */
+export default function Blog() {
+	return (
+		<React.Fragment>
+			<Banner
+				title={`Un voyage à travers l'Europe`}
+				description={`
+				On vous raconte nos aventures à travers l'Europe.\n
+				Nous voyageons en stop et sans argent.\n
+				On loge chez l'habitant ou dehors dans des hamacs.`}
+				links={[
+					{
+						to: '/blog',
+						text: 'Notre carnet de voyage',
+					},
+				]}
+				image={'map.jpeg'}
+			/>
+		</React.Fragment>
+	);
+}

src/client/Contact.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Quote from './Quote';
+
+/**
+ * @return {jsx} The homepage component
+ */
+export default function Contact() {
+	return (
+		<React.Fragment>
+			<Quote
+				quote={'Not all those who wander are lost.'}
+				author={'J. R. R. Tolkien'}
+				description={`
+				On veut quitter notre confort pendant un moment.
+				Briser nos habitudes et nos ancrages.
+				Faire place à la nouveauté et l'incompréhension.`}/>
+		</React.Fragment>
+	);
+}

src/client/Home.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import Banner from './Banner';
+import Quote from './Quote';
+import Footer from './Footer';
+import ImagesWithDescription from './ImagesWithDescription';
+
+/**
+ * @return {jsx} The homepage component
+ */
+export default function Home() {
+	return (
+		<React.Fragment>
+			<Banner
+				title={`Un voyage à travers l'Europe`}
+				description={`
+				On vous raconte nos aventures à travers l'Europe.\n
+				Nous voyageons en stop et sans argent.\n
+				On loge chez l'habitant ou dehors dans des hamacs.`}
+				links={[
+					{
+						to: '/blog',
+						text: 'Notre carnet de voyage',
+					},
+				]}
+				image={'map.jpeg'}
+			/>
+			<ImagesWithDescription
+				images={[
+					{
+						image: 'urbex.webp',
+						title: 'Explorations',
+						description: `Amateurs d'escalade et de sensations 
+							fortes, nous cherchons des lieux abandonnés ou 
+							difficiles d'accès.`,
+					}, {
+						image: 'cliff.jpeg',
+						title: 'Découvertes',
+						description: 'De beaux paysages, tu connais.',
+					}, {
+						image: 'eye.webp',
+						title: 'Rencontres',
+						description: `Notre voyage sera avant tout rythmé de 
+							nouveaux visages. Sans personne pour nous aider 
+							ce voyage aurait peu de sens.`,
+					},
+				]}/>
+			<Quote
+				quote={'Not all those who wander are lost.'}
+				author={'J. R. R. Tolkien'}
+				description={`
+				On veut quitter notre confort pendant un moment.
+				Briser nos habitudes et nos ancrages.
+				Faire place à la nouveauté et l'incompréhension.`}/>
+			<Footer
+				elements={[
+					{
+						title: 'À propos',
+						description: `Nous sommes deux jeunes de 23 ans à la 
+						recherche d'aventures et de réponses à travers 
+						l'Europe`,
+						links: [
+							{
+								to: '/about',
+								text: 'Plus de détails',
+							},
+						],
+					}, {
+						title: 'Nous contacter',
+						description:
+						<ul>
+							<li>curious.roamers@gmail.com</li>
+							<li>06 37 11 28 22</li>
+						</ul>,
+						links: [
+							{
+								to: '/contact',
+								text: `Autres façons de nous contacter`,
+							},
+						],
+					}, {
+						title: 'Donation',
+						description: `Si vous voulez contribuer à financer nos 
+						futurs voyages ou simplement nous aider financièrement 
+						:)`,
+						links: [
+							{
+								to: 'https://paypal.me/ygarrot',
+								text: 'Paypal',
+							}, {
+								to: 'https://tipeee.com/curious-roamers',
+								text: 'Tipeee',
+							},
+						],
+					},
+				]}/>
+		</React.Fragment>
+	);
+}

src/client/Navbar.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
 interface Link {
-	to: string;
+	status: string;
 	text: string;
 }
 
 interface NavbarProps {
+	setStatus: any;
 	main: Link;
 	sub: Array<Link>;
 }
@@ -13,14 +14,16 @@ interface NavbarProps {
 /**
  * @return {jsx} The root component
  */
-export default function Navbar({main, sub}: NavbarProps) {
+export default function Navbar({setStatus, main, sub}: NavbarProps) {
 	return (
 		<React.Fragment>
 			<div className='navbar navbar-expand-lg navbar-light'>
 				<div
 					className='container'
 					id='navbar'>
-					<a className='navbar-brand' href={main.to}>{main.text}</a>
+					<a
+						className='navbar-brand'
+						onClick={() => setStatus(main.status)}>{main.text}</a>
 					<button
 						className='navbar-toggler'
 						type='button'
@@ -33,7 +36,9 @@ export default function Navbar({main, sub}: NavbarProps) {
 						<ul className='navbar-nav mr-auto mb-0 pb-0'>
 							{sub.map((elem, index) =>
 								<li key={index} className='nav-item'>
-									<a className='nav-link' href={elem.to}>
+									<a
+										className='nav-link'
+										onClick={() => setStatus(elem.status)}>
 										{elem.text}
 									</a>
 								</li>)

src/client/Root.tsx

@@ -1,120 +1,54 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import Navbar from './Navbar';
-import Banner from './Banner';
+import Home from './Home';
-import Quote from './Quote';
+import Blog from './Blog';
-import Footer from './Footer';
+import About from './About';
-import ImagesWithDescription from './ImagesWithDescription';
+import Contact from './Contact';
 
 /**
  * @return {jsx} The root component
  */
 export default function Root() {
+	const [page, setPage] = useState(<Home />);
+	const [navbarStatus, setNavbarStatus] = useState('Home');
+
+	useEffect(() => {
+		if (navbarStatus == 'Home') {
+			setPage(<Home />);
+		} else if (navbarStatus == 'Blog') {
+			setPage(<Blog />);
+		} else if (navbarStatus == 'About') {
+			setPage(<About />);
+		} else if (navbarStatus == 'Contact') {
+			setPage(<Contact />);
+		}
+	}, [navbarStatus]);
+
 	return (
 		<React.Fragment>
 			<Navbar
+				setStatus={setNavbarStatus}
 				main={{
 					text: 'Curious Roamers',
-					to: '/blog',
+					status: 'Home',
 				}}
 				sub={[
 					{
 						text: 'Home',
-						to: '/',
+						status: 'Home',
 					}, {
 						text: 'Carnet de voyage',
-						to: '/blog',
+						status: 'Blog',
 					}, {
 						text: 'Qui sommes nous ?',
-						to: '/about',
+						status: 'About',
 					}, {
 						text: 'Contact',
-						to: '/contact',
+						status: 'Contact',
 					},
 				]}
 			/>
-			<Banner
+			{page}
-				title={`Un voyage à travers l'Europe`}
-				description={`
-				On vous raconte nos aventures à travers l'Europe.\n
-				Nous voyageons en stop et sans argent.\n
-				On loge chez l'habitant ou dehors dans des hamacs.`}
-				links={[
-					{
-						to: '/blog',
-						text: 'Notre carnet de voyage',
-					},
-				]}
-				image={'map.jpeg'}
-			/>
-			<ImagesWithDescription
-				images={[
-					{
-						image: 'urbex.webp',
-						title: 'Explorations',
-						description: `Amateurs d'escalade et de sensations 
-							fortes, nous cherchons des lieux abandonnés ou 
-							difficiles d'accès.`,
-					}, {
-						image: 'cliff.jpeg',
-						title: 'Découvertes',
-						description: 'De beaux paysages, tu connais.',
-					}, {
-						image: 'eye.webp',
-						title: 'Rencontres',
-						description: `Notre voyage sera avant tout rythmé de 
-							nouveaux visages. Sans personne pour nous aider 
-							ce voyage aurait peu de sens.`,
-					},
-				]}/>
-			<Quote
-				quote={'Not all those who wander are lost.'}
-				author={'J. R. R. Tolkien'}
-				description={`
-				On veut quitter notre confort pendant un moment.
-				Briser nos habitudes et nos ancrages.
-				Faire place à la nouveauté et l'incompréhension.`}/>
-			<Footer
-				elements={[
-					{
-						title: 'À propos',
-						description: `Nous sommes deux jeunes de 23 ans à la 
-						recherche d'aventures et de réponses à travers 
-						l'Europe`,
-						links: [
-							{
-								to: '/about',
-								text: 'Plus de détails',
-							},
-						],
-					}, {
-						title: 'Nous contacter',
-						description:
-						<ul>
-							<li>curious.roamers@gmail.com</li>
-							<li>06 37 11 28 22</li>
-						</ul>,
-						links: [
-							{
-								to: '/contact',
-								text: `Autres façons de nous contacter`,
-							},
-						],
-					}, {
-						title: 'Donation',
-						description: `Si vous voulez contribuer à financer nos 
-						futurs voyages ou simplement nous aider financièrement 
-						:)`,
-						links: [
-							{
-								to: 'https://paypal.me/ygarrot',
-								text: 'Paypal',
-							}, {
-								to: 'https://tipeee.com/curious-roamers',
-								text: 'Tipeee',
-							},
-						],
-					},
-				]}/>
 		</React.Fragment>
 	);
 }