Merged
Conversation
- Add useState import for menu state management - Add XIcon and SearchIcon for mobile menu UI - Add new Mobile story demonstrating responsive header pattern - Mobile header shows: logo, search icon, hamburger menu - Hamburger menu opens slide-out panel with: - User info (avatar, name, email) - Messages with badge count - Notifications with badge count - Settings - Sign out action - Properly disable demo controls for Mobile story - Works in both light and dark mode - Includes mock page content for context
…u, and auth states - Add showMobileMenu toggle with hamburger menu and slide-out panel - Add user dropdown menu with Profile, Settings, Help, Sign out options - Add isSignedIn toggle to switch between signed in/out UI states - Fix TypeScript types with custom DemoControls interface - Move AppHeaderDivider outside relative container for proper alignment
Deploying ui with
|
| Latest commit: |
a1b749b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://efcfc119.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-appheader-update.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR enhances the AppHeader Storybook demo with comprehensive interactive controls and new UI features including mobile menu support, user authentication states, and dropdown menus.
Changes:
- Added mobile menu with hamburger toggle and slide-out panel for responsive navigation
- Implemented user dropdown menu with Profile, Settings, Help, and Sign out options
- Added isSignedIn toggle to demonstrate signed in vs signed out UI states
- Introduced TypeScript DemoControls interface to properly type the enhanced story controls
- Added XIcon component for the close menu button
- Enhanced the Default story with comprehensive argTypes and interactive demo controls
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800" | ||
| onClick={() => console.log('Settings')} | ||
| > | ||
| <CogIcon /> |
There was a problem hiding this comment.
The CogIcon component used on line 424 is imported from the top of the file and displays with h-5 w-5 dimensions, but the surrounding Profile and Help icons inline are h-4 w-4. This inconsistency in icon sizing within the same menu creates a visually unbalanced appearance. All icons in the dropdown should use the same size for visual consistency.
Suggested change
| <CogIcon /> | |
| <CogIcon className="h-4 w-4" /> |
Comment on lines
+391
to
+467
| {/* User dropdown menu */} | ||
| {userMenuOpen && ( | ||
| <div className="absolute top-full right-0 mt-2 w-56 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"> | ||
| <div className="border-b border-gray-200 px-4 py-3 dark:border-gray-700"> | ||
| <p className="text-sm font-medium text-gray-900 dark:text-white"> | ||
| John Doe | ||
| </p> | ||
| <p className="text-sm text-gray-500 dark:text-gray-400"> | ||
| john@example.com | ||
| </p> | ||
| </div> | ||
| <button | ||
| className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800" | ||
| onClick={() => console.log('Profile')} | ||
| > | ||
| <svg | ||
| className="h-4 w-4" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke="currentColor" | ||
| strokeWidth={2} | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" | ||
| /> | ||
| </svg> | ||
| Your Profile | ||
| </button> | ||
| <button | ||
| className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800" | ||
| onClick={() => console.log('Settings')} | ||
| > | ||
| <CogIcon /> | ||
| Settings | ||
| </button> | ||
| <button | ||
| className="flex w-full items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800" | ||
| onClick={() => console.log('Help')} | ||
| > | ||
| <svg | ||
| className="h-4 w-4" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke="currentColor" | ||
| strokeWidth={2} | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" | ||
| /> | ||
| </svg> | ||
| Help & Support | ||
| </button> | ||
| <div className="my-1 border-t border-gray-200 dark:border-gray-700" /> | ||
| <button | ||
| className="flex w-full items-center gap-3 px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20" | ||
| onClick={() => console.log('Sign out')} | ||
| > | ||
| <svg | ||
| className="h-4 w-4" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke="currentColor" | ||
| strokeWidth={2} | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" | ||
| /> | ||
| </svg> | ||
| Sign out | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
The user dropdown menu and mobile slide-out menu lack proper keyboard navigation support. Users cannot navigate through menu items using Tab/Arrow keys or close menus with the Escape key. Additionally, there's no focus management when the menus open/close, and menu items don't have proper ARIA attributes. For better accessibility, consider adding role="menu", aria-expanded, and keyboard event handlers for Escape, Tab, and Arrow keys.
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
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.
appheader-update.mov