Skip to content

Commit

Permalink
nav fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mishalibrahim
mishalibrahim committed May 14, 2024
1 parent 177acd9 commit 2a368c8
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 44 deletions.
1 change: 1 addition & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,5 @@ body {
.text-balance {
text-wrap: balance;
}

}
2 changes: 1 addition & 1 deletion components/MobileNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const MobileNav = ({active}:{active:boolean}) => {
<>
{

<div id='nav-open' className='fixed h-full w-full z-40 bg-primary top-0 translate-y-[100vh] opacity-0'>
<div id='nav-open' className='fixed h-full w-full z-40 bg-primary top-0 translate-y-[-100vh] opacity-0'>
<div className='flex justify-center h-full flex-col p-10'>
{
mobileNavItems.map((item,index)=>(
Expand Down
79 changes: 36 additions & 43 deletions components/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,71 +6,64 @@ import NavItems from './NavItems'
import MobileNav from './MobileNav'

const Nav = () => {
const [isOpen,setisOpen] = useState(false)
const [isScrolling,setIsScrolling] =useState(false)
const [isActive,setIsActive] =useState('')
const handleScroll =()=>{
if(window.scrollY >= window.innerHeight ){
const [isOpen, setisOpen] = useState(false)
const [isScrolling, setIsScrolling] = useState(false)
const [isActive, setIsActive] = useState('')
const handleScroll = () => {
if (window.scrollY >= window.innerHeight) {
setIsScrolling(true)
}
else{
else {
setIsScrolling(false)
}
const sections = document.querySelectorAll('section');

const scrollPosition = window.scrollY + 400;
const scrollPosition = window.scrollY + 400;

sections.forEach((section)=>{
sections.forEach((section) => {
const top = section.offsetTop;
const bottom = top + section.offsetHeight;

console.log(top,bottom,scrollPosition);

if(scrollPosition >= top && scrollPosition <= bottom){
if (scrollPosition >= top && scrollPosition <= bottom) {
setIsActive(section.id)
console.log(section.id);

}
})
console.log(isActive);


}
useEffect(()=>{

window.addEventListener('scroll',handleScroll)
useEffect(() => {

return () => window.removeEventListener('scroll',handleScroll)
},[])
window.addEventListener('scroll', handleScroll)

return () => window.removeEventListener('scroll', handleScroll)
}, [])
return (
<header className='w-full fixed top-0 z-30 max-h-[100px]'>
<div className={`wrapper w-full ${isScrolling ? 'flex-center':'flex flex-col'} transition-all ease-in-out duration-700 `}>
<div className={`flex justify-between transition-all duration-700
${isScrolling && 'md:w-[80vw] md:h-[55px] rounded-full md:px-10 md:py-1 md:bg-[#53275312] md:backdrop-blur-[16px]'} `}>
<div className='w-[100px]'>
<header className={`w-full flex flex-col h-[60px] top-0 ${isScrolling && 'md:h-[40px] md:top-7'}
fixed transition-all ease-in-out duration-700 z-30 lg:px-5 items-center bg-gradient-to-b from-[#ffffffb9] to-[#ffffff12]`}>
<div className={`flex items-center justify-between transition-all duration-700 wrapper
${isScrolling && 'md:w-[70vw] md:h-[60px] rounded-full md:px-10 md:py-1 md:bg-[#53275312] md:backdrop-blur-[16px]'} `}>
<div className='w-[100px]'>
<div className={`w-[40px] ${isScrolling && 'w-[34px]'} transition-all ease-in-out duration-500 h-auto flex-center`}>
<Image src='/assets/images/miszocLogo.png' width={50} height={60} alt='logo' className='object-cover w-full ' />
</div>
</div>
<nav className='md:flex hidden '>
<NavItems scroll={isScrolling} active={isActive}/>
</nav>
<div className='hidden md:flex-center round-dot relative'>
<Link className='flex text-black pl-3' href='contactUs'>Contact us</Link>
</div>
{/* mobile nav */}
<div className='flex flex-col justify-center md:hidden ' onClick={(e)=>{
e.preventDefault();
setisOpen(!isOpen)}}>
<div className='h-[30px] w-full flex flex-col justify-between'>
<span className={`w-[40px] ${isOpen && 'opacity-0' } h-1 bg-primary transition-all rounded-full`} ></span>
<span className={` w-[40px] ${isOpen ? 'ml-0 w-[60px] rotate-[-45deg] relative top-[-3px] z-50 bg-white ':'ml-2' } h-1 duration-700 bg-primary transition-all rounded-full`}></span>
<span className={`w-[40px] ${isOpen && 'w-[60px] rotate-[45deg] relative top-[-15px] z-50 bg-white' } h-1 bg-primary transition-all rounded-full`}></span>
</div>
</div>
<nav className='md:flex hidden h-full'>
<NavItems scroll={isScrolling} active={isActive} />
</nav>
<div className='hidden md:flex-center round-dot relative'>
<Link className='flex text-black pl-3' href='contactUs'>Contact us</Link>
</div>
{/* mobile nav */}
<div className='flex flex-col justify-center md:hidden ' onClick={(e) => {
e.preventDefault();
setisOpen(!isOpen)
}}>
<div className='h-[30px] w-full flex flex-col justify-between'>
<span className={`w-[40px] ${isOpen && 'opacity-0'} h-1 bg-primary transition-all rounded-full`} ></span>
<span className={` w-[40px] ${isOpen ? 'ml-0 w-[60px] rotate-[-45deg] relative top-[-3px] z-50 bg-white ' : 'ml-2'} h-1 duration-700 bg-primary transition-all rounded-full`}></span>
<span className={`w-[40px] ${isOpen && 'w-[60px] rotate-[45deg] relative top-[-15px] z-50 bg-white'} h-1 bg-primary transition-all rounded-full`}></span>
</div>
</div>
</div>
<MobileNav active={isOpen} />
<MobileNav active={isOpen} />
</header>
)
}
Expand Down

0 comments on commit 2a368c8

Please sign in to comment.