Skip to content

Commit

Permalink
feat: improved NavBar with logo
Browse files Browse the repository at this point in the history
Improved the NavBar component by observing scroll and reacting as well as click event to the logo that scrolls the page to the top.
  • Loading branch information
luandro committed Sep 4, 2024
1 parent df6aaee commit c67966d
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 7 deletions.
7 changes: 6 additions & 1 deletion src/components/NavBar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ const NavBar = ({ onSmoothScroll, activeSection }) => {
return (
<header className="bg-[#FF6E40] py-6 fixed w-full z-10">
<nav className="container mx-auto flex justify-between items-center">
<img src="/logos/logo_awana.png" alt="Evento image 1" className="h-12 object-contain" />
<img
src="/logos/logo_awana.png"
alt="Evento image 1"
className="h-12 object-contain cursor-pointer"
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
/>

{/* Menu para desktop */}
<div className="hidden md:flex space-x-4">
Expand Down
12 changes: 6 additions & 6 deletions src/pages/Index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -123,24 +123,25 @@ const Index = () => {
}
});
},
{ threshold: 0.5 }
{ threshold: 0.5, rootMargin: "0px 0px -200px 0px" }
);

Object.values(sectionRefs).forEach((ref) => {
const currentRefs = Object.values(sectionRefs).filter(ref => ref.current);

currentRefs.forEach((ref) => {
if (ref.current) {
observer.observe(ref.current);
}
});

return () => {
Object.values(sectionRefs).forEach((ref) => {
currentRefs.forEach((ref) => {
if (ref.current) {
observer.unobserve(ref.current);
}
});
};
}, []);

}, [sectionRefs]);
if (isLoadingEventoInfo || isLoadingCronograma || isLoadingParticipants || isLoadingPastEditions) {
return <div className="flex justify-center items-center h-screen bg-[#FFF5E1]">
<Loader />
Expand All @@ -154,7 +155,6 @@ const Index = () => {
}

const cronogramaItems = cronogramaMarkdown.split('\n## ').slice(1);
console.log(eventoInfoMetaData)
return (
<div className="min-h-screen bg-[#FFF5E1] text-[#1E3D59]">
<NavBar onSmoothScroll={smoothScroll} activeSection={activeSection} />
Expand Down

0 comments on commit c67966d

Please sign in to comment.