feat: add animated navbar hover interactions

[pari-dubey1]

Summary

• Added animated underline hover effect for desktop navbar links
• Added improved hover interactions for mobile navigation drawer links
• Added centered gradient underline animation
• Improved navbar visual feedback and interactivity
• Maintained dark/light mode compatibility and responsiveness

Type of change

• New feature
• Bug fix
• Refactor
• Documentation
• Test or CI improvement
• Starter template change

Related issue

Closes #183

Validation

• npm run build

Additional manual verification:

• Tested desktop hover animations
• Tested mobile drawer interactions
• Verified dark/light mode support
• Verified responsive layout behavior

Screenshots

Light Mode

Recording.2026-05-19.113246.mp4

Dark Mode

Recording.2026-05-19.113319.mp4

Mobile View

Checklist

• I kept this PR focused on one primary change
• I tested the UI locally
• I did not commit unnecessary files

Summary by CodeRabbit

• Style
  • Updated navigation link styling with red-themed hover effects and animated underline animations for improved visual feedback during user interactions in both mobile and desktop navigation menus.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @pari-dubey1!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

Walkthrough

Mobile sheet navigation links and the NavLink component in modules/home/header.tsx are restyled with red-themed hover effects. Mobile nav links now translate and emphasize borders on hover. The NavLink component gains an animated gradient underline that scales on hover via CSS pseudo-elements and transitions.

Changes

Header Navigation Styling

Layer / File(s)	Summary
Mobile navigation sheet links styling modules/home/header.tsx	Documentation, Features, and Templates links in the mobile menu are updated to use red hover text and background, subtle left-to-right translation, and border emphasis instead of previous neutral hover styling.
NavLink animated underline component modules/home/header.tsx	NavLink helper styling is expanded from a simple hover definition to a multiline Tailwind class that adds a gradient underline using after: pseudo-elements with scale-x animation on hover, alongside red hover text and refined transition timing.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• piyushdotcomm/Editron#165: Adds the mobile hamburger menu and Sheet navigation structure that contains the links restyled in this PR.

Suggested labels

enhancement, ui-ux, type:feature, mentor:piyushdotcomm

Suggested reviewers

• piyushdotcomm

Poem

🐰✨ A rabbit hops through nav design,
With underlines that gracefully align,
Red hover hues and scales so fine,
Mobile sheets now brightly shine! 🎨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding animated hover interactions to the navbar, which aligns with the primary objective of implementing smooth animated underline effects.
Description check	✅ Passed	The PR description provides a comprehensive summary, clearly identifies it as a new feature, includes related issue #183, documents validation steps (build tested, manual testing performed), and includes relevant screenshots for light/dark/mobile views.
Linked Issues check	✅ Passed	The code changes successfully implement the requirements from issue #183: animated underline hover effects with center-origin animation, gradient styling, responsive behavior, and dark/light mode compatibility using CSS pseudo-elements and transitions.
Out of Scope Changes check	✅ Passed	All changes in header.tsx are directly related to implementing navbar hover animations as specified in issue #183; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

modules/home/header.tsx (1)

124-124: ⚡ Quick win

Extract duplicated mobile link styling into a shared constant/component.

The same long class string is repeated three times, which increases drift risk during future style tweaks. Consolidate into one reusable class (or small MobileNavLink helper).

♻️ Suggested refactor

+const mobileNavItemClass =
+  "rounded-xl px-4 py-3 text-sm font-medium text-muted-foreground hover:text-red-500 hover:bg-red-500/5 hover:translate-x-1 border border-transparent hover:border-red-500/20 transition-all duration-300";
...
- className="rounded-xl px-4 py-3 text-sm font-medium text-muted-foreground hover:text-red-500 hover:bg-red-500/5 hover:translate-x-1 border border-transparent hover:border-red-500/20 transition-all duration-300"
+ className={mobileNavItemClass}

Also applies to: 132-132, 140-140

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@modules/home/header.tsx` at line 124, The repeated long Tailwind class string
in modules/home/header.tsx should be consolidated: create a single shared
constant (e.g., MOBILE_LINK_CLASS) or a small helper component (e.g.,
MobileNavLink) that wraps the Link/button used in the mobile nav, move the
className value into that constant/component, and replace the three duplicated
className usages with the shared symbol; ensure MobileNavLink forwards props
(href, children, onClick) and preserves the existing classes and transitions so
behavior and styling remain identical.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@modules/home/header.tsx`:
- Line 124: The repeated long Tailwind class string in modules/home/header.tsx
should be consolidated: create a single shared constant (e.g.,
MOBILE_LINK_CLASS) or a small helper component (e.g., MobileNavLink) that wraps
the Link/button used in the mobile nav, move the className value into that
constant/component, and replace the three duplicated className usages with the
shared symbol; ensure MobileNavLink forwards props (href, children, onClick) and
preserves the existing classes and transitions so behavior and styling remain
identical.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 77908c1e-069e-4c7d-83a3-1be273fac96c

📥 Commits

Reviewing files that changed from the base of the PR and between a5c37f9 and 20bc544.

📒 Files selected for processing (1)

• modules/home/header.tsx

[piyushdotcomm]

lgtm