Skip to content

feat: add sticky sidebar navigation for dashboard sections#1607

Open
AaryanSingh31 wants to merge 4 commits into
Priyanshu-byte-coder:mainfrom
AaryanSingh31:sidebar-navigation-dashboard
Open

feat: add sticky sidebar navigation for dashboard sections#1607
AaryanSingh31 wants to merge 4 commits into
Priyanshu-byte-coder:mainfrom
AaryanSingh31:sidebar-navigation-dashboard

Conversation

@AaryanSingh31
Copy link
Copy Markdown
Contributor

Summary

Added a sticky sidebar navigation component to the dashboard for quick access to all sections without manual scrolling.

Closes #1519


Type of Change

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

Changes Made

  • Created src/components/DashboardSidebar.tsx — sticky sidebar with anchor links to all dashboard sections
  • Added section id attributes to all major sections in src/app/dashboard/page.tsx
  • Added IntersectionObserver for active section highlighting on scroll
  • Added mobile responsive hamburger menu with translucent drawer that closes on item click
  • Installed lucide-react for sidebar icons

How to Test

  1. Run npm run dev and navigate to /dashboard
  2. Verify sidebar is visible on desktop (lg screens) on the left
  3. Click any sidebar item — page should smoothly scroll to that section
  4. Scroll manually — active item should highlight automatically
  5. On mobile/tablet, verify hamburger button appears
  6. Click hamburger — drawer should open with all nav items
  7. Click any item — drawer should close and scroll to section

Screenshots (if UI change)

Screenshot 2026-05-30 125650 Screenshot 2026-05-30 125619

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

Sidebar is hidden on mobile and replaced with a slide-in drawer triggered by a hamburger button. lucide-react was added as it was not previously in the project dependencies.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 30, 2026

@AaryanSingh31 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 github-actions Bot added gssoc26 GSSoC 2026 contribution type:feature GSSoC type bonus: new feature labels May 30, 2026
@github-actions
Copy link
Copy Markdown

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

@AaryanSingh31 AaryanSingh31 marked this pull request as draft May 30, 2026 07:50
@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

This PR has merge conflicts with main. Please rebase your branch against the latest main and force-push to resolve. Run: git fetch upstream && git rebase upstream/main

@Priyanshu-byte-coder Priyanshu-byte-coder added gssoc:approved GSSoC: PR approved for scoring level2 GSSoC Level 2 - Medium complexity (25 points) labels May 31, 2026
@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

This PR has merge conflicts with the current main branch. Please rebase your branch onto main, resolve the conflicts, and force-push. Once conflicts are resolved and the PR is marked as mergeable it will be reviewed for merging.

@AaryanSingh31
Copy link
Copy Markdown
Contributor Author

Okay. I'll work on the conflicts and try to resolve them. Thankyou

@github-actions github-actions Bot added the type:design GSSoC type bonus: UI/design (+10 pts) label Jun 1, 2026
@AaryanSingh31 AaryanSingh31 marked this pull request as ready for review June 1, 2026 05:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved GSSoC: PR approved for scoring gssoc26 GSSoC 2026 contribution level2 GSSoC Level 2 - Medium complexity (25 points) type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] Add sticky sidebar navigation for quick access to dashboard sections

2 participants