search

Mosnad-Web01 / movie-project-A-Sanadi-A-Nabil-Feras

0 stars 1 forks source link

Feature/navbar component #8

Closed ahmedalsanadi closed 6 days ago

ahmedalsanadi commented 6 days ago

Pull Request Description

Summary

This pull request introduces several key components and functionalities for the project. It includes the implementation of a responsive navigation bar (Navbar), a sidebar menu (Sidebar), and several dropdown components. Additionally, it integrates dark mode functionality and fetches genre data from an API to populate navigation links.

Changes Made

  1. Components Added:

    • Navbar Component:

      • Implements a responsive navigation bar with a logo, navigation links, a search icon, and a dark mode toggle.
      • Includes a ProfileDropdown for user-related actions and a sidebar toggle button.
      • Integrates with the useDarkMode hook to handle dark mode toggling.

    • Sidebar Component:

      • Provides a side menu that slides in and out based on user interaction.
      • Includes a list of navigational links and dropdown items that can be expanded or collapsed.
      • The sidebar is responsive and appears only when toggled open.

    • LinkDropdown Component:

      • A dropdown menu for navigation links with hover and click functionalities.
      • Displays a list of items with the ability to show more or less items based on user interaction.
      • Integrates with the Link component from Next.js for client-side navigation.

    • ProfileDropdown Component:

      • A user profile dropdown menu that displays user actions like profile view, discussions, lists, ratings, watchlist, and settings.
      • Includes an arrow indicator and responsive design for better usability.

  2. Custom Hooks:

    • useDarkMode Hook:
      • Manages dark mode state and applies the dark mode class to the document.
      • Provides a toggle function to switch between dark and light modes.

  3. API Integration:

    • fetchGenres Function:
      • Fetches movie genres from the TMDB API and returns a list of genre names.
      • This data is used to populate the dropdown items in the Navbar component.

  4. Environmental Configuration:

    • Added an .env.local file with the TMDB API key for secure API access.

  5. Styling and Layout:

    • Applied Tailwind CSS classes to achieve a modern, responsive design for the navigation bar, sidebar, and dropdown menus.
    • Ensured that all new components are styled consistently and adapt to different screen sizes.

Files Modified

Testing

Additional Notes