responsivemenureact

Menu.jsx:

import React, { useState } from 'react'

import { GiHamburgerMenu } from "react-icons/gi";

import  './style/mymenu.css'

export const Mymenu = () => {

  const [toggle,setToggle]=useState(false);

    const toggleEvent=()=>{

setToggle(!toggle);

console.log(toggle);

  }

    return (

    <div className="nav">

<div className="logo">

Learning Point

</div>

<div  className= {toggle?"menu toggle":"menu"}  >

    <ul  >

        <li>home</li>

        <li>aboutus</li>

        <li>contact us</li>

    </ul>

    

</div>

<div className="icon" onClick={toggleEvent}>

    <GiHamburgerMenu style={{'fontSize':'3em'}}/>

    </div> 

    </div>

  )

}

{toggle?<FaTimes></FaTimes>:<FaBars></FaBars>}

css:

.nav{

    width:100vw;

    display: flex;

    background-color: aqua;

}

.logo{

    width: 30vw;

    background-color: red;

}

ul{

    display: flex;

    justify-content: flex-end;

    column-gap: 2em;

}

ul li{

    list-style-type: none;

}

.menu{

width: 70vw;

background-color: rosybrown;

/* float: right; */

}

.icon{

    /* background-color: royalblue; */

    display: none;

}

@media screen and (max-width:480px){

    .nav{

        flex-direction: column;

    }

    

.menu{

    display: none;

}

    .toggle{

display: block;

/* width: 100vw; */

    }

   

    ul{

        flex-direction: column;

align-items: center;        

    }

    .icon{

        display: block;

        position: absolute;

        right: 0vw;

        top: 10vh;

        

    }

    

}