Responsive menu not toggling properly based on screen size using Tailwind CSS and JavaScript

0

I’m trying to make navigation bar responsive but I’m encountering problem. here navigation bar content is hidden on large screens and shown on small screens instead of the intended opposite behavior
<div class="w-full flex justify-between items-center lg:hidden">

and how to hide navigation menu content when the screen is large(maximized), display the content when the screen is minimized by clicking on hamburger menu??

Please explain how to make this bar responsive.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
  <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</head>

<body>
  <header class="w-full px-32 py-8 font-medium md:flex md:items-center md:justify-between relative">
    <div><ion-icon onclick="onToggleMenu(this)" name="menu" class="text-3xl cursor-pointer flex lg:hidden"></ion-icon>
    </div>

    <div class="w-full flex justify-between items-center">
      <nav>
        <a href="/" class="underline group inline-block relative mx-4">Home<span class="underline-span"></span></a>
        <a href="/about.html" class="underline group inline-block relative mx-4">About<span
            class="underline-span"></span></a>
        <a href="/projects.html" class="underline group inline-block relative mx-4">Projects<span
            class="underline-span"></span></a>
        <a href="/artblog.html" class="underline group inline-block relative ml-4">Art Blog<span
            class="underline-span"></span></a>
      </nav>

      <nav class="items-center justify-center flex flex-wrap">
        <a href="#" target="_blank" class="social-link mr-3"><iconify-icon icon="devicon:linkedin"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link mx-3"><iconify-icon icon="devicon:github"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link mx-3"><iconify-icon
            icon="skill-icons:instagram"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link mx-3"><iconify-icon icon="logos:google-gmail"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link ml-4"><iconify-icon icon="logos:pinterest"></iconify-icon></a>
      </nav>

      <div class="absolute flex left-[50%] top-2 translate-x-[-50%] items-center justify-center mt-2">
        <a href="/"
          class="w-16 h-16 bg-black text-lime-50 flex items-center justify-center rounded-full text-2xl font-bold">SD</a>
      </div>
    </div>

    <div class="nav-links min-w-[50vw] flex-col justify-between z-30 items-center fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
bg-black/70 light:bg-dark/75 rounded-lg backdrop-blur-md py-32">
      <nav class="flex flex-col items-center justify-center">
        <a href="/" class="underline group inline-block relative mx-4">Home<span class="underline-span"></span></a>
        <a href="/about.html" class="underline group inline-block relative mx-4">About<span
            class="underline-span"></span></a>
        <a href="/projects.html" class="underline group inline-block relative mx-4">Projects<span
            class="underline-span"></span></a>
        <a href="/artblog.html" class="underline group inline-block relative ml-4">Art Blog<span
            class="underline-span"></span></a>
      </nav>

      <nav class="items-center justify-center flex flex-wrap">
        <a href="#" target="_blank" class="social-link mr-3"><iconify-icon icon="devicon:linkedin"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link mx-3"><iconify-icon icon="devicon:github"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link mx-3"><iconify-icon
            icon="skill-icons:instagram"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link mx-3"><iconify-icon icon="logos:google-gmail"></iconify-icon></a>
        <a href="#" target="_blank" class="social-link ml-4"><iconify-icon icon="logos:pinterest"></iconify-icon></a>
      </nav>

      <div class="absolute flex left-[50%] top-2 translate-x-[-50%] items-center justify-center mt-2">
        <a href="/"
          class="w-16 h-16 bg-black text-lime-50 flex items-center justify-center rounded-full text-2xl font-bold">SD</a>
      </div>
    </div>



  </header>

  <script>
    const navLinks = document.querySelector('.nav-links')
    function onToggleMenu(e) {
      e.name = e.name === 'menu' ? 'close' : 'menu'
      navLinks.classList.toggle('top-[50%]')
    }
  </script>

</body>

</html>