feat(Header): Inicia menu mobile
This commit is contained in:
parent
6193e5f51f
commit
2f566464a2
77
react-ts/package-lock.json
generated
77
react-ts/package-lock.json
generated
@ -14,7 +14,9 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
@ -800,6 +802,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-modal": {
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
|
||||
"integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
@ -1061,6 +1072,12 @@
|
||||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
@ -1298,6 +1315,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/path-parse": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||
@ -1346,6 +1372,17 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
@ -1369,6 +1406,37 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react-modal": {
|
||||
"version": "3.16.1",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
|
||||
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
|
||||
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
|
||||
@ -1599,6 +1667,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||
|
||||
@ -15,7 +15,9 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
|
||||
import './Home.scss'
|
||||
|
||||
import Header from '../../components/Header/Header'
|
||||
import HeaderMobile from '../../components/HeaderMobile/HeaderMobile'
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<Header/>
|
||||
<HeaderMobile/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
4
react-ts/src/assets/images/CloseMobile.svg
Normal file
4
react-ts/src/assets/images/CloseMobile.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
|
||||
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
5
react-ts/src/assets/images/OpenMobile.svg
Normal file
5
react-ts/src/assets/images/OpenMobile.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
|
||||
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
|
||||
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 688 B |
@ -41,6 +41,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.header {
|
||||
display: none;
|
||||
&__wrapper-top {
|
||||
padding: 25px 16px;
|
||||
}
|
||||
&__wrapper-botom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2500px) {
|
||||
.header {
|
||||
@ -1,34 +1,34 @@
|
||||
import './Header.scss';
|
||||
import styles from './Header.module.scss';
|
||||
|
||||
import InputSearch from '../InputSearch/InputSearch';
|
||||
import UserAccount from '../UserAccount/UseAccount';
|
||||
import logoM31280 from '../../assets/images/logo-m3academy.svg';
|
||||
import logoM32500 from '../../assets/images/logo-m3academy2500.svg';
|
||||
import logoM32500 from '../../assets/images/logo-m3academy2500.svg';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className='header'>
|
||||
<div className='header__wrapper-top'>
|
||||
<picture className='header__wrapper-top__picture'>
|
||||
<a className='header__wrapper-top__picture__img1280' href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
|
||||
<img className='header__wrapper-top__picture__logo' src={logoM31280} alt="Logo m3academy" />
|
||||
<header className={styles['header']}>
|
||||
<div className={styles['header__wrapper-top']}>
|
||||
<picture className={styles['header__wrapper-top__picture']}>
|
||||
<a className={styles['header__wrapper-top__picture__img1280']} href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
|
||||
<img className={styles['header__wrapper-top__picture__logo']} src={logoM31280} alt="Logo m3academy" />
|
||||
</a>
|
||||
<a className='header__wrapper-top__picture__img2500' href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
|
||||
<img className='header__wrapper-top__picture__logo' src={logoM32500} alt="Logo m3academy" />
|
||||
<a className={styles['header__wrapper-top__picture__img2500']} href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
|
||||
<img className={styles['header__wrapper-top__picture__logo']} src={logoM32500} alt="Logo m3academy" />
|
||||
</a>
|
||||
</picture>
|
||||
<InputSearch/>
|
||||
<UserAccount/>
|
||||
</div>
|
||||
<div className='header__wrapper-botom'>
|
||||
<ul className='header__wrapper-botom__ul'>
|
||||
<li className='header__wrapper-botom__ul__li'>
|
||||
<div className={styles['header__wrapper-botom']}>
|
||||
<ul className={styles['header__wrapper-botom__ul']}>
|
||||
<li className={styles['header__wrapper-botom__ul__li']}>
|
||||
<a href="/">cursos</a>
|
||||
</li>
|
||||
<li className='header__wrapper-botom__ul__li'>
|
||||
<li className={styles['header__wrapper-botom__ul__li']}>
|
||||
<a href="/">saiba mais</a>
|
||||
</li>
|
||||
<li className='header__wrapper-botom__ul__li'>
|
||||
<li className={styles['header__wrapper-botom__ul__li']}>
|
||||
<a href="/">institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.headerMobile {
|
||||
background-color: $color-black1;
|
||||
padding: 25px 16px;
|
||||
&__logo-cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1025px) {
|
||||
.headerMobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
30
react-ts/src/components/HeaderMobile/HeaderMobile.tsx
Normal file
30
react-ts/src/components/HeaderMobile/HeaderMobile.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import styles from './HeaderMobile.module.scss';
|
||||
|
||||
import MenuMobile from '../MenuMobile/MenuMobile';
|
||||
|
||||
import InputSearch from '../InputSearch/InputSearch';
|
||||
import logoM31280 from '../../assets/images/logo-m3academy.svg';
|
||||
import CartHeader from '../../assets/images/cart-header.svg';
|
||||
|
||||
const HeaderMobile = () => {
|
||||
return (
|
||||
<header className={styles['headerMobile']}>
|
||||
<div className={styles['headerMobile__logo-cart']}>
|
||||
<MenuMobile/>
|
||||
<picture className={styles['headerMobile__logo']}>
|
||||
<img src={logoM31280} alt="Logo m3Academy" />
|
||||
</picture>
|
||||
<ul className={styles['headerMobile__ul']}>
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src={CartHeader} alt="Carrinho de Compras" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<InputSearch/>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeaderMobile
|
||||
@ -31,6 +31,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wrapper-iconSearch {
|
||||
max-width: 992px;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2500px) {
|
||||
.wrapper-iconSearch {
|
||||
max-width: 515.62px;
|
||||
@ -1,13 +1,13 @@
|
||||
import './InputSearch.scss';
|
||||
import styles from './InputSearch.module.scss';
|
||||
|
||||
import IconSearch from '../../assets/images/icon-Search.svg';
|
||||
|
||||
|
||||
const InputSearch = () => {
|
||||
return (
|
||||
<div className='wrapper-iconSearch'>
|
||||
<input className='wrapper-iconSearch__input' type="text" placeholder="Buscar..." />
|
||||
<img className='wrapper-iconSearch__icon' src={IconSearch} alt="Icone de pesquisa" />
|
||||
<div className={styles['wrapper-iconSearch']}>
|
||||
<input className={styles['wrapper-iconSearch__input']} type="text" placeholder="Buscar..." />
|
||||
<img className={styles['wrapper-iconSearch__icon']} src={IconSearch} alt="Icone de pesquisa" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
44
react-ts/src/components/MenuMobile/Component.module.scss
Normal file
44
react-ts/src/components/MenuMobile/Component.module.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.container-components {
|
||||
z-index: 5;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
position: absolute;
|
||||
max-width: 988px;
|
||||
width: 100%;
|
||||
height: 585px;
|
||||
transition: all linear 500ms;
|
||||
&__logon {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: $color-black1;
|
||||
padding: 31px 16px;
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&__ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 12px;
|
||||
background-color: $color-white1;
|
||||
padding: 31px 16px;
|
||||
&__li {
|
||||
a {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $color-grey1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
react-ts/src/components/MenuMobile/ComponentMobile.tsx
Normal file
32
react-ts/src/components/MenuMobile/ComponentMobile.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import styles from './Component.module.scss';
|
||||
|
||||
import UserAccount from '../UserAccount/UseAccount';
|
||||
import CloseMobile from '../../assets/images/CloseMobile.svg';
|
||||
|
||||
|
||||
const MenuComponent = () => {
|
||||
|
||||
return (
|
||||
<div className={styles['container-components']}>
|
||||
<div className={styles['container-components__logon']}>
|
||||
<UserAccount/>
|
||||
<button><img src={CloseMobile} alt="Fecha Menu"/></button>
|
||||
</div>
|
||||
<ul className={styles['container-components__ul']}>
|
||||
<li className={styles['container-components__ul__li']}>
|
||||
<a href="/">Cursos</a>
|
||||
</li>
|
||||
<li className={styles['container-components__ul__li']}>
|
||||
<a href="/">Saiba Mais</a>
|
||||
</li>
|
||||
<li className={styles['container-components__ul__li']}>
|
||||
<a href="/">Institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuComponent;
|
||||
13
react-ts/src/components/MenuMobile/MenuMobile.module.scss
Normal file
13
react-ts/src/components/MenuMobile/MenuMobile.module.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.container-modal {
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
react-ts/src/components/MenuMobile/MenuMobile.tsx
Normal file
25
react-ts/src/components/MenuMobile/MenuMobile.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import styles from './MenuMobile.module.scss';
|
||||
import { useState } from 'react';
|
||||
|
||||
import MenuComponent from './ComponentMobile';
|
||||
|
||||
import OpenMobile from '../../assets/images/OpenMobile.svg';
|
||||
|
||||
const MenuMobile = () => {
|
||||
const [IsOpen, setIsOpen] = useState(false);
|
||||
|
||||
function openModal (): void {
|
||||
setIsOpen(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['container-modal']}>
|
||||
<div className={styles['container-modal__button']}>
|
||||
<button onClick={openModal}></button>
|
||||
</div>
|
||||
{IsOpen ? <MenuComponent/> : <img onClick={openModal} src={OpenMobile} alt="Abre Menu" /> }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuMobile;
|
||||
@ -1,17 +1,17 @@
|
||||
import './UserAccount.scss';
|
||||
import styles from './UserAccount.module.scss';
|
||||
|
||||
import CartHeader from '../../assets/images/cart-header.svg';
|
||||
|
||||
const UserAccount = () => {
|
||||
return (
|
||||
<div className='wrapper-userAccount'>
|
||||
<ul className='wrapper-userAccount__ul' >
|
||||
<li className='wrapper-userAccount__ul__li-entrar'>
|
||||
<div className={styles['wrapper-userAccount']}>
|
||||
<ul className={styles['wrapper-userAccount__ul']} >
|
||||
<li className={styles['wrapper-userAccount__ul__li-entrar']}>
|
||||
<a href="/">entrar</a>
|
||||
</li>
|
||||
<li className='wrapper-userAccount__ul__li-cart'>
|
||||
<li className={styles['wrapper-userAccount__ul__li-cart']}>
|
||||
<a href="/">
|
||||
<img src={CartHeader} alt="Carrinho de Compras" />
|
||||
<img src={CartHeader} alt="Carrinho de Compras"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -20,6 +20,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wrapper-userAccount {
|
||||
&__ul {
|
||||
&__li-cart {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2500px) {
|
||||
.wrapper-userAccount {
|
||||
&__ul {
|
||||
Loading…
Reference in New Issue
Block a user