начал адаптировать стили

src/components/Header/Header.tsx

@@ -1,23 +1,39 @@
 import { NavLink } from "react-router-dom";
 import styles from './Header.module.css'
 import logo from '../../assets/images/Logo.jpg'
+import { useState } from "react";
 
 const Header = () =>{
+const [menuOpen, setMenuOpen] = useState(false);
 
-    return(
+    return (
         <nav className={styles.header}>
             <div className={styles.headerMenu}>
+                
                 <div className={styles.headeLogo}>
                     <img src={logo} alt="logo" className={styles.logoImage}/>
                     <div className={styles.phoneBlock}>
-                        <a href="" className={styles.phoneBlock}>+7 910 121 09 62</a>
+                        <a href="">+7 910 121 09 62</a>
                     </div>
                 </div>
-                <div className={styles.headerNav}>
-                <NavLink to="/" end >ГЛАВНАЯ</NavLink>
-                <NavLink to="about" >O КОМПАНИИ</NavLink>
-                <NavLink to="products" >ПРОДУКЦИЯ</NavLink>
+
+                {/* БУРГЕР */}
+                <div 
+                    className={`${styles.burger} ${menuOpen ? styles.active : ""}`}
+                    onClick={() => setMenuOpen(!menuOpen)}
+                >
+                    <span></span>
+                    <span></span>
+                    <span></span>
                 </div>
+
+                {/* НАВИГАЦИЯ */}
+                <div className={`${styles.headerNav} ${menuOpen ? styles.open : ""}`}>
+                    <NavLink to="/" end onClick={() => setMenuOpen(false)}>ГЛАВНАЯ</NavLink>
+                    <NavLink to="about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink>
+                    <NavLink to="products" onClick={() => setMenuOpen(false)}>ПРОДУКЦИЯ</NavLink>
+                </div>
+
             </div>
         </nav>
     )