added position sticky to the header and added footer

chingu-voyages · Sep 24, 2023 · 3bcce8e · 3bcce8e
1 parent a8c62a8
commit 3bcce8e
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -10,15 +10,20 @@ 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
 							size="large"
 							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
@@ -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
@@ -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
@@ -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