-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from swetha5157/swedeveloper
Added GoTo Home Button in Get Started page
- Loading branch information
Showing
4 changed files
with
139 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters