Как реализовать двойное наведение для рабочего стола и обратную связь по касанию для сенсорных устройств в гамбургер-мен ⇐ CSS

[Anonymous]

Я работаю над компонентом адаптивной навигации, используя React и SCSS. Моя цель — создать эффект наведения на рабочем столе, когда пользователь наводит курсор на значок гамбургера, и эффект касания на мобильных устройствах, при котором линии становятся золотыми при касании (и остаются золотыми в течение 0,3 секунды после нажатия)
Код SCSS

Код: Выделить всё

.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

Код: Выделить всё

import { React, useState } from 'react'

import { Link } из 'react-router-dom';
const Header = () => {
const [menuOpen , setMenuOpen] = useState(false)

Код: Выделить всё

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

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

return (


[img]./img[/img]
                alt="Company Logo"
className="logo"
/>


Home
About Us
[url=#]Products[/url]
MC Cares
FAQs






);

};
экспортировать заголовок по умолчанию
Эффект наведения на рабочем столе работает отлично. Не работает нажатие.
Знаете ли вы, есть ли лучший способ справиться с этим двойным действием (наведение курсора для рабочего стола + нажатие для мобильного устройства) с помощью React и SCSS?

Подробнее здесь: https://stackoverflow.com/questions/793 ... vices-in-a