Skip to content

Commit

Permalink
Merge pull request #1 from swetha5157/swedeveloper
Browse files Browse the repository at this point in the history 
Added GoTo Home Button in Get Started page
  • Loading branch information
@swetha5157
swetha5157 authored May 29, 2024
2 parents 37482f3 + 9637c03 commit e67b690
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 168 deletions.
1 change: 1 addition & 0 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function App() {
</div>} />
<Route path="/classes" element={<Classes />} />
<Route path="/diet" element={<Diet />} />

</Routes>
</Router>
</>
Expand Down
273 changes: 108 additions & 165 deletions src/components/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,174 +1,117 @@
import React, { useRef } from "react";
import React, { useRef, useEffect } from "react";
import "../../styles/header.css";
import logo from "../../assets/img/dumble.png";
import { useEffect, useState } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
gsap.registerPlugin(useGSAP);
import { useLocation } from "react-router-dom";

const nav__links = [
{
path: "#home",
display: "Home",
},
{
path: "#schedule",
display: "Schedule",
},
{
path: "#classes",
display: "Classes",
},
{
path: "#pricing-plan",
display: "Pricing",
},
{
path: "#contact-us",
display: "Contact Us",
},
{
path: "#home",
display: "Home",
},
{
path: "#schedule",
display: "Schedule",
},
{
path: "#classes",
display: "Classes",
},
{
path: "#pricing-plan",
display: "Pricing",
},
{
path: "#contact-us",
display: "Contact Us",
},
];
const Header = ({ isDarkMode, setDarkMode }) => {
const [open, setOpen] = useState(false);
const [headerBackground, setHeaderBackground] = useState(
isDarkMode ? "#111" : "#fff"
);
const headerRef = useRef(null);

const toggleDarkMode = () => {
setDarkMode(!isDarkMode);
};

const toggleMobileMenu = () => {
const navCheck = document.getElementById("nav-check");
if (navCheck) {
navCheck.checked = !navCheck.checked;
}
};

const headerFunc = () => {
if (
document.body.scrollTop > 80 ||
document.documentElement.scrollTop > 80
) {
setHeaderBackground(isDarkMode ? "#111" : "#fff");
headerRef.current.classList.add("sticky_header");
} else {
headerRef.current.classList.remove("sticky_header");
}
};

useEffect(() => {
setHeaderBackground(isDarkMode ? "#111" : "#fff");
window.addEventListener("scroll", headerFunc);
window.scrollTo(window.scrollX, window.scrollY - 1);
window.scrollTo(window.scrollX, window.scrollY + 1);

return () => {
window.scrollTo(window.scrollX, window.scrollY - 1);
window.scrollTo(window.scrollX, window.scrollY + 1);
return window.removeEventListener("scroll", headerFunc);
};
}, [isDarkMode]);

const handleClick = (e) => {
e.preventDefault();

const targetAttr = e.target.getAttribute("href");
const location = document.querySelector(targetAttr).offsetTop;

window.scrollTo({
left: 0,
top: location - 80,
});
toggleMobileMenu();
};

const headerClass = isDarkMode ? "header dark-mode" : "header";

return (
<header
className={headerClass}
ref={headerRef}
style={{
background: "rgba(39, 39, 39, 0.1)",
backdropFilter: "blur(60px)",
borderBottom: "2px solid rgba(255, 255, 255, 0.2)",
boxShadow: "0 0 80px rgba(0, 0, 0, 0.3)"
}}
>
<div className="container">
<div className="nav__wrapper">
{/*=====LOGO===*/}

<input type="checkbox" id="nav-check" hidden />
<div className="btn__wrapper">
<div className="logo">
<div className="logo_img">
<img src={logo} alt="" />
</div>
<div className="icon_logo">
<h2>
<a href="$">FitBody</a>
</h2>
</div>
<div
className="styles-container"
onClick={toggleDarkMode}
>
<div className="styles-icon">🌙</div>
<div className="styles-icon">🔆</div>
<div
className="styles-ball"
style={
!isDarkMode
? { transform: 'translateX(0%)' }
: { transform: 'translateX(140%)' }
}
/>
</div>
</div>

<div className="nav-btn">
<label htmlFor="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
</div>

{/*====Navigation bar====*/}

<div className="nav__links">
<div className="navigation">
<ul className="menu">
{nav__links.map((item, index) => (
<li className="nav_item" key={index}>
<a
onClick={handleClick}
href={item.path}
>
{item.display}
</a>
</li>
))}
</ul>
</div>

{/* Nav Right */}

<div className="nav_right">
<button className="register_btn">Register</button>
{/* <span className="mobile__menu">
<i className="ri-menu-line"></i>
</span> */}
</div>
</div>
</div>
</div>
</header>
);
const Header = ({ isDarkMode, setDarkMode }) => {
const headerRef = useRef(null);
const location = useLocation();

useEffect(() => {
const headerFunc = () => {
const header = headerRef.current;
if (header) {
if (
document.body.scrollTop > 80 ||
document.documentElement.scrollTop > 80
) {
header.style.background = isDarkMode ? "#111" : "#fff";
header.classList.add("sticky_header");
} else {
header.style.background = "rgba(39, 39, 39, 0.1)";
header.classList.remove("sticky_header");
}
}
};

window.addEventListener("scroll", headerFunc);

return () => {
window.removeEventListener("scroll", headerFunc);
};
}, [isDarkMode]);

const handleClick = (e, path) => {
e.preventDefault();
const target = document.querySelector(path);
if (target) {
window.scrollTo({
top: target.offsetTop - 80,
behavior: "smooth",
});
}
};

return (
<header
className={isDarkMode ? "header dark-mode" : "header"}
ref={headerRef}
>
<div className="container">
<div className="nav__wrapper">
{/*=====LOGO===*/}
<div className="logo">
<div className="logo_img">
<img src={logo} alt="" />
</div>
<div className="icon_logo">
<h2>
<a href="/">FitBody</a>
</h2>
</div>
</div>

{/*====Navigation bar====*/}
<div className="nav__links">
<div className="navigation">
<ul className="menu">
{nav__links.map((item, index) => (
<li className="nav_item" key={index}>
<a
href={item.path}
onClick={(e) => handleClick(e, item.path)}
className={
location.pathname === item.path ? "active" : null
}
>
{item.display}
</a>
</li>
))}
</ul>
</div>
{/* Nav Right */}
<div className="nav_right">
<button className="register_btn">Register</button>
</div>
</div>
</div>
</div>
</header>
);
};

export default Header;
11 changes: 8 additions & 3 deletions src/components/UI/Classes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import Header from '../Header/Header';
import Footer from '../UI/Footer';
import "../../styles/Classes.css";
import "../../styles/header.css";
import { Link } from 'react-router-dom';



const Classes = () => {



const [isDarkMode, setDarkMode] = useState(false);

const exercises = [
Expand Down Expand Up @@ -98,9 +100,10 @@ const Classes = () => {
return (
<>
<div className={isDarkMode ? "dark-mode-app" : "light-mode-app"}>
<Header className="header" isDarkMode={isDarkMode} setDarkMode={setDarkMode} />
<div className="exercise-container">
<h1>Workouts For Free</h1>
<button className='gotohome' ><Link to="/">Go To Home </Link></button>

{exercises.map((exercise, index) => (
<div key={index} className="exercise-card">
<div className="exercise-details">
Expand All @@ -114,12 +117,14 @@ const Classes = () => {
</div>
</div>
<div className="exercises-video">
{exercise.video}
{exercise.video}
</div>
</div>

))}
</div>
</div>

<Footer />
</>
);
Expand Down
22 changes: 22 additions & 0 deletions src/styles/Classes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,25 @@ h1 {
margin-top: 1rem; /* Add some spacing between details and video */
}
}

.gotohome {
height: 50px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin-left:1250px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.gotohome:hover {
background-color: #45a049;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

0 comments on commit e67b690

Please sign in to comment.