Collapsible Navigation Bar in React

This challenge involves creating a functional and visually appealing collapsible navigation bar for a React application using TypeScript. A collapsible navigation bar is a common UI pattern, especially for smaller screens, that conserves space by hiding menu items behind a toggle button. Mastering this will enhance your ability to build responsive and user-friendly interfaces.

Problem Description

Your task is to implement a collapsible navigation bar component in React using TypeScript. This component should:

1. Display a list of navigation links: The component will receive an array of navigation items, each typically containing a label and a URL.
2. Allow toggling of visibility: A button (e.g., a hamburger icon) should be present. Clicking this button should expand or collapse the navigation links.
3. Visually indicate state: When the navigation is expanded, it should be clearly visible. When collapsed, it should be hidden or minimized.
4. Handle responsiveness (optional but recommended): Consider how the navigation should behave on different screen sizes. The collapsible behavior is most critical on smaller screens.

Key Requirements:

• Component Structure: Create a reusable React component (e.g., CollapsibleNav).
• State Management: Use React's state management (e.g., useState hook) to control the expanded/collapsed state of the navigation.
• TypeScript: All code, including component props and internal state, should be typed using TypeScript.
• Styling: Apply basic styling to make the navigation functional and understandable. You can use inline styles, CSS modules, or a CSS-in-JS library.
• Accessibility: Ensure basic accessibility considerations, such as focus management and ARIA attributes, for the toggle button and navigation links.

Expected Behavior:

• Initial State: The navigation should likely be collapsed by default (or as specified).
• Toggle Action: Clicking the toggle button should smoothly animate or immediately change the visibility of the navigation links.
• Link Interaction: Clicking on a navigation link should navigate the user to the specified URL.

Edge Cases:

• No Navigation Items: What happens if the component receives an empty array of navigation items?
• Long Navigation Item Labels: How does the UI handle long labels that might break the layout?
• Rapid Toggling: Ensure the component can handle multiple clicks on the toggle button in quick succession without breaking.

Examples

Let's define a typical structure for navigation items.

interface NavItem {
  label: string;
  url: string;
}

Example 1: Basic Functionality

• Input Data:

  const navItems: NavItem[] = [
    { label: "Home", url: "/" },
    { label: "About", url: "/about" },
    { label: "Contact", url: "/contact" },
  ];
  

• Scenario: The user loads the page. The navigation is collapsed. The user clicks the toggle button.
• Expected Output:
  • Initially, only a toggle button (e.g., hamburger icon) is visible.
  • After clicking the toggle button, the links "Home", "About", and "Contact" become visible, perhaps in a dropdown or sidebar.
  • Clicking the toggle button again collapses the links.

Example 2: Responsiveness (Conceptual)

• Input Data: Same navItems as Example 1.
• Scenario:
  • On a large screen, the navigation might be displayed horizontally as a persistent menu.
  • On a small screen, the navigation collapses into a toggle button.
• Expected Output: The component's behavior adapts based on screen width, showing the collapsible functionality primarily on smaller viewports.

Constraints

• React Version: Use React 18 or later.
• TypeScript Version: Use TypeScript 4.0 or later.
• Dependencies: You can use standard React hooks (useState, useEffect). Avoid complex state management libraries unless absolutely necessary for a specific advanced requirement.
• Styling Approach: Choose one of the following:
  • Inline styles
  • CSS Modules
  • Styled Components (or similar CSS-in-JS library)
• Performance: The component should render efficiently. Avoid unnecessary re-renders.

Notes

• Consider using an icon library (like Font Awesome or Material Icons) for the toggle button, or implement a simple SVG icon.
• Think about the transition effect when expanding/collapsing. CSS transitions or animations can significantly improve the user experience.
• For accessibility, ensure the toggle button has an appropriate aria-label and that focus moves correctly within the navigation when it's expanded.
• The navItems prop should be clearly defined with TypeScript interfaces.
• You might want to handle an isOpen prop for programmatic control or initial state.