Fixes #140 Highlight home in navbar when user is on home page

[DeveloperAmrit]

Closes #140

📝 Description

🔧 Changes Made

📷 Screenshots or Visual Changes (if applicable)

🤝 Collaboration

Collaborated with: @username (optional)

✅ Checklist

• [ y] I have read the contributing guidelines.
• [ y] I have added tests that prove my fix is effective or that my feature works.
• [ y] I have added necessary documentation (if applicable).
• [ y] Any dependent changes have been merged and published in downstream modules.

Summary by CodeRabbit

• Style
  • Enhanced navigation menu with visual highlighting for the active Home menu item, making it easier to identify your current location in the app.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Modified the CustomDrawer component to detect the active route using React Navigation's state API and conditionally apply pink text color to the Home menu item when that route is active, addressing the lack of visual feedback indicating the current page.

Changes

Cohort / File(s)	Summary
Navigation Route Highlighting Frontend/src/Screens/CustomDrawer.jsx	Added useNavigationState import to access navigation state. Implemented currentRouteName resolver to extract active route name, accounting for nested MainTabs. Applied conditional pink text styling to Home menu item when currentRouteName matches home route.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 The drawer now knows where you roam,
When tapping to return back home,
Pink text glows, a beacon bright,
Navigation's finally right! ✨

🚥 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: highlighting the home navigation item when the user is on the home page, which matches the code modifications to add active route detection and conditional styling.
Linked Issues check	✅ Passed	The pull request implements the exact requirement from issue #140: highlighting the Home item in the navbar with pink color when the user is on the home page, meeting all stated coding objectives.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to addressing issue #140, with only necessary modifications to CustomDrawer.jsx for detecting the active route and conditionally styling the Home menu item.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c2d9f82 and 600ae21.

📒 Files selected for processing (1)

• Frontend/src/Screens/CustomDrawer.jsx

🔇 Additional comments (2)

Frontend/src/Screens/CustomDrawer.jsx (2)

12-12: LGTM! Import is appropriate.

The useNavigationState import is correctly added and necessary for detecting the active route.

---

156-175: Consider highlighting other menu items when active.

The implementation successfully addresses issue #140 by highlighting the Home item. However, from a UX consistency perspective, other menu items (Tasks, Weight, Medicine, etc.) don't receive similar visual feedback when they're the active screen.

Should the active route highlighting be extended to all menu items for consistency? The current currentRouteName logic would already support this:

<TouchableOpacity onPress={() => navigateTo('AllTasks')} style={styles.link}>
  <Text style={currentRouteName === 'AllTasks' ? styles.activeLink : styles.inactiveLink}>
    Tasks & AI Recommendations
  </Text>
</TouchableOpacity>

If this was intentional and only Home should be highlighted per the requirements, please disregard this comment.

[bhavik-mangla]

inc screenshots of changes

[DeveloperAmrit]

I have attached the screenshot of done changes. Basically when user is on home page the home text in navigation will have pink color.