Navbar is updated with proper alignment and drop shadow

[KaranUnique]

Fixes Issue #2692

Issue Description :
The current navbar layout appears visually misaligned and inconsistent with the overall UI of the website. Elements such as the logo, category links, search bar, and icons do not follow a uniform structure, which affects usability and aesthetic balance.
Example: Close #2692

Changes proposed

1. Re-aligned all navbar elements for consistent visual structure
2. Improved spacing between logo, category links, search bar, and user actions
3. Added modern UI enhancements including backdrop blur and soft shadow
4. Updated link styles with better hover effects and uniform padding
5. Ensured full responsiveness across mobile, tablet, and desktop
6. Improved vertical centering for smoother navigation experience

Screenshots

Note to reviewers

1. All existing navbar functionalities (search, cart, dropdown, mobile menu, breadcrumbs) remain intact
2. Visual and structural updates greatly improve usability and aesthetic consistency

Summary by CodeRabbit

• Style
  • Navigation bar now fixed at the top of the page for persistent access
  • Logo size updated across responsive breakpoints
  • Navigation items repositioned to center on desktop view
  • Search bar, wishlist, and cart icons moved to right-aligned section
  • Enhanced user profile dropdown with improved interactions
  • Mobile menu redesigned with improved visual hierarchy
  • Refined spacing, styling, and visual effects throughout header

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@KaranUnique is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

This PR redesigns the user navbar layout for improved visual alignment and consistency. Changes include logo size adjustments and a restructured navbar with fixed positioning, centered desktop navigation, and reorganized action items.

Changes

Cohort / File(s)	Summary
Logo Sizing src/User/components/Navbar/NavLogo.jsx	Updated responsive height classes from md:h-[9vh] h-[6vh] to md:h-[7vh] h-[5vh] to reduce logo size across breakpoints.
Navbar Layout & Structure src/User/components/Navbar/UserNavbar.jsx	Rewrote navbar layout to implement fixed top positioning, centered desktop navigation links, left-aligned logo, and right-aligned actions (Search, Wishlist, Cart). Added dropdown menu for logged-in user profile with admin/dashboard/meet-the-makers/logout links. Enhanced mobile menu trigger and overlay with improved styling. Replaced inline styles with Tailwind utility classes throughout.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• NavLogo.jsx: Trivial styling change (class name substitution).
• UserNavbar.jsx: Substantial layout and JSX structure rewrite affecting positioning, spacing, responsive behavior, dropdown menu, and action area reorganization; review should focus on verifying responsive breakpoint consistency, mobile menu overlay behavior, dropdown accessibility, and icon/component integration.

Possibly related PRs

• Progress bar overlaps navbar fixed #1881 — Also modifies UserNavbar.jsx layout and padding adjustments for navbar structure.
• navbar break in components #1658 — Touches navbar component set including NavLogo sizing and navbar composition (MobileMenu/SearchBar/CartIcon usage).
• new ui integrated with backend #1931 — Modifies UserNavbar.jsx with routing and formatting changes affecting the same component.

Suggested labels

good first issue, level2, gssoc

Suggested reviewers

• codervivek5

Poem

🐰✨ A navbar reborn, with grace and might,
Fixed at the top, aligned just right,
Logo tucked left, actions aligned right,
Centered links dance in desktop light,
Mobile menus blur and glow so bright! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Navbar is updated with proper alignment and drop shadow' accurately describes the main changes: navbar element alignment and visual enhancements (drop shadow/backdrop blur).
Description check	✅ Passed	The PR description follows the template structure with Fixes Issue, Changes proposed, Screenshots, and Note to reviewers sections. All major sections are completed with relevant details.
Linked Issues check	✅ Passed	The PR implements all coding requirements from issue #2692: realigned navbar elements, improved spacing, added visual enhancements (backdrop blur, shadows), updated styling, and ensured responsiveness across device sizes.
Out of Scope Changes check	✅ Passed	All changes are scoped to navbar improvements in NavLogo.jsx and UserNavbar.jsx files, directly addressing the alignment, spacing, and visual enhancement requirements from issue #2692. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/User/components/Navbar/UserNavbar.jsx (1)

263-274: Remove unused props from MobileMenu component call.

The MobileMenu component (line 5 of src/User/components/Navbar/MobileMenu.jsx) is defined to accept only { isOpen, isLoggedIn, username, onClose }, but it is being called with additional props: searchTerm, handleSearch, handleDropdown, openDropdown, and handleLogout. These props are not used anywhere in the component. Remove them from the call at lines 263-274 in UserNavbar.jsx unless MobileMenu is intended to be updated to support search, dropdown, and logout functionality.

🧹 Nitpick comments (3)

src/User/components/Navbar/NavLogo.jsx (1)

6-21: Consider making the logo sizing more robust than vh (optional).
On very short viewports, h-[5vh] can shrink the logo more than intended; consider switching to h-* (rem-based) and adding w-auto object-contain to keep aspect ratio predictable.

src/User/components/Navbar/UserNavbar.jsx (2)

96-105: Dropdown “outside click” ref should include the trigger too.
Right now dropdownRef is on the panel only; clicks on the profile icon can be treated as “outside”, which can lead to flaky open/close behavior depending on event ordering. Consider putting the ref on a wrapper that contains both the icon and the panel.

Also applies to: 179-222

---

230-250: Add basic a11y attributes to the mobile menu button.
Recommend aria-label, aria-expanded={isOpen}, and aria-controls pointing at the mobile menu container id.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cc843a9 and 9ba4dbe.

📒 Files selected for processing (2)

• src/User/components/Navbar/NavLogo.jsx (1 hunks)
• src/User/components/Navbar/UserNavbar.jsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/User/components/Navbar/UserNavbar.jsx (3)

src/User/components/Navbar/NavLogo.jsx (1)

• NavLogo (6-24)

src/User/pages/Home/SearchBar.jsx (1)

• SearchBar (4-28)

src/User/components/Navbar/MobileMenu.jsx (1)

• div (6-104)

🔇 Additional comments (2)

src/User/components/Navbar/UserNavbar.jsx (2)

126-152: Layout/structure changes look consistent and readable.
The left/center/right split + centered desktop links and action cluster is clean, and the Tailwind utilities are coherent for the stated UI goals.

Also applies to: 154-174

---

29-58: No action required. The SearchBar prop contract is correct.

The imported SearchBar component (src/User/components/SearchBar/SearchBar.jsx) expects exactly the props being passed: searchTerm, handleSearch, searchResults, and onResultClick. These match the component's function signature and usage perfectly. There is no prop mismatch or runtime bug here.

Likely an incorrect or invalid review comment.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
vigybag	Ready	Preview, Comment	Dec 13, 2025 9:44am

[github-actions]

Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your valuable contribution to the project 🚀 Keep contributing!! ✨

📢 Don’t forget to share your VigyBag PR on LinkedIn and tag @VigyBag and me — we’d love to celebrate your achievement with you! 🔗💡