How to create responsive header like the Valorant site?

I just started to code for 2 months and I’m trying to copy the responsiveness of the official valorant website header. I only managed to copy where the header list like [Game Info, Media, News, Leaderboards, Support, Our socials, Esports] will be responsive. When it is fullscreen, everything is visible but if user reduce the browser the header lists will slowly reduce.

My Problem:
There is search icon in the header, it will expand if user clicks it. My problem is that reduce the browser but dont click the search icon yet. When the browser is reduced, click the search icon. After clicking, it will push away towards right the globe and play now button. While in the official valorant site it will reduce the header list.

Official Valorant Site – When size is reduced
enter image description here

My Clone Site – When size is reduced
enter image description here

https://codepen.io/gmadrian2000/pen/gOVqPaW

    <header>
        <nav>
            <div class="riot-logo">
                <img src="img/logo-white.png" alt="Riot Games Logo" class="logo-default">
                <img src="img/logo-red.png" alt="Riot Games Logo" class="logo-hover">
                <i class="material-icons">arrow_drop_down</i>
            </div>
            <div class="valorant-logo">
                <a href="index.html"><img src="img/valorant-logo.png" alt="Valorant Logo"></a>
            </div>
            <ul class="nav-list">
                <li class="drop-down">
                    <a href="">Game Info<i class="material-icons">arrow_drop_down</i></a>
                    <div class="dropdown-content">
                        <div class="dropdown-top-border"></div>
                        <ul>
                            <li><a href="#">Agents</a></li>
                            <li><a href="#">Maps</a></li>
                            <li><a href="#">Arsenal</a></li>
                            <li><a href="#">Premier</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Media</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Leaderboards</a></li>
                <li class="drop-down">
                    <a href="#">Support<i class="material-icons">arrow_drop_down</i></a>
                    <div class="dropdown-content">
                        <div class="dropdown-top-border"></div>
                        <ul>
                            <li><a href="#">Specs</a></li>
                            <li><a href="#">Support<i class="material-icons">arrow_outward</i></a></li>
                            <li><a href="#">Community Code</a></li>
                        </ul>
                    </div>
                </li>
                <li class="drop-down">
                    <a href="#">Our Socials<i class="material-icons">arrow_drop_down</i></a>
                    <div class="dropdown-content">
                        <div class="dropdown-top-border"></div>
                        <ul>
                            <li><a href="#">X<i class="material-icons">arrow_outward</i></a></li>
                            <li><a href="#">Youtube<i class="material-icons">arrow_outward</i></a></li>
                            <li><a href="#">Instagram<i class="material-icons">arrow_outward</i></a></li>
                            <li><a href="#">Facebook<i class="material-icons">arrow_outward</i></a></li>
                            <li><a href="#">Discord<i class="material-icons">arrow_outward</i></a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Esports<i class="material-icons">arrow_outward</i></a></li>
                <li class="drop-down more-dropdown">
                    <a href="#">MORE<i class="material-icons">arrow_drop_down</i></a>
                    <div class="dropdown-content">
                        <div class="dropdown-top-border"></div>
                        <ul class="more-list">
                            <!-- Moved items will appear here -->
                        </ul>
                    </div>
                </li>
            </ul>
            <div class="search-container">
                <i class="material-icons search-icon">search</i>
                <input type="text" class="search-input">
                <button class="close-btn">
                    <i class="material-icons close">close</i>
                </button>
            </div>       
            <i class="material-icons language">language</i>
            <a class="play-now-btn">Play Now</a>
        </nav>
    </header>

CSS:

header {
  width: 100%;
  background-color: rgb(24, 20, 20);
  text-transform: uppercase;
  position: fixed;
  z-index: 2;
}

/* Header Icon Styles */
header i.material-icons {
  color: gray;
  font-size: 1.125rem;
  vertical-align: middle;
}

nav {
  display: flex;
  align-items: center;
  margin: 0 2.5%;
}

/* Riot Logo and valorant Logo Image */
.riot-logo img,
.valorant-logo img {
  width: 100%;
  height: auto;
}

/* Riot Logo Container */
.riot-logo {
  width: 5em;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: 2.5em;
}

/* Hover Effects for Riot Logo */
.riot-logo img.logo-hover {
  display: none;
}

.riot-logo:hover img.logo-hover {
  display: block;
}

.riot-logo:hover img.logo-default {
  display: none;
}

.riot-logo:hover i.material-icons {
  color: rgb(247, 67, 67);
}

/* Valorant Logo Container */
.valorant-logo {
  width: 1.7em;
  height: 1.5em;
  flex-shrink: 0;
  margin-right: 2em;
}

/* Nav List */
.nav-list {
  list-style-type: none;
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  margin-right: auto;
}

.nav-list li a {
  text-decoration: none;
  padding: 0.8em 1em;
  color: white;
  letter-spacing: 1px;
}

