From 3bcce8e3b83baebe1773ffa17ccb74d1f807dc43 Mon Sep 17 00:00:00 2001
From: adhamElhabashy <adhammohamed8321@gmail.com>
Date: Sun, 24 Sep 2023 21:37:21 +0300
Subject: [PATCH] added position sticky to the header and added footer

---
 src/App.jsx                           |  2 ++
 src/sections/Footer/Footer.jsx        | 21 +++++++++++++++++++++
 src/sections/Graphs/Charts/Charts.jsx |  2 +-
 src/sections/Home/Header/Header.jsx   |  9 +++++++--
 src/sections/Home/Home.jsx            |  2 +-
 src/sections/Home/Landing/Landing.css |  2 +-
 src/sections/Home/Landing/Landing.jsx |  6 +++---
 7 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 src/sections/Footer/Footer.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 119c492..bc7ca53 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import { createTheme, responsiveFontSizes, ThemeProvider } from "@mui/material";
 import Home from "./sections/Home/Home";
 import Tables from "./sections/Tables/Tables";
 import Graphs from "./sections/Graphs/Graphs";
+import Footer from "./sections/Footer/Footer";
 
 // edit the primary color of the theme
 const theme = createTheme({
@@ -25,6 +26,7 @@ function App() {
 			<Home />
 			<Tables />
 			<Graphs />
+			<Footer />
 		</ThemeProvider>
 	);
 }
diff --git a/src/sections/Footer/Footer.jsx b/src/sections/Footer/Footer.jsx
new file mode 100644
index 0000000..1dbb1a7
--- /dev/null
+++ b/src/sections/Footer/Footer.jsx
@@ -0,0 +1,21 @@
+import { Box, Link } from "@mui/material";
+
+function Footer() {
+	return (
+		<Box
+			sx={{
+				backgroundColor: "secondary.main",
+				padding: 1,
+				textAlign: "center",
+			}}
+		>
+			<Link
+				href="https://github.com/chingu-voyages/v45-tier2-team-18"
+				sx={{ color: "common.white", textDecoration: "none" }}
+			>
+				Github Repo
+			</Link>
+		</Box>
+	);
+}
+export default Footer;
diff --git a/src/sections/Graphs/Charts/Charts.jsx b/src/sections/Graphs/Charts/Charts.jsx
index 8bcdced..9b5313f 100644
--- a/src/sections/Graphs/Charts/Charts.jsx
+++ b/src/sections/Graphs/Charts/Charts.jsx
@@ -115,7 +115,7 @@ function Charts() {
 			{
 				data: Object.values(mass),
 				fill: false,
-				borderColor: "rgb(75, 192, 192)",
+				backgroundColor: "rgb(75, 192, 192)",
 				tension: 0.1,
 			},
 		],
diff --git a/src/sections/Home/Header/Header.jsx b/src/sections/Home/Header/Header.jsx
index 49b2917..55ca84e 100644
--- a/src/sections/Home/Header/Header.jsx
+++ b/src/sections/Home/Header/Header.jsx
@@ -10,8 +10,8 @@ import { Container } from "@mui/material";
 
 function Header() {
 	return (
-		<Box sx={{ flexGrow: 1 }}>
-			<AppBar position="relative" color="secondary">
+		<Box sx={{ flexGrow: 1, position: "sticky", top: 0, zIndex: 1000 }}>
+			<AppBar color="secondary">
 				<Container>
 					<Toolbar disableGutters>
 						<IconButton
@@ -19,6 +19,11 @@ function Header() {
 							edge="start"
 							color="primary"
 							aria-label="menu"
+							onClick={() => {
+								document
+									.getElementById("landing")
+									.scrollIntoView({ behavior: "smooth" });
+							}}
 						>
 							<LanguageIcon fontSize="large" />
 						</IconButton>
diff --git a/src/sections/Home/Home.jsx b/src/sections/Home/Home.jsx
index f4cca48..f501cbf 100644
--- a/src/sections/Home/Home.jsx
+++ b/src/sections/Home/Home.jsx
@@ -3,7 +3,7 @@ import Landing from "./Landing/Landing";
 
 function Home() {
 	return (
-		<div className="Home">
+		<div className="Home" style={{ position: "relative" }}>
 			<Header />
 			<Landing />
 		</div>
diff --git a/src/sections/Home/Landing/Landing.css b/src/sections/Home/Landing/Landing.css
index 663c427..ba47c72 100644
--- a/src/sections/Home/Landing/Landing.css
+++ b/src/sections/Home/Landing/Landing.css
@@ -1,6 +1,6 @@
 .landing {
 	width: 100%;
-	height: calc(100vh - 64px);
+	height: 100vh;
 	background-color: #262626;
 }
 
diff --git a/src/sections/Home/Landing/Landing.jsx b/src/sections/Home/Landing/Landing.jsx
index 9a4f55f..0c4f6eb 100644
--- a/src/sections/Home/Landing/Landing.jsx
+++ b/src/sections/Home/Landing/Landing.jsx
@@ -2,11 +2,11 @@ import React from "react";
 import "./Landing.css";
 import Earth from "../../../assets/Ourspaceship-Africa-2k-2.png";
 const Statistics = React.lazy(() => import("../Statistics/Statistics"));
-import { Container, Typography, Button } from "@mui/material";
+import { Container, Typography } from "@mui/material";
 function Landing() {
 	return (
-		<div className="landing">
-			<Container className="landing-container">
+		<div className="landing" id="landing">
+			<Container className="landing-container" sx={{ padding: 10 }}>
 				<div className="text-box">
 					<Typography variant="h2" className="text-title">
 						Meteors and Meteorites