ux_ui_designer

1
import React from "react";
2
import "./burger.css";
3
import { SOCIALS } from "../../utils/SOCIALS";
4
import menu from "../../assets/images/Burger.svg";
5
import open from "../../assets/images/IconButton.svg";
6
function BurgerMenu({ isOpen, toggleMenu }) {
7
  return (
8
    <div className="burger-menu">
9
      <img
10
        className="burger-menu__icon"
11
        onClick={toggleMenu}
12
        style={{ position: isOpen ? "fixed" : "" }}
13
        src={isOpen ? open : menu}
14
        alt="menu"
15
      />
16

17
      {isOpen && (
18
        <div className="menu">
19
          <ul className="menu__list">
20
            {SOCIALS.map((social) => (
21
              <li key={social}>
22
                <a className="menu__link" href="/">
23
                  {social}
24
                </a>
25
              </li>
26
            ))}
27
          </ul>
28
        </div>
29
      )}
30
    </div>
31
  );
32
}
33

34
export default BurgerMenu;
35