How to implement dual hover for desktop and tap feedback for touch devices in a React hamburger menu?

I’m working on a responsive navigation component using React and SCSS. My goal is to have a hover effect on desktop when a user hovers over the hamburger icon and a tap effect on mobile devices where the lines turn gold on tap (and stay gold for .3 seconds after tap)

SCSS code

.hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
cursor: pointer;
z-index: 101;

.line {
  height: 3px;
  background: $white;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

&:active .line, &.active .line {
  background-color: $dark-gold;
  transition: background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  &:hover .line {
    background-color: $dark-gold;
  }
}

}

React component

import { React, useState } from 'react'

import { Link } from ‘react-router-dom’;

const Header = () => {
const [menuOpen, setMenuOpen] = useState(false)

const toggleMenu = () => {
    setMenuOpen((prev) => !prev)
}

const closeMenu = () => {
    setMenuOpen(false)
}

return (
    <header className="header">
        <Link to="/">
            <img src="./img" 
                alt="Company Logo" 
                className="logo"
            />
        </Link>
        <nav className={`nav-menu ${menuOpen ? 'open' : ''}`}>
            <Link to="/" className='nav-item' onClick={closeMenu}>Home</Link>
            <Link to="/about" className='nav-item' onClick={closeMenu}>About Us</Link>
            <a href="#" className="nav-item" onClick={closeMenu}>Products</a>
            <Link to="/mc-cares" className='nav-item' onClick={closeMenu}>MC Cares</Link>
            <Link to="/faqs" className='nav-item' onClick={closeMenu}>FAQs</Link>
        </nav>
        <div className="hamburger" onClick={toggleMenu}>
            <div className="line"></div>
            <div className="line"></div>
            <div className="line"></div>
        </div>
    </header>
);

};

export default Header

The desktop hover effect works perfectly. It’s the tap that isn’t working.

Do you know is there a better way to handle this dual action (hover for desktop + tap for mobile) with React and SCSS?