Skip to content

Add a proper navigation bar to improve app-wide navigation and discoverability #1330

@weiwei-gitch

Description

@weiwei-gitch

Description

DevTrack currently has no navigation bar. The landing page only displays a Sign In → link in the top-right corner. Once a user is signed in, there is no persistent navigation to move between different sections of the dashboard — such as contributions, streaks, PR velocity, or settings. This severely limits usability and discoverability.

Problem

  • No way to navigate between app sections (Dashboard, Streaks, PRs, Goals, Settings) from any page.
  • After signing in, users have no visual anchor to understand the app's structure or find features.
  • The lone "Sign In →" link does not scale once the user is authenticated — there is no profile, logout, or account menu.
  • No mobile-friendly hamburger menu exists for smaller viewports.
  • The absence of a navbar makes the app feel incomplete and harder to use for new users.

Proposed solution

Add a persistent, responsive navbar that includes:

  • Logo / brand — DevTrack logo on the left, linking to the homepage.
  • Navigation links — Dashboard, Streaks, Pull Requests, Goals, and Leaderboard (or equivalent top-level sections).
  • Auth state — Show "Sign in with GitHub" when logged out; show a user avatar + dropdown (Profile, Settings, Sign out) when logged in.
  • Active state indicator — highlight the current page link so users know where they are.
  • Responsive hamburger menu — collapses links into a slide-out or dropdown menu on mobile viewports.
  • Sticky/fixed position — the navbar should remain visible while scrolling.

I would like to work on this issue. Could you please assign this issue to me
ThankYou

Metadata

Metadata

Labels

gssoc:assignedGSSoC: Issue assigned to a contributor

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions