Improve mobile menu responsiveness and interaction#1208
Improve mobile menu responsiveness and interaction#1208Annanyatiwary4 wants to merge 2 commits intocodeaashu:mainfrom
Conversation
|
|
|
@Annanyatiwary4 is attempting to deploy a commit to the icecream's projects Team on Vercel. A member of the Team first needs to authorize it. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Incredible work, @Annanyatiwary4! 🚀
🔥 Welcome to DevDisplay — A space where developers and all the tech enthusiasts can connect, collaborate, code, create, and conquer in the tech ecosystem.
At DevDisplay, we don't just welcome contributors—we celebrate them! 🎊 Because here, your ideas matter. Your code matters. You matter. 🚀
💡 This isn't just about adding your profile. It's about making an impact, showcasing your skills, and standing out in the developer ecosystem.
Think of DevDisplay as your own project, not just another open-source contribution. We're not just a platform—we're a global movement redefining the tech space. Our vision is to be the go-to platform for developers and tech enthusiasts worldwide.
🚀 Innovation has no limits!
We encourage you to think beyond the ordinary. Got a revolutionary idea? Spot a gap in the tech world? DevDisplay can be the solution! We want contributors like you to dream big, build bold, and bring game-changing features to life.
🌍 DevDisplay is more than an open-source project. It's a global tech hub, a thriving community, and a platform where you can connect, collaborate, code, create, and conquer.
🔥 Keep pushing boundaries—we're just getting started!
If you put your 💯 into creating something exceptional, you could even join our Global Core Team and also you can lead DevDisplay as a Community Leader in your area, college, or university.
💡 Your issue is now in review!
- Our maintainers will soon review your PR and provide feedback/suggestions. 🚀 Stay tuned, stay engaged, and get ready to bring your ideas to life! 💡
---
📢 Have ideas to improve DevDisplay? Let us know! We're always looking for innovative minds to shape the future of tech.
💬 Join the conversation. Grow with the community. You belong here. 🙌
- 🚀 Join DevDisplay GitHub DevDisplay Discussions: DevDisplay Discussions
📢 Join Our Global Developer Communities & Connect with Innovators:
- 🚀 Join DevDisplay Discord Community: Discord Community
📩 Need Help? Reach Out to the Team:
- 📧 Organization Email: team@devdisplay.org
💻 Follow DevDisplay on Social Media & Stay Updated:
- GitHub Organization: DevDisplay GitHub
- LinkedIn: DevDisplay LinkedIn
- Twitter (X): DevDisplay Twitter
- Instagram: DevDisplay Instagram
🔥 🌟 Thank You for Being Here!
|
Additional Notes: |
|
Hi there! This issue is still open. We are looking forward to your response. |
24 similar comments
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
25 similar comments
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
|
Hi there! This issue is still open. We are looking forward to your response. |
📝 WalkthroughWalkthroughThe PR adds three new UI dependencies (clsx, motion, tailwind-merge) and downgrades three existing packages (cobe, jspdf, lucide-react). The Navbar component is restructured from a non-fixed layout to a fixed header with responsive design, including a mobile hamburger menu overlay, updated positioning, and internal component refactoring. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. 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: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Navbar.jsx`:
- Around line 48-57: The fullscreen menu must behave like a modal: update the
motion.div rendering the panel to include role="dialog" and aria-modal="true",
add an id you can reference from the toggle button via aria-controls, and ensure
the toggle button (the ✕ close and any open button using setMenuOpen) has an
accessible name (aria-label) and reflects state with aria-expanded; preserve
visible focus styles on the button instead of removing them; when opening the
panel move focus into the panel (focus trap or programmatic focus on a container
element) and lock body scrolling until the panel is closed (e.g., add/remove a
no-scroll class on document.body), and restore focus to the triggering element
when closing so keyboard and screen-reader users have proper modal context.
- Around line 31-32: The desktop dropdown is closing when the pointer leaves the
tab strip because handleSetSelected(null) is called from the tab-row leave
boundary while the dropdown panel is rendered as a sibling; wrap both the
trigger row and the dropdown panel in a single parent element (or move the
onMouseLeave handler) so the leave boundary owns both elements, and change the
onMouseLeave that currently calls handleSetSelected(null) to live on that parent
container (or use a single shared mouseleave handler) so selected isn't cleared
while moving from a tab into the panel (update usages in the Tabs component and
any handlers that reference selected and handleSetSelected accordingly).
- Line 20: The navbar's hardcoded z-50 in the Navbar component (the <nav> with
className containing "z-50") conflicts with overlays (VoiceSearch, Profile,
CollaborationHub) that use z-40/z-50; change the navbar to a lower stacking
level (for example "z-30" or another value below overlays) or switch to a
contextual stacking approach (e.g., remove z-50 and rely on a milder z-value) so
dialogs with z-40/z-50 render above it; update the className in Navbar.jsx
accordingly and verify VoiceSearch.jsx, Profile.jsx, and CollaborationHub.jsx
overlays remain visible.
- Around line 58-69: The mobile drawer is mounting desktop-only tab layouts
because Navbar maps TABS and directly renders tab.Component; update the
rendering so mobile drawers pass or select mobile-friendly layouts: add a
mobile-aware flag/check (e.g., useMediaQuery/useBreakpoint or isDrawerOpen &&
smallWidth) in Navbar and either (A) pass a layout prop to tab.Component (e.g.,
<tab.Component layout="stack" />) or (B) extend each TABS entry with a
mobileComponent and render that when on small screens (render
tab.mobileComponent || tab.Component). Update the Developers, Connect, and
Explore components to support the layout prop or provide dedicated
mobileComponent variants that stack columns (remove flex gap-4 / grid-cols-2 on
mobile) so content stacks/flows correctly in the drawer.
- Line 21: Navbar JSX uses a non-existent Tailwind class `max-w-10xl` in the div
with className "max-w-10xl mx-auto flex items-center justify-between px-4 py-3";
replace it with a valid built-in class like `max-w-4xl` or `max-w-screen-2xl`
or, if you truly need a custom size, add a `10xl` entry under
theme.extend.maxWidth in tailwind.config.js and rebuild so the `max-w-10xl`
class becomes available.
🪄 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: 23d5e10e-079d-45e5-b6a7-46bb4c451924
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.jsonsrc/components/Navbar.jsx
| return ( | ||
| <nav className="w-full bg-gray-900 text-white shadow-md"> | ||
| <div className="max-w-10xl mx-auto flex items-center justify-between px-4 py-2"> | ||
| <nav className="fixed left-0 top-0 z-50 w-full bg-gray-900 text-white shadow-md"> |
There was a problem hiding this comment.
The fixed header is now competing with existing dialogs.
Line 20 puts the navbar at z-50, which definitely sits above src/components/Search/VoiceSearch.jsx:1-1 (z-40) and ties with other dialogs already using z-50 (src/components/Profile/Profile.jsx:1-1, src/components/IdeaSubmission/CollaborationHub.jsx:1-1). That will leave some overlays partially hidden behind the header or make stacking depend on DOM order.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Navbar.jsx` at line 20, The navbar's hardcoded z-50 in the
Navbar component (the <nav> with className containing "z-50") conflicts with
overlays (VoiceSearch, Profile, CollaborationHub) that use z-40/z-50; change the
navbar to a lower stacking level (for example "z-30" or another value below
overlays) or switch to a contextual stacking approach (e.g., remove z-50 and
rely on a milder z-value) so dialogs with z-40/z-50 render above it; update the
className in Navbar.jsx accordingly and verify VoiceSearch.jsx, Profile.jsx, and
CollaborationHub.jsx overlays remain visible.
| <nav className="w-full bg-gray-900 text-white shadow-md"> | ||
| <div className="max-w-10xl mx-auto flex items-center justify-between px-4 py-2"> | ||
| <nav className="fixed left-0 top-0 z-50 w-full bg-gray-900 text-white shadow-md"> | ||
| <div className="max-w-10xl mx-auto flex items-center justify-between px-4 py-3"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
configs=$(fd -i '^tailwind\.config(\.(js|cjs|mjs|ts))?$' . || true)
if [ -z "$configs" ]; then
echo "No tailwind.config.* file found."
exit 0
fi
echo "Tailwind config files:"
printf '%s\n' "$configs"
echo
echo "Searching for custom maxWidth / 10xl definitions:"
while IFS= read -r config; do
[ -n "$config" ] || continue
echo "--- $config ---"
rg -n -C2 "maxWidth|10xl" "$config" || true
done <<< "$configs"Repository: codeaashu/DevDisplay
Length of output: 187
🏁 Script executed:
cat -n ./tailwind.config.jsRepository: codeaashu/DevDisplay
Length of output: 2693
🏁 Script executed:
# Check Tailwind version in package.json/package-lock.json
rg -A2 -B2 '"tailwindcss"' package.json package-lock.json | head -30Repository: codeaashu/DevDisplay
Length of output: 947
Use a valid max-width class or add custom 10xl to Tailwind config.
max-w-10xl does not exist in Tailwind CSS 3.4 (your project uses v3.4.16) and is not defined in tailwind.config.js. The default max-width scales only extend to max-w-4xl (56rem). This class will have no effect; consider using max-w-4xl, max-w-screen-2xl, or add a custom 10xl entry to theme.maxWidth in your Tailwind config.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Navbar.jsx` at line 21, Navbar JSX uses a non-existent
Tailwind class `max-w-10xl` in the div with className "max-w-10xl mx-auto flex
items-center justify-between px-4 py-3"; replace it with a valid built-in class
like `max-w-4xl` or `max-w-screen-2xl` or, if you truly need a custom size, add
a `10xl` entry under theme.extend.maxWidth in tailwind.config.js and rebuild so
the `max-w-10xl` class becomes available.
| <div className="hidden items-center gap-4 pr-8 md:flex"> | ||
| <Tabs selected={selected} handleSetSelected={handleSetSelected} dir={dir} /> |
There was a problem hiding this comment.
The desktop dropdown closes before users can reach it.
Line 104 closes the menu as soon as the pointer leaves the tab strip, but the panel is rendered as a sibling at Lines 41-42 and 127-155. Moving from a tab into the dropdown triggers handleSetSelected(null) first, so the menu disappears before any item can be clicked.
Move the leave boundary so it owns both the trigger row and the dropdown panel
- <div className="hidden items-center gap-4 pr-8 md:flex">
- <Tabs selected={selected} handleSetSelected={handleSetSelected} dir={dir} />
- </div>
+ <div
+ className="relative hidden items-center gap-4 pr-8 md:flex"
+ onMouseLeave={() => handleSetSelected(null)}
+ >
+ <Tabs selected={selected} handleSetSelected={handleSetSelected} dir={dir} />
+ <AnimatePresence>{selected && <Content dir={dir} selected={selected} />}</AnimatePresence>
+ </div>- <AnimatePresence>{selected && <Content dir={dir} selected={selected} />}</AnimatePresence>-const Tabs = ({ selected, handleSetSelected, dir }) => (
- <div onMouseLeave={() => handleSetSelected(null)} className="relative flex gap-2">
+const Tabs = ({ selected, handleSetSelected, dir }) => (
+ <div className="relative flex gap-2">Also applies to: 41-42, 104-105, 127-155
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Navbar.jsx` around lines 31 - 32, The desktop dropdown is
closing when the pointer leaves the tab strip because handleSetSelected(null) is
called from the tab-row leave boundary while the dropdown panel is rendered as a
sibling; wrap both the trigger row and the dropdown panel in a single parent
element (or move the onMouseLeave handler) so the leave boundary owns both
elements, and change the onMouseLeave that currently calls
handleSetSelected(null) to live on that parent container (or use a single shared
mouseleave handler) so selected isn't cleared while moving from a tab into the
panel (update usages in the Tabs component and any handlers that reference
selected and handleSetSelected accordingly).
| <motion.div | ||
| initial={{ x: '100%' }} | ||
| animate={{ x: 0 }} | ||
| exit={{ x: '100%' }} | ||
| transition={{ duration: 0.3, ease: 'easeInOut' }} | ||
| className="fixed inset-0 z-40 overflow-y-auto bg-black/90 p-6 backdrop-blur-sm" | ||
| > | ||
| <button onClick={() => setMenuOpen(false)} className="absolute right-4 top-4 text-2xl font-bold text-white"> | ||
| ✕ | ||
| </button> |
There was a problem hiding this comment.
Treat the fullscreen menu as an actual modal.
These lines add icon-only controls with no accessible name, remove the visible focus indicator at Line 83, and don't expose the panel as a dialog. Keyboard and screen-reader users will get generic buttons, no modal context, and background scroll remains active while the menu is open. Add aria-label / aria-expanded / aria-controls, keep a visible focus style, set role="dialog" + aria-modal, move focus into the panel, and lock body scroll until close.
Also applies to: 81-100
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Navbar.jsx` around lines 48 - 57, The fullscreen menu must
behave like a modal: update the motion.div rendering the panel to include
role="dialog" and aria-modal="true", add an id you can reference from the toggle
button via aria-controls, and ensure the toggle button (the ✕ close and any open
button using setMenuOpen) has an accessible name (aria-label) and reflects state
with aria-expanded; preserve visible focus styles on the button instead of
removing them; when opening the panel move focus into the panel (focus trap or
programmatic focus on a container element) and lock body scrolling until the
panel is closed (e.g., add/remove a no-scroll class on document.body), and
restore focus to the triggering element when closing so keyboard and
screen-reader users have proper modal context.
| <div className="mt-12 space-y-12"> | ||
| {TABS.map((tab) => ( | ||
| <motion.div | ||
| key={tab.id} | ||
| initial={{ opacity: 0, y: 20 }} | ||
| whileInView={{ opacity: 1, y: 0 }} | ||
| viewport={{ once: true, amount: 0.3 }} | ||
| transition={{ duration: 0.5, ease: 'easeOut' }} | ||
| > | ||
| <h2 className="mb-4 text-xl font-semibold">{tab.title}</h2> | ||
| <tab.Component /> | ||
| </motion.div> |
There was a problem hiding this comment.
The mobile drawer is still mounting desktop-only layouts.
Line 68 reuses the existing tab panels unchanged. In this same file, Developers and Connect still render three side-by-side columns (flex gap-4 at Lines 188-323), and Explore is fixed to grid-cols-2 at Lines 328-345. On a phone-width drawer that will squeeze or overflow instead of stacking cleanly.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Navbar.jsx` around lines 58 - 69, The mobile drawer is
mounting desktop-only tab layouts because Navbar maps TABS and directly renders
tab.Component; update the rendering so mobile drawers pass or select
mobile-friendly layouts: add a mobile-aware flag/check (e.g.,
useMediaQuery/useBreakpoint or isDrawerOpen && smallWidth) in Navbar and either
(A) pass a layout prop to tab.Component (e.g., <tab.Component layout="stack" />)
or (B) extend each TABS entry with a mobileComponent and render that when on
small screens (render tab.mobileComponent || tab.Component). Update the
Developers, Connect, and Explore components to support the layout prop or
provide dedicated mobileComponent variants that stack columns (remove flex gap-4
/ grid-cols-2 on mobile) so content stacks/flows correctly in the drawer.
1 participant
Description
This PR enhances the mobile view of the navbar to ensure a smoother and more responsive experience.
Changes Proposed
Added a fullscreen slide-in mobile menu with smooth animation.
Hamburger icon now transforms into an “X” when the menu is open.
Maintains the original theme and content structure.
Checklist
Screenshots
[earlier]
[After]
Summary by CodeRabbit
New Features
Style