Navbar - Copy this React, Tailwind Component to your project

make-mega-manus-for-Online-Classes-list-item-and-Courses-List-item.-'import-React,-{-useState,-useEffect-}-from-"react";-import-{-FaFacebook,-FaYoutube-}-from-"react-icons/fa";-import-{-FiMenu,-FiX-}-from-"react-icons/fi";-import-{-IoIosArrowDown-}-from-"react-icons/io";-import-'./Navbar.css'-const-Navbar-=-()-=>-{-const-[isOpen,-setIsOpen]-=-useState(false);-const-[isDropdownOpen,-setIsDropdownOpen]-=-useState(false);-const-[scrolled,-setScrolled]-=-useState(false);-useEffect(()-=>-{-const-handleScroll-=-()-=>-{-setScrolled(window.scrollY->-0);-};-window.addEventListener("scroll",-handleScroll);-return-()-=>-window.removeEventListener("scroll",-handleScroll);-},-[]);-const-toggleMenu-=-()-=>-{-setIsOpen(!isOpen);-if-(isDropdownOpen)-setIsDropdownOpen(false);-};-const-toggleDropdown-=-(e)-=>-{-e.stopPropagation();-setIsDropdownOpen(!isDropdownOpen);-};-useEffect(()-=>-{-const-handleClickOutside-=-(event)-=>-{-if-(isDropdownOpen-&&-!event.target.closest(".dropdown-container"))-{-setIsDropdownOpen(false);-}-};-document.addEventListener("click",-handleClickOutside);-return-()-=>-{-document.removeEventListener("click",-handleClickOutside);-};-},-[isDropdownOpen]);-return-(-<nav-className={`fixed-top-0-w-full-z-50-transition-all-duration-300-${-scrolled-?-"bg-white/80-backdrop-blur-md-shadow-lg"-:-"bg-transparent"-}`}-role="navigation"-aria-label="Main-navigation"->-<div-className="max-w-7xl-mx-auto-px-4-sm:px-6-lg:px-8">-<div-className="flex-items-center-justify-between-h-16">-<div-className="flex-shrink-0">-<img-className="logo"-src="https://github.com/TalhaCodingProjects/Talha-Malik/blob/main/Red.png?raw=true"-alt="Logo"-onError={(e)-=>-{-e.target.onerror-=-null;-e.target.src-=-"https://images.unsplash.com/photo-1599305445671-ac291c95aaa9";-}}-/>-</div>-{/*-Desktop-Navigation-Links-*/}-<div-className="hidden-md:flex-items-center-space-x-4">-{[-{-name:-"Home",-link:-"/"-},-{-name:-"About",-link:-"/about"-},-{-name:-"Courses",-link:-"/courses"-},-{-name:-"Online-Classes",-link:-"/onlineclasses"-},-{-name:-"Services",-link:-"/services"-},-{-name:-"Policies",-link:-"/policies"-},-].map((item)-=>-(-<a-key={item.name}-href={item.link}-className="text-gray-700-hover:text-blue-600-px-3-py-2-rounded-md-text-sm-font-medium-transition-colors-duration-200"-role="menuitem"->-{item.name}-</a>-))}-<div-className="relative-dropdown-container">-<button-onClick={toggleDropdown}-className="text-gray-700-hover:text-blue-600-px-3-py-2-rounded-md-text-sm-font-medium-transition-colors-duration-200-flex-items-center"-aria-expanded={isDropdownOpen}-aria-haspopup="true"->-Join-Us-<IoIosArrowDown-className="ml-1"-/>-</button>-{isDropdownOpen-&&-(-<div-className="absolute-right-0-mt-2-w-48-rounded-md-shadow-lg-bg-white-ring-1-ring-black-ring-opacity-5-transition-all-duration-200">-<div-className="py-1">-{[-{-name:-"As-An-Instructor",-link:-"/join/instructor"-},-{-name:-"As-A-Student",-link:-"/join/student"-},-].map((option)-=>-(-<a-key={option.name}-href={option.link}-className="block-px-4-py-2-text-sm-text-gray-700-hover:bg-gray-100"-role="menuitem"->-{option.name}-</a>-))}-</div>-</div>-)}-</div>-</div>-{/*-Social-Media-Icons-*/}-<div-className="hidden-md:flex-items-center-space-x-4">-<a-href="https://facebook.com/TalhaMalikAcademy"-target="_blank"-className="text-gray-700-hover:text-blue-600-transition-colors-duration-200"-aria-label="Facebook"->-<FaFacebook-className="h-5-w-5"-/>-</a>-<a-href="https://youtube.com/@TalhaMalikAcademy"-target="_blank"-className="text-gray-700-hover:text-red-600-transition-colors-duration-200"-aria-label="YouTube"->-<FaYoutube-className="h-5-w-5"-/>-</a>-</div>-{/*-Mobile-Menu-Button-*/}-<button-onClick={toggleMenu}-className="md:hidden-inline-flex-items-center-justify-center-p-2-rounded-md-text-gray-700-hover:text-blue-600-hover:bg-gray-100-focus:outline-none-focus:ring-2-focus:ring-inset-focus:ring-blue-500"-aria-expanded={isOpen}->-<span-className="sr-only">-{isOpen-?-"Close-main-menu"-:-"Open-main-menu"}-</span>-{isOpen-?-(-<FiX-className="block-h-6-w-6"-/>-)-:-(-<FiMenu-className="block-h-6-w-6"-/>-)}-</button>-</div>-{/*-Mobile-Navigation-Links-*/}-<div-className={`md:hidden-transition-all-duration-300-ease-in-out-${-isOpen-?-"opacity-100-max-h-screen"-:-"opacity-0-max-h-0-pointer-events-none"-}`}->-<div-className="px-2-pt-2-pb-3-space-y-1-bg-white/90-backdrop-blur-md-rounded-b-lg-shadow-lg">-{[-{-name:-"Home",-link:-"/"-},-{-name:-"About",-link:-"/about"-},-{-name:-"Courses",-link:-"/courses"-},-{-name:-"Online-Classes",-link:-"/onlineclasses"-},-{-name:-"Services",-link:-"/services"-},-{-name:-"Policies",-link:-"/policies"-},-].map((item)-=>-(-<a-key={item.name}-href={item.link}-className="block-px-3-py-2-rounded-md-text-base-font-medium-text-gray-700-hover:text-blue-600-hover:bg-gray-100"-role="menuitem"->-{item.name}-</a>-))}-<div-className="space-y-1">-<button-onClick={toggleDropdown}-className="flex-items-center-w-full-px-3-py-2-rounded-md-text-base-font-medium-text-gray-700-hover:text-blue-600-hover:bg-gray-100"-aria-expanded={isDropdownOpen}->-Join-Us-<IoIosArrowDown-className={`ml-1-transform-transition-transform-duration-200-${-isDropdownOpen-?-"rotate-180"-:-""-}`}-/>-</button>-<div-className={`transition-all-duration-200-${-isDropdownOpen-?-"block"-:-"hidden"-}`}->-{[-{-name:-"As-An-Instructor",-link:-"/join/instructor"-},-{-name:-"As-A-Student",-link:-"/join/student"-},-].map((option)-=>-(-<a-key={option.name}-href={option.link}-className="block-px-6-py-2-text-base-font-medium-text-gray-700-hover:text-blue-600-hover:bg-gray-100"-role="menuitem"->-{option.name}-</a>-))}-</div>-</div>-<div-className="flex-space-x-4-px-3-py-2">-<a-href="https://facebook.com/TalhaMalikAcademy"-className="text-gray-700-hover:text-blue-600-transition-colors-duration-200"-aria-label="Facebook"->-<FaFacebook-className="h-5-w-5"-/>-</a>-<a-href="https://youtube.com/@TalhaMalikAcademy"-className="text-gray-700-hover:text-red-600-transition-colors-duration-200"-aria-label="YouTube"->-<FaYoutube-className="h-5-w-5"-/>-</a>-</div>-</div>-</div>-</div>-</nav>-);-};-export-default-Navbar;-'