feat: implement global design tokens and responsive navbar component - #16
Merged
Conversation
|
@Arpita2919 is attempting to deploy a commit to the namann5's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR updates the Ai_deepfake submodule pointer and implements a mobile-friendly hamburger menu interface for the frontend navbar. The navbar component now manages menu visibility state with animated slide-over and overlay backdrop, while CSS styling adds responsive mobile defaults and Scanner Vault layout adjustments. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
deepscan-frontend/src/components/Navbar.jsx (1)
7-7: Consider using functional state update for toggle.Using
setIsMenuOpen(prev => !prev)ensures the toggle always uses the latest state value, avoiding potential stale closure issues in edge cases.♻️ Suggested improvement
- const toggleMenu = () => setIsMenuOpen(!isMenuOpen); + const toggleMenu = () => setIsMenuOpen(prev => !prev);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@deepscan-frontend/src/components/Navbar.jsx` at line 7, The toggleMenu handler currently flips state using setIsMenuOpen(!isMenuOpen) which can suffer from stale closures; change toggleMenu to use the functional updater form setIsMenuOpen(prev => !prev) so it always inverts the latest state (update the toggleMenu function that references setIsMenuOpen and isMenuOpen).deepscan-frontend/src/App.css (1)
1859-1879: Use100dvhinstead of100vhfor the mobile navigation panel.On mobile browsers,
100vhincludes the area behind the address bar, causing the panel to extend beyond the visible viewport. Using100dvh(dynamic viewport height) adjusts in real-time to the browser UI, solving this issue. It's supported in all modern browsers (94%+ coverage as of 2025), with a simple fallback for older browsers.♻️ Suggested improvement
.navbar__right { position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; + height: 100dvh; background: var(--surface);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@deepscan-frontend/src/App.css` around lines 1859 - 1879, Replace the fixed-height value on the mobile navigation panel so it uses dynamic viewport units: in the .navbar__right rule (and keep .navbar__right.open unchanged) change the height declaration to prefer 100dvh with a 100vh fallback (e.g., specify height: 100vh; then height: 100dvh;) so modern browsers use the dynamic viewport height while older browsers fall back to 100vh.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@deepscan-frontend/src/components/Navbar.jsx`:
- Around line 21-26: The hamburger div (navbar__hamburger) is not keyboard or
screen-reader accessible—update the element used in the Navbar component so it
exposes proper semantics and keyboard behavior: replace or augment the div with
attributes role="button", aria-label (e.g., "Toggle navigation menu"),
aria-expanded set to the isMenuOpen state, and tabIndex="0"; also ensure
toggleMenu is invoked on keyboard activation (Enter/Space) by handling keyDown
and onClick using the existing toggleMenu handler so assistive tech and keyboard
users can interact with the menu.
---
Nitpick comments:
In `@deepscan-frontend/src/App.css`:
- Around line 1859-1879: Replace the fixed-height value on the mobile navigation
panel so it uses dynamic viewport units: in the .navbar__right rule (and keep
.navbar__right.open unchanged) change the height declaration to prefer 100dvh
with a 100vh fallback (e.g., specify height: 100vh; then height: 100dvh;) so
modern browsers use the dynamic viewport height while older browsers fall back
to 100vh.
In `@deepscan-frontend/src/components/Navbar.jsx`:
- Line 7: The toggleMenu handler currently flips state using
setIsMenuOpen(!isMenuOpen) which can suffer from stale closures; change
toggleMenu to use the functional updater form setIsMenuOpen(prev => !prev) so it
always inverts the latest state (update the toggleMenu function that references
setIsMenuOpen and isMenuOpen).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: bdca642e-637c-4152-82d4-6cfa45c35715
📒 Files selected for processing (3)
Ai_deepfakedeepscan-frontend/src/App.cssdeepscan-frontend/src/components/Navbar.jsx
Comment on lines
+21
to
+26
| {/* Hamburger Icon */} | ||
| <div className={`navbar__hamburger ${isMenuOpen ? 'open' : ''}`} onClick={toggleMenu}> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> |
There was a problem hiding this comment.
Add accessibility attributes to the hamburger button.
The hamburger element is not keyboard accessible and lacks semantic information for assistive technologies. Add role, aria-label, aria-expanded, and tabIndex attributes.
♿ Proposed accessibility fix
- <div className={`navbar__hamburger ${isMenuOpen ? 'open' : ''}`} onClick={toggleMenu}>
+ <div
+ className={`navbar__hamburger ${isMenuOpen ? 'open' : ''}`}
+ onClick={toggleMenu}
+ onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') toggleMenu(); }}
+ role="button"
+ tabIndex={0}
+ aria-label="Toggle navigation menu"
+ aria-expanded={isMenuOpen}
+ >
<span></span>
<span></span>
<span></span>
</div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@deepscan-frontend/src/components/Navbar.jsx` around lines 21 - 26, The
hamburger div (navbar__hamburger) is not keyboard or screen-reader
accessible—update the element used in the Navbar component so it exposes proper
semantics and keyboard behavior: replace or augment the div with attributes
role="button", aria-label (e.g., "Toggle navigation menu"), aria-expanded set to
the isMenuOpen state, and tabIndex="0"; also ensure toggleMenu is invoked on
keyboard activation (Enter/Space) by handling keyDown and onClick using the
existing toggleMenu handler so assistive tech and keyboard users can interact
with the menu.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
State Management: Updated the Navbar.jsx component to include an isMenuOpen state using React's useState hook. This tracks whether the mobile menu is currently expanded or collapsed.
Hamburger Icon: Added a custom, animated CSS hamburger icon (.navbar__hamburger) that transforms into an "X" when the menu is open. This icon only appears on mobile viewports (max-width: 768px).
Interactive Sidebar: Transitioned the horizontal desktop navigation links into a sleek, vertical sidebar (.navbar__right) that smoothly slides in from the right edge of the screen when activated.
Auto-Close Mechanism: Implemented click handlers logic to ensure the mobile menu automatically closes whenever a user clicks on a navigation link, the logo, or the Login/Logout actions.
Backdrop Overlay: Introduced a frosted, semi-transparent dark overlay background (.navbar__overlay) that covers the main screen content when the mobile drawer is open. This effectively draws the user's focus precisely to the navigation menu while providing a modern app-like feel.
Responsive Scaling: Fixed the alignment and constraints for the primary AI detection card (.scanner-vault). The CSS was updated to remove absolute positioning transforms for mobile dimensions and implement flexible stacking layout behaviors (flex-direction: column).
Panel Adjustments: Centered the inner scanner panels (.scanner-vault__top-panel and .scanner-vault__main-panel) and adjusted internal padding so they no longer overflow or break horizontally on smaller screen devices.
Summary by CodeRabbit