How to solve issue in @media screen CSS in react

I am creating a project where the navigation bar style changes according to the device type [PC/Mobile] but I don’t know how to change the CSS method

according to this website we can do it but it’s using the old version of react and when I tried in mine then its full of error

So, my code: I need to animate that <div className="mobileMode">

import React from 'react';
import {Link} from 'react-router-dom';
import "./NavigationStyle.css"
function NavigationBar(){
    return(
        <nav>
            <div className="mobileMode">
                <div className="line"></div>
                <div className="line"></div>
                <div className="line"></div>
            </div>
            <ul>
                <Link className="navLink" to="/">
                    <li>Home</li>
                </Link>
                <Link className="navLink" to="/myprojects">
                    <li>Projects</li>
                </Link>
                <Link className="navLink" to="/contact">
                    <li>Contact</li>
                </Link>
            </ul>
        </nav>
    )
}

export default NavigationBar;

and the css part: See I need to animate onClick to that .navLink.open and that li.fade

I Have got this code from YouTube

// -- Code --

@media screen and (max-width:510px){
    // -- Code --
    .navLink{
        position: fixed;
        background-color: rgb(44, 44, 44);
        width: 100%;
        height: 100vh;
        flex-direction: column; 
        clip-path: circle(100px at 90% -10%);
        -webkit-clip-path: circle(100px at 90% -10%);
        transition: all 1s ease-out;
        color: rgb(226, 241, 255);
    }
    .navLink.open{
        clip-path: circle(900px at 90% -10%);
        -webkit-clip-path: circle(900px at 90% -10%);
        pointer-events: all;
    }
    .navLink li{
        opacity: 0;
    }
    .navLink li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .navLink li:nth-child(2){
        transition: all 0.5s ease 0.2s;
    }
    .navLink li:nth-child(3){
        transition: all 0.5s ease 0.2s;
    }
    li.fade{
        opacity: 1;
    }
}

whole code is there at: Github

Answer

The problem was where you placed style with the clip-path option. You have specified for each child .navLink, but must be a parent ul. I’m did replicate in the sandbox. example

ul {
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
  width: 50%;
}

@media screen and (max-width: 510px) {
  ul {
    display: flex;
    position: fixed;
    background-color: rgb(44, 44, 44);
    width: 100%;
    height: 100vh;
    flex-direction: column;
    clip-path: circle(30px at 95% 2%);
    -webkit-clip-path: circle(30px at 95% 2%);
    transition: all 1s ease-out;
  }
  ul.open {
    clip-path: circle(150vh at 90% -10%);
    -webkit-clip-path: circle(150vh at 90% -10%);
    pointer-events: all;
  }
}