diff --git a/src/components/Header/MenuButton/MenuButton.tsx b/src/components/Header/MenuButton/MenuButton.tsx index 03df9c8..43f8310 100644 --- a/src/components/Header/MenuButton/MenuButton.tsx +++ b/src/components/Header/MenuButton/MenuButton.tsx @@ -1,15 +1,23 @@ -import React from "react"; +import React, { useContext } from "react"; import styles from "./MenuButton.module.scss"; import menuButton from "../assets/menu-icon.svg"; +import { ModalContext } from "../../../contexts/ModalContext"; + +// const openMenu = () => {}; const MenuButton = () => { + + const { isOpen, setIsOpen } = useContext(ModalContext); + return ( - + + ); }; -export { MenuButton }; \ No newline at end of file +export { MenuButton }; diff --git a/src/components/Header/Searchbox/Searchbox.module.scss b/src/components/Header/Searchbox/Searchbox.module.scss index 787dc4a..70649fa 100644 --- a/src/components/Header/Searchbox/Searchbox.module.scss +++ b/src/components/Header/Searchbox/Searchbox.module.scss @@ -42,6 +42,7 @@ right: 12.78%; //46px; top: 8px; padding: 0; + background: transparent; img { height: 18px; diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx new file mode 100644 index 0000000..83ad562 --- /dev/null +++ b/src/components/List/List.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +interface ListProps { + className: string; + itemsList: { value: string; name: string }[]; +} + +const List = (props: ListProps) => { + const { className, itemsList } = props; + + return ( + + ); +}; + +export { List }; diff --git a/src/components/MainLayout/MainLayout.tsx b/src/components/MainLayout/MainLayout.tsx index 86f5f7b..d7be91c 100644 --- a/src/components/MainLayout/MainLayout.tsx +++ b/src/components/MainLayout/MainLayout.tsx @@ -1,15 +1,20 @@ -import React from "react"; +import React, { useContext } from "react"; import { Outlet } from "react-router-dom"; +import { ModalContext } from "../../contexts/ModalContext"; import { AsideMenu } from "../AsideMenu/AsideMenu"; import { Footer } from "../Footer/Footer"; import { Header } from "../Header/Header"; +import { Modal } from "../Modal/Modal"; import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs"; import styles from "./MainLayout.module.scss"; const MainLayout = () => { + const { isOpen, setIsOpen } = useContext(ModalContext); + return ( <> +
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss new file mode 100644 index 0000000..5b3480b --- /dev/null +++ b/src/components/Modal/Modal.module.scss @@ -0,0 +1,81 @@ +.modal-wrapper { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + + display: flex; + z-index: 5; + + opacity: 0; + pointer-events: none; + transition: all 0.4s ease-in-out; + + &.opened { + opacity: 1; + pointer-events: all; + } + + .modal-content { + width: 96.48%; + height: 585px; + + background: #ffffff; + z-index: 10; + + @media screen and (width <= 480px) { + width: 90.4%; + } + + .modal-header { + background: #000000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 31px 16px; + + img { + display: block; + width: 15px; + height: 15px; + } + } + + .navbar { + padding: 31px 16px; + + .navbar-list { + display: flex; + flex-direction: column; + gap: 12px; + list-style: none; + margin: 0; + padding: 0; + + li { + a { + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: #c4c4c4; + text-decoration: none; + } + } + } + } + } + + .modal-overlay { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + + background: rgba(69, 69, 69, 0.7); + } +} diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx new file mode 100644 index 0000000..e1d5b04 --- /dev/null +++ b/src/components/Modal/Modal.tsx @@ -0,0 +1,49 @@ +import React from "react"; + +import { LoginButton } from "../Header/LoginButton/LoginButton"; +import { List } from "../List/List"; + +import closeIcon from "./assets/close-icon.svg"; + +import styles from "./Modal.module.scss"; + +interface ModalProps { + isOpen: boolean; + setIsOpen: React.Dispatch>; +} + +const navLinks = [ + { name: "Cursos", value: "cursos" }, + { name: "Saiba Mais", value: "saiba-mais" }, + { name: "Institucionais", value: "intitucionais" }, +]; + +const Modal = ({ isOpen, setIsOpen }: ModalProps) => { + return ( +
+
+
+ + Ícone de fechar modal setIsOpen(false)} + /> +
+ +
+
setIsOpen(false)} + /> +
+ ); +}; + +export { Modal }; diff --git a/src/components/Modal/assets/close-icon.svg b/src/components/Modal/assets/close-icon.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/components/Modal/assets/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx new file mode 100644 index 0000000..7811d6f --- /dev/null +++ b/src/contexts/ModalContext.tsx @@ -0,0 +1,22 @@ +import { createContext, useState } from 'react'; + +interface ModalContextData { + isOpen: boolean; + setIsOpen: React.Dispatch>; +} + +interface Props { + children: React.ReactNode; +} + +export const ModalContext = createContext({} as ModalContextData); + +export const ModalProvider: React.FC = ({children}) => { + const [isOpen, setIsOpen] = useState(false); + + return ( + + {children} + + ) +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index d5083a0..aa1a139 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,12 +4,15 @@ import ReactDOM from "react-dom/client"; import Institucional from "./pages/Institucional"; import "./global.scss"; +import { ModalProvider } from "./contexts/ModalContext"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( - + + + );