Bootstrap Navbar Tutorial Style Custom JS dan CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Font Awesome -->
    <script
      src="https://kit.fontawesome.com/6951010ac6.js"
      crossorigin="anonymous"
    ></script>
    <!-- Bootstrap Link -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
    <title>Document</title>
    <style>
      .form-control {
        position: absolute;
        top: 0;
        left: 0;
        width: 92%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        background-color: #f8f9fa;
        border: none;
        box-shadow: none !important;
        font-size: 25px;
        font-weight: 700;
        display: none;
      }
      .form-control:focus {
        background-color: #f8f9fa;
      }
      #cross {
        display: none;
      }
      .fa-times {
        position: absolute;
        top: 40%;
        font-size: 25px;
        color: rgba(58, 56, 56, 0.459);
      }
      .search a {
        color: black;
      }
      .dropdown-menu.show {
        top: 60px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light py-4">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item mx-3">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>

            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <div class="d-flex justify-content-center align-items-center">
            <form class="d-flex">
              <input
                id="search-input"
                class="form-control me-2"
                placeholder="Search"
                aria-label="Search"
              />
            </form>
            <div class="search ms-3">
              <a href="javascript:void(0)" onclick="myFunction()"
                ><i class="fas fa-search" id="toggle"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <script>
      function myFunction() {
        var x = document.getElementById("search-input");

        if (x.style.display === "block") {
          x.style.display = "none";
          document.getElementById("toggle").classList.remove("fa-times");
          document.getElementById("toggle").classList.add("fa-search");
        } else {
          x.style.display = "block";
          document.getElementById("toggle").classList.remove("fa-search");
          document.getElementById("toggle").classList.add("fa-times");
        }
      }
    </script>
    <!-- <script src="js/bootstrap.bundle.min.js"></script> -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
Depressed Dragonfly