Hamburger menu logic not working properly in React

Question

I have set up the logic for Hamburger menu in Navbar.jsx but when I press the hamburger button it just transitions to X button and doesn't display links menu. How do I display the menu and what would be your approach to animating the transition between hamburger and X icon. Here is my code:

import React from 'react' 
import './Navbar.css'
import { useState } from 'react'
import { FaSearch } from 'react-icons/fa'
import { NavLink } from 'react-router-dom'
import { GiHamburgerMenu } from 'react-icons/gi'
import { AiOutlineClose } from 'react-icons/ai'

function Navbar() {
  const [toggleMenu, setToggleMenu] = useState(false)
  const [toggleSearch, setSearchWindow] = useState(false)
  return (
    <div className='mka__navbar'>
         <div className='mka__navbar-links'>
         <div className='mka__navbar-links_container'>
           <p><NavLink to='/'>HOME</NavLink></p>
           <p><NavLink to='/fahrzeugangebote'>FAHRZEUGANGEBOTE</NavLink></p>
           <p><NavLink to='/finanzierung'>FINANZIERUNG</NavLink></p>
           <p><NavLink to='/fahrzeugankauf'>FAHRZEUGANKAUF</NavLink></p>
           <p><NavLink to='/galerie'>GALERIE</NavLink></p>
           <p><NavLink to='/kontakt'>KONTAKT</NavLink></p>
           <div className='mka__search_column'>
        <p><i><FaSearch onClick={() => setSearchWindow(!toggleSearch)} /></i></p>
           {
            toggleSearch ?
              <div className='mka__search-div'>
              < input type="text" value="Suche..."/>  
              </div>
           : null
          }
           </div>
          </div>
          {
           toggleMenu  
          ? <AiOutlineClose color="#fff" className='mka___hamburger-menu' size={27} onClick={() => setToggleMenu(false)} />
          : <GiHamburgerMenu size={27} className='mka___hamburger-menu' color="#fff" onClick={() => setToggleMenu(true)} /> 
          }
          {
          <div className='mka__navbar-menu-margins'>
          <div className='mka__navbar-menu_container'>
            <div className='mka__navbar-menu_container-links'>
              <p><NavLink to='/'>HOME</NavLink></p>
         <p><NavLink to='/fahrzeugangebote'>FAHRZEUGANGEBOTE</NavLink></p>
         <p><NavLink to='/finanzierung'>FINANZIERUNG</NavLink></p>
         <p><NavLink to='/fahrzeugankauf'>FAHRZEUGANKAUF</NavLink></p>
         <p><NavLink to='/galerie'>GALERIE</NavLink></p>
         <p><NavLink to='/kontakt'>KONTAKT</NavLink></p>
              </div>
              </div>
              </div> && toggleMenu
          }
          </div>
      </div>
      
  );
}

export default Navbar;

And here is my CSS code for the same component:

 /* Navbar links */
.mka__navbar {
    display: flex;
    padding: 2rem;
}

.mka__navbar-links {
    flex: 1;
    display: flex;
    justify-content: end;
    align-items: center;
}

.mka__navbar-links_container {
    display: flex;
    flex-direction: row;
}

.mka__navbar-links_container p {
    color: #fff;
    font-size: 14px;
    line-height: 66px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: var(--font-family);
    transition: padding .25s linear;
    padding: 0 0.5rem;
    cursor: pointer;
}

.mka__navbar-links_container p > a:link {
    color: #fff;
}

.mka__navbar-links_container p > a:hover {
    transition: 0.5s;
    color: #db2d2e;
}

.mka__navbar-links_container p > i:hover {
    transition: 0.5s;
    color: #db2d2e;
}

.mka__navbar-links_container p > a.active {
    color: #db2d2e;
}

 /* Hamburger menu */

.mka__navbar-menu_container-links {
    color: #fff;
    font-size: 14px;
    line-height: 66px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: var(--font-family);
    padding: 0 1.5rem;
    cursor: pointer;
    width: 100%;
}

 /* Search */
.mka__search-div {
    background: #0e0e0ed1;
    display: block;
    padding: 15px;
    width: 327px;
    z-index: 888;
    border-radius: 0;
    border-top: 5px solid #db2d2e;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 26rem;
    right: 0;
    top: 9rem;
}

input {
    border: 1px solid #fff;
    background: #0f1215;
    color: gray;
    padding: 12px;
    width: 290px;
}

.mka__search_column {
    display: flex;
    flex-direction: column;
}

 /* Media Queries */
@media (min-width: 992px){
    .mka__navbar-links {
        justify-content: center;
    }
    .mka__navbar-menu_container-links {
        display: none;
    }
    .mka___hamburger-menu {
        display: none;
    }
}

@media (max-width: 992px){
    .mka__navbar-links_container {
        display: none;
    }

    .mka__navbar-menu_container {
        background-color: #0f1215;
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 5px;
    }

    .mka__navbar-menu-margins {
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        margin-top: 40px;
    }
}

@media (min-width: 1200px){
    .mka__navbar-links_container p {
        padding: 0 1rem;
    }
}

@media (max-width: 1200px){
    .mka__search-div {
        left: 21rem;
    }
}

Answer 1

I created a hamburger menu which you can toggle it with X icon. and also implemented the drawer transition. the link is here https://codesandbox.io/s/great-hugle-oy5s8b?file=/src/App.js hope it can help you.