refactor_nextjs_nav_mobile_toggle_labels - Next.js Navigation Refactoring with Mobile Toggle and Labels
Refactor Next.js navigation components to add mobile toggle functionality and text labels for improved mobile usability
Tags
Updated: 2026-03-09Capabilities
Typical Inputs
Typical Outputs
What this skill does
- import React hooks
- initialize state variables
- create toggle handlers
- render toggle buttons
- structure navigation items
- apply conditional rendering
- handle link clicks
- define responsive styles
Inputs
- Next.js navigation component
- existing navData array
- icon imports
- React hooks
- Tailwind CSS classes
Outputs
- refactored navigation component
- mobile toggle functionality
- responsive text labels
- mobile-friendly menu
Requirements
- React
- Next.js framework
- Tailwind CSS
- functional components
- mobile breakpoint support