Fix: Active route not highlighted in Sidebar navigation

[Ananya-CM]

🐛 Bug Report

Area: Sidebar — Navigation
Type: Bug — Missing Active State
Priority: Medium

📌 Description

The Sidebar navigation in FlowForge does not highlight
the currently active route. When a user navigates to
Dashboard, Projects, Workspace, or Chat, none of the
sidebar links show a visual active/selected state.
This makes it impossible for users to know which
page they are currently on just by looking at
the sidebar.

---

🔍 Root Cause

The Sidebar component uses static link styling
without checking the current pathname. It needs
to use Next.js usePathname() hook to compare
the current route and apply active styles
conditionally.

---

❌ Current Behaviour

• All sidebar links look identical regardless
  of which page is active
• User has no visual indication of current location
• Poor navigation UX — standard in all modern apps

---

✅ Expected Behaviour

• The active route link should be visually
  highlighted (e.g. background color, bold text,
  or accent color indicator)
• Highlight should update automatically when
  user navigates between pages
• Matches the app's existing emerald/teal
  color scheme

---

💡 Proposed Fix

In frontend/app/components/Sidebar.tsx:

1. Import usePathname from next/navigation
2. Compare each link's href with current pathname
3. Apply active styles conditionally:

const pathname = usePathname();

// For each link:
className={`... ${pathname === href 
  ? "bg-emerald-50 text-emerald-700 font-semibold" 
  : "text-slate-600 hover:bg-slate-100"}`}

---

📂 File to Change

frontend/app/components/Sidebar.tsx

---

🖥️ Steps to Reproduce

1. Run app locally (npm run dev)
2. Log in and navigate to /dashboard
3. Look at the sidebar — Dashboard link looks
   same as all other links
4. Click Projects — again no visual difference
5. No active state shown anywhere

---

@Shriii19
I'd like to work on this issue.
Could you please assign it to me?

nsoc26

[github-actions]

👋 Hey @Ananya-CM!

Thanks for opening this issue! 🚀

📌 NSoC'26 Contribution Guidelines

⚠️ Please follow these rules carefully:

• Do NOT create a PR until this issue is assigned to you
• Include NSoC'26 tag
• Include screenshots if it's UI-related
• Follow all contribution guidelines properly

🧑‍💻 A mentor will review and assign this issue soon.

---

🙏 Thank you for raising this issue!
We’ll review it as soon as possible. We truly appreciate your contribution ✨

📖 Meanwhile, please make sure you have checked:

• README.md
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

🚫 Reminder: Do NOT create a PR until this issue has been assigned.

Happy coding! 💻🔥