.nav-list li {
  padding: 2.5em 0;
  margin-right: 1em;
}

/* Hover Effects for Nav List */
.nav-list > li > a:hover {
  background-color: rgb(66, 60, 60);
  color: rgb(247, 67, 67);
  border-radius: 10px;
}

.nav-list > li:hover {
  position: relative;
}

.nav-list > li:hover::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 4px;
  background-color: rgb(247, 67, 67);
  border-radius: 10px;
}

.nav-list li a:hover i.material-icons {
  color: white;
}

/* Searchbar Styles */
.search-container {
  display: flex;
  align-items: center;
  background-color: #312f2f;
  border-radius: 15px;
  transition: all 0.7s ease;
  overflow: hidden;
  width: 50px;
  justify-content: flex-start;
  margin-right: 0.5em;
  flex-shrink: 0;
  padding: 12px 0;
  justify-self: end;
}

.search-container .search-icon {
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 13px;
}

.search-input {
  border: none; 
  outline: none;
  color: white;
  background-color: #312f2f;
  font-size: 1rem;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 13px 0 5px; 
}

.close-btn .close {
  color: gray;
  font-size: 1.4rem;
}

.search-container.active {
  width: 240px;
}

.search-container.active .search-input {
  width: 100%;
  opacity: 1;
}

/* Language Icon */
.material-icons.language {
  color: white;
  margin-right: 12px;
}

/* Play Now Button */
.play-now-btn {
  text-decoration: none;
  padding: 0.5em 1.2em;
  background-color: rgb(247, 67, 67);
  border-radius: 12px;
  flex-shrink: 0;
  font-size: 14px;
}

/* Dropdown Styles */
.dropdown-content i.material-icons {
  font-size: 0.6rem;
  vertical-align: top;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(54, 53, 53);
  min-width: 200px;
  z-index: 100;
  border-radius: 5px;
  margin-top: 23px;
}

.dropdown-top-border {
  height: 4px;
  background-color: rgb(247, 67, 67);
  width: 100%;
  border-radius: 2px 2px 0 0;
}

.dropdown-content ul {
  padding: 1.2em;
}

.dropdown-content li {
  list-style-type: none;
  margin-right: 0;
  padding: 0;
}

.nav-list li .dropdown-content a {
  color: rgb(194, 189, 189);
  padding: 1em 1em;
  text-decoration: none;
  display: block;
  font-size: 0.8rem;
  font-weight: 100;
  border-radius: 5px;
}

.nav-list li .dropdown-content a:hover {
  background-color: rgb(76, 73, 73);
  color: white;
}

.nav-list li:hover .dropdown-content {
  display: block;
}

/* Styling for "MORE" dropdown */
.more-dropdown {
  display: none;
}

.more-dropdown .dropdown-content {
  position: absolute;
  background-color: rgb(54, 53, 53);
  min-width: 150px;
  z-index: 100;
  border-radius: 5px;
  margin-top: 23px;
}

.more-dropdown .dropdown-content ul {
  padding: 1em;
}

.more-dropdown .dropdown-content ul li {
  list-style-type: none;
  padding: 0.5em 0;
  display: block;
}

.more-dropdown .dropdown-content ul li a {
  color: rgb(194, 189, 189);
  text-decoration: none;
  display: block;
  font-size: 0.8rem;
  border-radius: 5px;
}

.more-dropdown .dropdown-content ul li a:hover {
  background-color: rgb(76, 73, 73);
  color: white;
}

JS:

const nav = document.querySelector('nav');
const navList = document.querySelector('.nav-list');
const moreDropdown = document.querySelector('.more-dropdown');
const moreList = document.querySelector('.more-list');
const searchContainer = document.querySelector('.search-container');
const searchIcon = document.querySelector('.search-icon');
const closeButton = document.querySelector('.close-btn');
const searchInput = document.querySelector('.search-input');

// Function to adjust nav items
function adjustNavItems() {
    // Move items back from "MORE" dropdown to navList
    moreDropdown.style.display = 'none';
    while (moreList.firstChild) {
        navList.insertBefore(moreList.firstChild, moreDropdown);
    }

    // Shift items to "MORE" if nav overflows
    while (nav.scrollWidth > nav.clientWidth ) {
        moreDropdown.style.display = 'inline-block';
        moreList.insertBefore(navList.children[navList.children.length - 2], moreList.firstChild);
    }
}

// Event listeners
window.addEventListener('resize', adjustNavItems);
window.addEventListener('load', adjustNavItems);

searchIcon.addEventListener('click', () => {
  searchContainer.classList.add('active');
  searchInput.focus();
  
  
});

closeButton.addEventListener('click', () => {
    searchContainer.classList.remove('active');
    searchInput.value = ""; // Clear the input field
    
});

Note: Use HTML,CSS,JS only