feat: Hamburger icon content added by Julliet-Mohanta · Pull Request #697 · algoscope-hq/AlgoScope

Julliet-Mohanta · 2026-06-21T15:16:16Z

Pull Request Summary

What changed?

Added navbar links of Challenges, Practice, Home and Favourites as contents of hamburger icon in addition to Sign in and Github links by modifying Navbar.jsx file.

Why is this needed?

Problem/Initial State: Currently, on clicking hamburger icon in mobile-view, only 2 links are appearing as tabs that is Github and Sign-in, which makes it difficult for user to navigate to other pages using hamburger icon on mobiles.
Therefore, the given PR solves this problem and enhance user's navigation experience.

Closes #696

Type of Change

[ X] feat - New user-facing feature or algorithm capability
fix - Bug fix or regression fix
docs - Documentation-only change
style - Formatting or styling change with no behavior change
refactor - Code restructuring with no feature or bug-fix behavior change
[ X] perf - Performance improvement
test - Test coverage or test infrastructure change
build - Build system, dependency, or packaging change
ci - GitHub Actions, Docker, Vercel, or release automation change
chore - Maintenance change that does not affect users
revert - Reverts a previous change

Release Notes

Release note category:

Release note entry:
New navlinks added in hamburger icon.

Testing and Verification

[X ] npm ci or npm install
[X ] npm run format:check
[X ] npm run lint
[X ] npm run build
[X ] Manual browser testing at http://localhost:5173
[X ] Responsive testing for affected views
[ X] No new console errors or warnings

Skipped or additional testing notes:

UI Evidence

Before:

After:

CI/CD and Deployment Impact

[X ] No deployment impact expected
Updates GitHub Actions or release automation
Updates Docker build/runtime behavior
Updates Vercel, Nginx, redirects, or client-side routing behavior
Adds or changes environment variables
Adds, removes, or updates npm dependencies
[X ] Requires maintainer follow-up after merge

Deployment notes:

all the navbar links added in hamburger content are fully functional and directing the users to respective pages.

Reviewer Checklist

[ X] PR title follows Conventional Commits and matches the selected change type
[X ] Scope is focused and unrelated changes are excluded
[X ] Release note category and entry are accurate
[X ] CI checks are expected to pass: format, lint, and build
[ X] UI evidence is included when user-facing screens changed
[X ] Documentation is updated when behavior, setup, or deployment changed

Summary by CodeRabbit

New Features
- Added a 2-column “quick links” grid (Home, Practice, Challenge, Favorites) to the mobile drawer footer.
- Quick links now automatically close the mobile drawer after selection.
- The “Sign In” action in the mobile drawer now also closes the drawer after selection.
Style
- Refined mobile drawer footer spacing and scroll/layout consistency for a cleaner appearance.

netlify · 2026-06-21T15:16:21Z

✅ Deploy Preview for astounding-nougat-da0f6a ready!

Name	Link
🔨 Latest commit	`eb3a1c1`
🔍 Latest deploy log	https://app.netlify.com/projects/astounding-nougat-da0f6a/deploys/6a3f82dfe8ea420009ff3251
😎 Deploy Preview	https://deploy-preview-697--astounding-nougat-da0f6a.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

vercel · 2026-06-21T15:16:22Z

@Julliet-Mohanta is attempting to deploy a commit to the adityapaul2603-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-06-21T15:16:29Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9d252a4d-9b25-4207-908d-fce57721fc6b

📥 Commits

Reviewing files that changed from the base of the PR and between be1b609 and 8198c6b.

📒 Files selected for processing (1)

src/components/Navbar.jsx

📝 Walkthrough

Walkthrough

The mobile drawer footer now includes a 2-column quick-link grid with navigation to Home, Practice, Challenge, and Favorites. Each link closes the drawer on click. Spacing is adjusted in the drawer body and footer, and the Sign In button also closes the drawer.

Changes

Mobile Drawer Footer Quick Links

Layer / File(s)	Summary
Quick-link grid and drawer spacing `src/components/Navbar.jsx`	Adds a 2-column `grid` of `Link` items (Home, Practice, Challenge, Favorites) to the drawer footer, each wired to `onClick={() => setOpen(false)}` to close the drawer on navigation. Adjusts whitespace in the drawer body and footer container; updates the "Sign In" button in the `SignedOut` flow to also call `setOpen(false)` on click.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

algoscope-hq/AlgoScope#404: Both PRs modify src/components/Navbar.jsx to add/route "Challenge"—this PR via the mobile footer quick-links grid, the retrieved PR via route registration.
algoscope-hq/AlgoScope#428: Introduced the mobile drawer footer structure that this PR builds on with the quick-links grid.
algoscope-hq/AlgoScope#432: Overhauled the mobile drawer structure in Navbar.jsx, making it a close structural precursor to this drawer footer update.

Suggested labels

