diff --git a/package-lock.json b/package-lock.json index 7e7566e..ac10b15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "classnames": "^2.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -5402,6 +5403,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -20598,6 +20604,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", diff --git a/package.json b/package.json index ae022d5..62f5ce1 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "classnames": "^2.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/assets/svgs/close-button.svg b/src/assets/svgs/close-button.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/svgs/close-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/atomo/DropDownItem.tsx b/src/atomo/DropDownItem.tsx new file mode 100644 index 0000000..8b5a34a --- /dev/null +++ b/src/atomo/DropDownItem.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +interface Link { + href: string; + text: string; +} + +function DropDownItem(props: Link) { + return ( +
  • + {props.text} +
    • + ); +} + +export { DropDownItem }; diff --git a/src/components/HeaderTop.tsx b/src/components/HeaderTop.tsx index 526920a..b698b33 100644 --- a/src/components/HeaderTop.tsx +++ b/src/components/HeaderTop.tsx @@ -3,15 +3,13 @@ import style from "./header-top.module.scss"; import logo from "../assets/svgs/m3-logo.svg"; import lupa from "../assets/svgs/lupa.svg"; import cart from "../assets/svgs/buying-cart.svg"; -import menuIcon from "../assets/svgs/menu-hamburguer.svg"; +import { MenuHamburguer } from "./MenuHamburguer"; const HeaderTop = () => { return (
    -
    - Menu Mobile -
    +
    M3 Ecommerce
    diff --git a/src/components/MenuHamburguer.tsx b/src/components/MenuHamburguer.tsx new file mode 100644 index 0000000..218d1ce --- /dev/null +++ b/src/components/MenuHamburguer.tsx @@ -0,0 +1,73 @@ +import React, { useEffect, useState, useRef } from "react"; +import "./header-bottom.module.scss"; +import style from "./header-top.module.scss"; +import menuIcon from "../assets/svgs/menu-hamburguer.svg"; +import closeButton from "../assets/svgs/close-button.svg"; +import { DropDownItem } from "../atomo/DropDownItem"; +import classnames from "classnames"; + +const MenuHamburguer = () => { + const [open, setOpen] = useState(false); + const menuRef = useRef(); + const actualRef = menuRef.current; + useEffect(() => { + const handler = (e: any) => { + if (actualRef) { + if (!actualRef.contains(e.target)) { + setOpen(false); + } + } + }; + document.addEventListener("mousedown", handler); + + return () => { + document.removeEventListener("mousedown", handler); + }; + }); + + return ( +
    } + > +
    { + setOpen(!open); + }} + > + +
    + +
    +
    + + +
    + +
      + + + +
    + +
    +
    +
    + ); +}; + +export { MenuHamburguer }; diff --git a/src/components/header-top.module.scss b/src/components/header-top.module.scss index e778b72..38215f1 100644 --- a/src/components/header-top.module.scss +++ b/src/components/header-top.module.scss @@ -1,5 +1,13 @@ @use "../variables.module.scss"; +ul { + list-style: none; +} + +li { + list-style-type: none; +} + .header-top-container { width: 100%; height: 76px; @@ -31,8 +39,103 @@ grid-template-rows: 1fr 1fr; } - .menu-hamburger { + .menu-container { display: none; + position: relative; + + .menu-hamburger { + outline: 0; + background: transparent; + border: 0; + font-size: 0; + width: 0; + } + + .dropdown-menu { + // display: none; + position: fixed; + left: 0; + top: 0; + + z-index: 8; + } + + .active { + opacity: 1; + visibility: visible; + transition: 0.5 ease; + } + + .inactive { + opacity: 0; + visibility: hidden; + transition: 0.5 ease; + } + + .menu-bottom, + .menu-top { + width: 96.484375%; + min-width: 988px; + padding: 31px 16px; + } + + .menu-top { + background: variables.$color-black; + display: flex; + align-items: center; + justify-content: space-between; + + button { + outline: 0; + background: transparent; + border: 0; + color: variables.$color-white; + } + + button { + img { + width: 15px; + height: 15px; + z-index: 40; + } + } + + // &::after { + // content: ""; + // background-image: url("../assets/svgs/close-button.svg"); + + // } + } + + .menu-bottom { + background: variables.$color-white; + height: 585px; + + display: flex; + flex-direction: column; + gap: 12px; + + a { + text-decoration: none; + color: variables.$color-grey; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + } + } + + .menu-overlay { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + pointer-events: none; + + background-color: rgba(69, 69, 69, 0.7); + z-index: -1; + } @media screen and (max-width: 1024px) { display: block;