fix(#1505): implement functional Navbar component

[ishani-1910]

Summary

Enhanced the existing PULL_REQUEST_TEMPLATE.md to improve contribution quality, accessibility awareness, and reviewer guidance.

Closes #1505

---

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

---

Changes Made

Here is a summary of the changes made to resolve the issue:

• Component Creation: Populated the empty Navbar.jsx file with a functional React component.
• Client-Side Rendering: Added the "use client"; directive at the top of the file to support client-side hooks.
• Authentication Integration: Integrated NextAuth's useSession hook to retrieve the current user's session details (such as the GitHub username).
• Navigation Links:
  • Dashboard: Points to /dashboard
  • Leaderboard: Points to /leaderboard
  • Public Profile: Dynamically points to /u/[username] (resolving to /u/demo if no authenticated session is present).
• Styling: Applied Tailwind CSS styling utilizing the workspace's CSS variables (--border, --background, --accent, --foreground) to keep the visual design consistent.

---

How to Test

Here is a summary of how to test these changes, suitable for copying directly into your pull request:

---

Testing Steps

1. Manual Verification

• Development Server: Start the local development server with npm run dev.
• Navigation Links: Open the application in your browser and check if the navbar correctly displays:
  • Dashboard (routing to /dashboard)
  • Leaderboard (routing to /leaderboard)
  • Public Profile (routing to /u/<username>)
• Session State Check:
  • Authenticated: Log in with your GitHub account and verify that the "Public Profile" link dynamically matches your username (e.g., /u/your-username).
  • Unauthenticated: Log out/clear session and verify that the "Public Profile" link defaults to the /u/demo route.
• Theme Compatibility: Verify that the text and borders dynamically adapt color when toggling between dark and light themes (it relies on variables like --background, --foreground, --border, and --accent).

2. Automated Component Testing (Optional)

You can verify the component behavior programmatically with a test like the following using vitest and @testing-library/react:

import { render, screen } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import Navbar from "@/components/Navbar";

// Mock next-auth/react useSession hook
vi.mock("next-auth/react", () => ({
  useSession: () => ({
    data: { githubLogin: "testuser" },
    status: "authenticated",
  }),
}));

describe("Navbar", () => {
  it("renders navigation links correctly with user session", () => {
    render(<Navbar />);
    expect(screen.getByText("Dashboard")).toHaveAttribute("href", "/dashboard");
    expect(screen.getByText("Leaderboard")).toHaveAttribute("href", "/leaderboard");
    expect(screen.getByText("Public Profile")).toHaveAttribute("href", "/u/testuser");
  });
});

---

Screenshots (if UI change)

N/A

---

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

---

Accessibility Checklist

• Proper keyboard navigation tested
• Responsive UI verified
• Accessibility labels added where needed

---

Additional Notes

This update standardizes pull request submissions and helps maintain consistent review quality across contributions.

[vercel]

@ishani-1910 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[Priyanshu-byte-coder]

Closing — this PR adds a Navbar.jsx component that is never imported anywhere in the app. The project uses AppNavbar.tsx registered in layout.tsx. This ghost component has no effect on the application. Please align with the existing AppNavbar.tsx if you want to contribute to navbar improvements.