NavBar

[ahmedalsanadi]

Issue: Create Responsive NavBar with Sidebar and Dark/Light Mode Toggle

Description:

Create a responsive NavBar component that includes the following features:

• Logo: Place a logo on the left side of the NavBar.

• Nav Items: Include the following nav items:

  • Genres: This should be a dropdown list fetched from the TMDB API.
  • Movies: This should be a dropdown list with static items (e.g., "Popular", "Top-Rated", "Now Playing", etc.).
  • TV Shows: This should be a dropdown list with static items (e.g., "Popular", "Top-Rated", etc.).
  • Actors: A simple link to the actors' page.

• Dark/Light Mode Toggle: Add a button to switch between dark and light mode themes.

• Responsive Design:

  • For smaller screens, the NavBar should collapse into a menu icon (hamburger button). When clicked, the menu icon should toggle the visibility of the navigation items.
  • Ensure that the NavBar remains responsive across different screen sizes (mobile, tablet, desktop).

• Sidebar:

  • Create a sidebar that contains the same items as the NavBar.
  • The sidebar should be hidden on smaller screens and accessible via the hamburger menu.

Acceptance Criteria:

• [x] The NavBar is responsive and displays correctly on all screen sizes.
• [x] The dropdown list for Genres is fetched dynamically from the TMDB API.
• [x] The Movies and TV Shows dropdown lists contain static items.
• [x] The dark/light mode toggle button works as expected, and the theme changes throughout the site.
• [x] The sidebar contains the same items as the NavBar and is accessible on smaller screens when the menu icon is clicked.
• [x] The NavBar and Sidebar should both use a consistent design and remain intuitive on all screen sizes.

---

Assigned to : @ahmedalsanadi