Hamburger menu logic not working properly in React - reactjs

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.