Skip to content

Replace NavBarActionDrawer with LeftNavDrawer component - #14146

Merged
dylanjeffers merged 5 commits into
mainfrom
claude/mobile-left-nav-drawer
Apr 20, 2026
Merged

dylanjeffers merged 5 commits into
mainfrom
claude/mobile-left-nav-drawer

Conversation

@dylanjeffers

Copy link
Copy Markdown
Contributor

Summary

Replaced the NavBarActionDrawer component with a new LeftNavDrawer component that provides a more comprehensive mobile navigation experience with a slide-out drawer interface.

Key Changes

  • New Component: Created LeftNavDrawer component with a full-featured navigation menu including:

    • User profile section with avatar, name, and handle
    • Navigation items for Profile, Notifications, Messages, Wallet, Fan Clubs, Rewards, Contests (feature-flagged), Upload, and Settings
    • Notification badges and unread message indicators
    • Audius logo footer
    • Smooth slide-in/out animation with semi-transparent backdrop
  • Removed Component: Deleted NavBarActionDrawer which provided a simpler action menu via the ActionDrawer component

  • Styling: Added LeftNavDrawer.module.css with:

    • Fixed positioning drawer that slides in from the left (75% width, max 320px)
    • Smooth CSS transitions for drawer and background overlay
    • Responsive hover states for navigation items
    • Safe area inset support for notched devices
  • Integration: Updated NavBar.tsx to use the new LeftNavDrawer instead of NavBarActionDrawer

    • Renamed state variable from isActionDrawerOpen to isLeftNavOpen
    • Updated click handlers for avatar and menu button

Implementation Details

  • The drawer uses a Portal for proper z-index layering
  • Navigation items support notification indicators (red dot) and badge counts
  • User profile section is clickable to navigate to profile page
  • Implements proper accessibility with ARIA labels and roles
  • Integrates with existing routing context for stack reset behavior
  • Supports feature flags for conditional menu items (e.g., Contests)

https://claude.ai/code/session_01VDS3E1ti7hbcxC4h4fxG7W

Introduces a slide-from-left navigation drawer on mobile web that mirrors
the native app's LeftNavDrawer: account header (avatar, name, handle) plus
Profile / Notifications / Messages / Wallet / Fan Clubs / Rewards / Contests
(flag-gated) / Upload / Settings. Opens from the top-right avatar tap
(signed in) or kebab (signed out), replacing the bottom action drawer.

https://claude.ai/code/session_01VDS3E1ti7hbcxC4h4fxG7W
@changeset-bot

changeset-bot Bot commented Apr 20, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6180de8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@audius/web Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Apr 20, 2026 •

Copy link
Copy Markdown
Contributor

🌐 Web preview ready

Preview URL: https://audius-web-preview-pr-14146.audius.workers.dev

Unique preview for this PR (deployed from this branch).
Workflow run

@dylanjeffers
dylanjeffers merged commit 9fdd5ec into main Apr 20, 2026
5 checks passed
@dylanjeffers
dylanjeffers deleted the claude/mobile-left-nav-drawer branch April 20, 2026 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants