nav bar alignment fixed and made navbar responsive #240
nav bar alignment fixed and made navbar responsive #240KaranUnique merged 1 commit intoKaranUnique:mainfrom
Conversation
|
@Nandha050 is attempting to deploy a commit to the Karan Manickam's projects Team on Vercel. A member of the Team first needs to authorize it. |
🎉 Thanks for the PR, @Nandha050!We really appreciate you taking the time to contribute to CryptoHub! 💙 ⭐ Love this project?Please give us a star! It helps the project grow and reach more developers! 🌟 🔗 https://github.com/KaranUnique/CryptoHub--- ✅ PR ChecklistBefore we review, please ensure:
We'll review your PR as soon as possible. Keep up the great work! ✨ |
|
👋 Hi @Nandha050, Please link an issue using one of the following formats:
Linking issues helps us track work and close issues automatically. Thanks! 🙌 |
There was a problem hiding this comment.
Pull request overview
This PR redesigns the main navigation bar to fix desktop alignment issues and add a responsive mobile/tablet experience, including a hamburger menu and a profile-icon-based user dropdown.
Changes:
- Replaced the inline authenticated user menu with a profile icon dropdown (email, change password, logout).
- Added a new responsive mobile menu (hamburger toggle + nested dropdown support).
- Updated navbar layout/spacing and interaction styles across breakpoints in CSS.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
src/components/Navbar.jsx |
Adds profile dropdown + new mobile menu structure and related state/event handling. |
src/components/Navbar.css |
Updates layout (grid/flex), breakpoint behavior, and new styling for profile/mobile menus. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .mobile-menu { | ||
| position: fixed; | ||
| top: 80px; | ||
| top: 64px; | ||
| left: 0; | ||
| right: 0; | ||
| background: linear-gradient(135deg, | ||
| rgba(10, 10, 15, 0.98) 0%, | ||
| rgba(20, 20, 30, 0.95) 100%); | ||
| backdrop-filter: blur(30px) saturate(180%); | ||
| -webkit-backdrop-filter: blur(30px) saturate(180%); | ||
| border-top: 1px solid rgba(176, 38, 255, 0.2); | ||
| border-bottom: 1px solid rgba(176, 38, 255, 0.2); | ||
| width: 100%; | ||
| background: rgba(10, 10, 15, 0.98); | ||
| backdrop-filter: blur(10px); | ||
| -webkit-backdrop-filter: blur(10px); | ||
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | ||
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | ||
| padding: 0.5rem 0; | ||
| animation: slideDown 0.3s ease-out; | ||
| z-index: 999; | ||
| max-height: 0; | ||
| overflow: hidden; | ||
| transition: max-height 0.5s var(--transition-smooth); | ||
| box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); | ||
| max-height: calc(100vh - 64px); | ||
| overflow-y: auto; |
There was a problem hiding this comment.
.mobile-menu is positioned with a hard-coded top: 64px / max-height: calc(100vh - 64px), but the navbar’s actual height varies (padding changes across breakpoints and when scrolled). This can cause the mobile menu to render underneath the navbar or leave gaps. Prefer anchoring to the navbar with top: 100% (and position: absolute within the navbar) or drive the offset via a shared CSS variable for navbar height.
| padding: 0.65rem 4%; | ||
| } | ||
|
|
||
| .navbar-content { |
There was a problem hiding this comment.
In the mobile breakpoint you set grid-template-columns on .navbar-content, but .navbar-content is display: flex by default (it only becomes grid at min-width: 768px). That means the mobile grid-template-columns rule is ignored. If the intent is a 2-column layout on mobile, set display: grid (or move the grid layout to the base rule).
| .navbar-content { | |
| .navbar-content { | |
| display: grid; |
| @@ -1154,8 +1445,8 @@ | |||
| display: none; | |||
| } | |||
There was a problem hiding this comment.
.desktop-only is defined twice in this file (once under “Visibility Classes” and again right before the desktop-only media query). This duplication makes it harder to reason about what the default state should be and invites drift. Consider keeping a single base definition and only overriding inside media queries.
| import { useTheme } from "../context/ThemeContext"; | ||
| import { Link, useNavigate, useLocation } from "react-router-dom"; | ||
| import { FiLock } from "react-icons/fi"; | ||
| import { FiLock, FiUser, FiLogOut, FiMail } from "react-icons/fi"; | ||
| import "./Navbar.css"; | ||
|
|
||
| function Navbar() { | ||
| const { currentUser, logout, isEmailProvider } = useAuth(); | ||
| const { theme } = useTheme(); |
There was a problem hiding this comment.
theme from useTheme() is imported/destructured but never used in this component. This will typically fail eslint/CI (no-unused-vars). Either remove the useTheme import/state, or use theme (e.g., add a theme-based class on the <nav>).
| @@ -44,11 +46,15 @@ function Navbar() { | |||
| if (openDropdown && !event.target.closest('.navbar-item')) { | |||
There was a problem hiding this comment.
The click-outside handler closes openDropdown unless the click target is inside .navbar-item. In the mobile menu, the dropdown trigger (.mobile-menu-link) is not inside .navbar-item, so clicking “More” will open the dropdown and then immediately close it on the same click bubble. Consider including .mobile-menu/.mobile-menu-item in the containment check or stopping propagation from the mobile menu toggle/link clicks.
| if (openDropdown && !event.target.closest('.navbar-item')) { | |
| if ( | |
| openDropdown && | |
| !event.target.closest('.navbar-item') && | |
| !event.target.closest('.mobile-menu') && | |
| !event.target.closest('.mobile-menu-item') | |
| ) { |
| <span | ||
| className="mobile-menu-link" | ||
| onClick={() => handleDropdownClick(link.label)} | ||
| > | ||
| {link.label} | ||
| </span> |
There was a problem hiding this comment.
The mobile dropdown trigger is a clickable <span> without keyboard support. This isn’t accessible (no tab stop / Enter/Space activation / ARIA state). Use a <button type="button"> (preferred) or add role="button", tabIndex={0}, aria-expanded, and onKeyDown handling similar to the desktop dropdown trigger.
| <span | |
| className="mobile-menu-link" | |
| onClick={() => handleDropdownClick(link.label)} | |
| > | |
| {link.label} | |
| </span> | |
| <button | |
| type="button" | |
| className="mobile-menu-link" | |
| onClick={() => handleDropdownClick(link.label)} | |
| aria-expanded={openDropdown === link.label} | |
| aria-haspopup="true" | |
| > | |
| {link.label} | |
| </button> |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
screenshots:
laptop
mobile:
Description
A comprehensive navbar redesign that improves responsiveness, accessibility, and user experience across all devices. This PR implements a professional navigation bar with collapsible mobile menu, profile icon dropdown, and enhanced hover effects.
What problem does it solve?
Previous navbar had alignment issues on desktop and was non-functional on mobile/tablet
User menu took up too much space with inline buttons
No mobile-friendly navigation menu
Missing hover effects on navigation elements
What changes were made?
Profile Icon Dropdown Menu: Replaced inline email/logout buttons with a clean profile icon (FiUser) that opens a dropdown with email, change password link, and logout button
Hamburger Menu: Added animated hamburger icon for mobile (<768px) and tablet (768-1023px) devices that transforms to an X when active
Mobile Menu Dropdown: Full navigation menu structure with support for dropdown items (More menu with Contributors, Contact Us, FAQ)
Responsive Grid Layout: Implemented CSS Grid that adapts:
Mobile: auto 1fr (logo | actions)
Tablet: auto 1fr (logo | actions)
Desktop: auto 1fr auto (logo | menu | actions)
Proper State Management: added isProfileOpen state for profile dropdown and improved click-outside closing logic for both dropdowns
Related Issue
Closes navbar alignment and responsiveness issues
🛠 Type of Change
✨ Enhancement (improves existing functionality)
🚀 New feature (adds new functionality)
♻️ Refactor (code restructuring for better UX)
✅ Checklist
Code follows project coding standards
Self-review completed
Responsive design tested across devices (mobile, tablet, laptop, 4K)
All navigation menus working correctly
Hover effects applying on all devices
Profile dropdown functionality validated
Mobile hamburger menu toggle working
No console errors or warnings introduced
Accessibility improvements (ARIA labels, focus-visible states)
Testing Done
Test cases executed:
✅ Mobile (<768px): Hamburger menu shows, dropdown opens/closes on tap, profile icon visible (48px)
✅ Tablet (768-1023px): Hamburger menu shows, dropdown opens/closes, profile icon larger (50px)
✅ Laptop (1024-1279px): Full navigation bar visible, profile dropdown works, proper padding (3%)
✅ Large Desktop (1280px+): Full layout with optimal spacing, profile icon (52px)
✅ Hover effects: All nav items show gradient background, scale, glow, and animated underline
✅ Profile dropdown: Opens/closes on click, closes on click-outside and ESC key
✅ Responsive grid: Logo, menu, actions layout properly on all breakpoints
✅ Mobile menu dropdowns: "More" menu expands to show Contributors, Contact Us, FAQ
@KaranUnique i have fixed issue "fix nav bar alignment issue #215".and i have done some extra work to nav bar added repposiveness and added user profile.oonce check changes and merge the pr.