type:feature, level:intermediate, gssoc:approved

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Conventional Commits	⚠️ Warning	The merge commit message "Merge branch 'main' into mobile-view" does not follow conventional commit standards. Conventional commits require format like "feat: description". The reviewer checklist m...	The merge commit message should follow conventional commits format (e.g., "feat: add navbar links to mobile hamburger menu") instead of "Merge branch 'main' into mobile-view".

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: Hamburger icon content added' clearly summarizes the main change of adding navigation links to the hamburger menu in mobile view.
Description check	✅ Passed	The description covers what changed, why it was needed, includes proper Conventional Commit type selection, release notes, testing verification, UI evidence, and addresses the linked issue `#696`.
Linked Issues check	✅ Passed	The PR successfully implements all requirements from issue `#696`: adds Challenges, Practice, Home, and Favourites links to the hamburger menu, improving mobile navigation parity with desktop view.
Out of Scope Changes check	✅ Passed	All changes are focused on the stated objective of enhancing the hamburger menu navigation in Navbar.jsx with no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Algorithm Complexity	✅ Passed	PR modifies only Navbar.jsx (UI component). No algorithm implementations exist in this change, so the complexity check is not applicable.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: one or more packages not found in the registry.

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

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

bijanmurmu

Needs a quick fix for the broken sign-in button.

bijanmurmu · 2026-06-22T11:16:35Z


              {/* Drawer Footer */}
-              <div className="mt-6 pt-4 border-t border-slate-200 dark:border-slate-800/80 space-y-3">
+              <div className="mt-6 pt-4 border-t border-slate-200 dark:border-slate-800/80 space-y-3 relative z-[60]">


Is there any specific reason for adding relative z-[60] here? Because it is breaking the Clerk sign-in modal

I wanted the Drwaer footer section to be above other elements of Drwaer layout..that's why I used the z-index thing. But, since you have correctly pointed that it is breaking the clerk sign-in modal, so I removed that part and traced back to original code.
I have incorporated all the suggestions asked by you.
@bijanmurmu, kindly check and review.
Thank you

bijanmurmu · 2026-06-22T11:23:42Z

                  <span>Github</span>
                </a>
              </div>
+              <div className="grid grid-cols-2 gap-2 pt-2">


Can we move these above the sign-in button? We'll use these links a lot more frequently than the login button.

@bijanmurmu , I have updated the branch mobile-view and changes have been incorporated in the pull request. Now, The links are appearing above the sign in button. The screenshot is attached as proof.
Thank you

…Scope into mobile-view

bijanmurmu

@Julliet-Mohanta

bijanmurmu · 2026-06-22T15:57:49Z

add onClick={() => setOpen(false)} to the <button> inside <SignInButton> . Without this, clicking 'Sign In' opens the modal, but the mobile menu stays stuck open and covers the screen!

@bijanmurmu , Done as suggested by you.

Thank you

bijanmurmu · 2026-06-22T16:37:21Z

@Julliet-Mohanta Fix indentation and remove commented out code

Julliet-Mohanta · 2026-06-22T17:10:23Z

@Julliet-Mohanta Fix indentation and remove commented out code

@bijanmurmu , done finally!
Thank you

Hamburger icon content added

925165b

bijanmurmu suggested changes Jun 22, 2026

View reviewed changes

Julliet-Mohanta added 3 commits June 22, 2026 20:23

Merge branch 'main' into mobile-view

42d0062

Changes according to review

13e2377

Merge branch 'mobile-view' of https://github.com/Julliet-Mohanta/Algo…

79156d0

…Scope into mobile-view

bijanmurmu suggested changes Jun 22, 2026

View reviewed changes

onclick button

be1b609

final fix

4603fc8

Julliet-Mohanta added 2 commits June 23, 2026 20:45

Merge branch 'main' into mobile-view

8198c6b

Merge branch 'main' into mobile-view

eb3a1c1

Uh oh!

Conversation

Julliet-Mohanta commented Jun 21, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Summary

What changed?

Why is this needed?

Type of Change

Release Notes

Release note entry: New navlinks added in hamburger icon.

Testing and Verification

UI Evidence

CI/CD and Deployment Impact

Reviewer Checklist

Summary by CodeRabbit

Uh oh!

netlify Bot commented Jun 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for astounding-nougat-da0f6a ready!

Uh oh!

vercel Bot commented Jun 21, 2026

Uh oh!

coderabbitai Bot commented Jun 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

❌ Failed checks (1 warning)

Uh oh!

bijanmurmu left a comment

Choose a reason for hiding this comment

Uh oh!

bijanmurmu Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

Julliet-Mohanta Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

bijanmurmu Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

Julliet-Mohanta Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

bijanmurmu left a comment

Choose a reason for hiding this comment

Uh oh!

bijanmurmu Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

Julliet-Mohanta Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

bijanmurmu commented Jun 22, 2026

Uh oh!

Julliet-Mohanta commented Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Julliet-Mohanta commented Jun 21, 2026 •

edited by coderabbitai Bot

Loading

Release note entry:
New navlinks added in hamburger icon.

netlify Bot commented Jun 21, 2026 •

edited

Loading

coderabbitai Bot commented Jun 21, 2026 •

edited

Loading