feat: add smooth scroll to hero section on logo click#333
feat: add smooth scroll to hero section on logo click#333praveensaison wants to merge 1 commit intoapsinghdev:mainfrom
Conversation
|
@praveensaison is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe pull request adds smooth scroll-to-hero functionality when the logo is clicked. The Hero component gains an id attribute, and the Navbar receives a click handler that scrolls to this hero element using smooth scrolling, or to the top if the element is not found. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/web/src/components/landing-sections/navbar.tsx`:
- Around line 14-22: The logo click handler handleLogoClick should be triggered
from a keyboard-accessible control: replace the clickable <div> used for the
logo in the Navbar component with a semantic <button> (or add role="button",
tabIndex={0}, aria-label and onKeyDown that calls handleLogoClick) so keyboard
users can activate it; remove any inline style like userSelect and use the
Tailwind utility class select-none instead; apply the same changes to the other
logo instance referenced in the component (lines ~91-106) so both logo controls
are keyboard-accessible and use Tailwind for styling.
🧹 Nitpick comments (1)
apps/web/src/components/landing-sections/navbar.tsx (1)
13-13: Remove the redundant comment (and avoid uppercase in code comments).
The handler name is self-explanatory, and the new comment is not lowercase.As per coding guidelines, "Always use lowercase when writing comments" and "Avoid unnecessary comments; code should be self-documenting when possible".♻️ Proposed cleanup
- // Scroll to top of hero section
| const handleLogoClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { | ||
| e.preventDefault(); | ||
| const hero = document.getElementById('hero'); | ||
| if (hero) { | ||
| hero.scrollIntoView({ behavior: 'smooth' }); | ||
| } else { | ||
| window.scrollTo({ top: 0, behavior: 'smooth' }); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Make the logo control keyboard-accessible and drop inline styles.
A clickable div isn’t focusable by default, so keyboard users can’t activate it. Switch to a button (or add role/tabIndex/onKeyDown), and replace the inline userSelect style with Tailwind.
✅ Proposed fix
- const handleLogoClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
- e.preventDefault();
+ const handleLogoClick = () => {
const hero = document.getElementById('hero');
if (hero) {
hero.scrollIntoView({ behavior: 'smooth' });
} else {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
};
...
- <div
- className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2 cursor-pointer"
- onClick={handleLogoClick}
- aria-label="Scroll to top"
- style={{ userSelect: 'none' }}
- >
+ <button
+ type="button"
+ className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2 cursor-pointer select-none bg-transparent border-0 p-0"
+ onClick={handleLogoClick}
+ aria-label="Scroll to top"
+ >
...
- </div>
+ </button>Also applies to: 91-106
🤖 Prompt for AI Agents
In `@apps/web/src/components/landing-sections/navbar.tsx` around lines 14 - 22,
The logo click handler handleLogoClick should be triggered from a
keyboard-accessible control: replace the clickable <div> used for the logo in
the Navbar component with a semantic <button> (or add role="button",
tabIndex={0}, aria-label and onKeyDown that calls handleLogoClick) so keyboard
users can activate it; remove any inline style like userSelect and use the
Tailwind utility class select-none instead; apply the same changes to the other
logo instance referenced in the component (lines ~91-106) so both logo controls
are keyboard-accessible and use Tailwind for styling.
1 participant
This pull request improves the user navigation experience on the landing page by allowing users to smoothly scroll back to the top (the hero section) when clicking the logo in the navbar. The main changes include adding an
idto the hero section and implementing a click handler for the logo.User navigation enhancements:
id="hero"to the main hero section container inHero.tsxto serve as a scroll target.handleLogoClickfunction innavbar.tsxthat smoothly scrolls to the hero section when the logo is clicked, or to the top of the page if the hero section is not found.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.