Navbar.js

import React from 'react';
import './Navbar.css';
import { FaHome } from 'react-icons/fa';
import { FaUserCircle } from 'react-icons/fa';
import { FaEnvelope } from 'react-icons/fa';
import { FaUsers } from 'react-icons/fa';
import { FaHeart } from 'react-icons/fa';
import { FaSearch } from 'react-icons/fa';
import { FaChevronCircleDown } from 'react-icons/fa';
import { FaTimesCircle } from 'react-icons/fa';
import { FaBirthdayCake } from 'react-icons/fa';
import { useState, useEffect, useRef } from 'react';

function Navbar() {
  const [searchBarFocussed, setSearchBarFoucssed] = useState(false);
  const [searchBarMobileActive, setSearchBarMobileActive] = useState(false);
  const [displayLogo, setDisplayLogo] = useState(true);

  useEffect(() => {
    if (searchBarMobileActive === false) {
      setDisplayLogo(false);
      let animationTime = 200;
      let animationTimeOut = setTimeout(() => {
        setDisplayLogo(true);
      }, animationTime);
      return () => {
        clearTimeout(animationTimeOut);
      };
    }
  }, [searchBarMobileActive]);

  // When the container of the logo is below certain width (as of now 125px) we will display logo picture

  return (
    <>
      <nav>
        {/* Navbar container */}
        <div className='nav-container'>
          {/* logo */}
          <div className={`logo ${searchBarMobileActive ? 'logo-icon' : ''}`}>
            <h4>
              {displayLogo &&
                (searchBarMobileActive ? <FaBirthdayCake /> : 'The Navbar')}
            </h4>
          </div>

          {/* Search bar for laptops and tablets */}
          <div className='search-bar'>
            <form className='search-form'>
              <input
                type='text'
                className='search-input'
                onFocus={() => setSearchBarFoucssed(true)}
                onBlur={() => setSearchBarFoucssed(false)}
              />
              {/* placeholder icon and text for animation */}
              <div
                className={`search-placeholder-container ${
                  searchBarFocussed ? 'search-placeholder-active' : ''
                }`}
              >
                <FaSearch className='search-icon' />
                <span
                  className={`placeholder-text ${
                    searchBarFocussed ? 'placeholder-text-active' : ''
                  }`}
                >
                  Search
                </span>
              </div>
              <button type='submit' className='search-submit-button'></button>
            </form>
          </div>

          {/* search bar mobile */}

          {/* Navigation links mobile */}
          <ul className='nav-links-mobile'>
            <li
              className={`nav-icon-container ${
                searchBarMobileActive ? 'search-container-mobile' : ''
              }`}
            >
              <a href='#' className='nav-link'>
                <div
                  className={`search-bar-mobile ${
                    searchBarMobileActive ? 'search-bar-mobile-active' : ''
                  }`}
                >
                  <form className='search-form-mobile'>
                    <FaSearch
                      className={`nav-icon search-icon-mobile  ${
                        searchBarMobileActive ? 'search-icon-mobile-active' : ''
                      }`}
                      onClick={() => setSearchBarMobileActive(true)}
                    />

                    <FaTimesCircle
                      class={`search-close-button-mobile ${
                        searchBarMobileActive
                          ? 'search-close-button-mobile-active'
                          : ''
                      }`}
                      onClick={() => setSearchBarMobileActive(false)}
                    />
                    <input
                      type='text'
                      className={`search-input-mobile ${
                        searchBarMobileActive
                          ? 'search-input-mobile-active'
                          : ''
                      }`}
                      onBlur={() => setSearchBarMobileActive(false)}
                    />

                    <button
                      type='submit'
                      className='search-submit-button-mobile'
                    ></button>
                  </form>
                </div>
              </a>
            </li>
            <li className='nav-icon-container'>
              <a href='#' className='nav-link'>
                <FaChevronCircleDown className='nav-icon' />
              </a>
            </li>
          </ul>

          {/* Navigation links */}
          <ul class='nav-links'>
            <li className='nav-icon-container'>
              <a href='#' className='nav-link'>
                <FaHome className='nav-icon' />
              </a>
            </li>
            <li className='nav-icon-container'>
              <a href='#' className='nav-link'>
                <FaEnvelope className='nav-icon' />
              </a>
            </li>
            <li className='nav-icon-container'>
              <a href='#' className='nav-link'>
                <FaUsers className='nav-icon' />
              </a>
            </li>
            <li className='nav-icon-container'>
              <a href='#' className='nav-link'>
                <FaHeart className='nav-icon' />
              </a>
            </li>
            <li className='nav-icon-container'>
              <a href='#' className='nav-link'>
                <FaUserCircle className='nav-icon' />
              </a>
            </li>
            <li className='nav-icon-container drop-down'>
              <a href='#' className='nav-link'>
                <FaChevronCircleDown className='nav-icon' />
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </>
  );
}

export default Navbar;