Gabriel_Ferraz_Nogueira/desafio-react-e-typescript
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adição do scss no footer mobile

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-01-15 22:42:35 -03:00
parent f6474a21a4
commit 3c72d4a592
6 changed files with 210 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Footer/BottomFooter.tsx
View File

@ -10,6 +10,8 @@ import Pagseguro from "../assets/imgs/SVGs/credit-cards/Pagseguro.svg";
import Boleto from "../assets/imgs/SVGs/credit-cards/Boleto.svg";
import vtex from "../assets/imgs/SVGs/credit-cards/vtex-pci-200.svg";
import { WppIcon } from "./wpp";
export const BottomFooter = () => {
return (
<>
@ -20,6 +22,7 @@ export const BottomFooter = () => {
</span>
<div className="Payment_methods">
{window.innerWidth > 1024 ? "" : <WppIcon />}
<img className="carts_icons" src={Master} alt="Master-icon" />
<img className="carts_icons" src={Visa} alt="Visa-icon" />
<img className="carts_icons" src={Diners} alt="Diners-icon" />

25
src/components/Footer/ContactFooter.tsx
View File

@ -1,4 +1,5 @@
import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
import { ListMobile1, ListMobile2, ListMobile3 } from "./MenuListMobile";
export const Contact = () => {
return (
@ -11,18 +12,28 @@ export const Contact = () => {
<MenuList1 />
</>
) : (
""
<ListMobile1 />
)}
<h5> INSTITUCIONAL </h5>
<MenuList1 />
</div>
<div className="Menu_folder">
<h5> DÚVIDAS </h5>
<MenuList2 />
{window.innerWidth > 1024 ? (
<>
<h5> DÚVIDAS </h5>
<MenuList2 />
</>
) : (
<ListMobile2 />
)}
</div>
<div className="Menu_folder">
<h5> FALE CONOSCO </h5>
<MenuList3 />
{window.innerWidth > 1024 ? (
<>
<h5> FALE CONOSCO </h5>
<MenuList3 />
</>
) : (
<ListMobile3 />
)}
</div>
</div>
</>

92
src/components/Footer/FooterMain.modules.scss
View File

@ -106,6 +106,12 @@
display: flex;
gap: 121px;
@media (max-width: 1024px) {
flex-direction: column;
gap: 12px;
padding-bottom: 12px;
}
.Menu_folder {
display: flex;
flex-direction: column;
@ -134,11 +140,83 @@
.last {
text-decoration-line: underline;
}
.ButtonFooter_list {
text-align: left;
background: $color-white;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: $color-gray-700;
border: none;
}
.ButtonFooterWrapper {
display: flex;
flex-direction: column;
.ButtonFooter_list {
position: relative;
padding: 0;
font-family: $fontFamily;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
}
.ButtonFooter_list:before,
.ButtonFooter_list:after {
content: "";
position: absolute;
background: $color-gray-700;
}
.ButtonFooter_list.false:before {
top: 50%;
right: 4px;
height: 2px;
width: 7.8px;
transform: rotate(90deg);
}
.ButtonFooter_list::after {
right: 4px;
top: 8px;
bottom: 4px;
height: 2px;
width: 8.28px;
transform: rotate(359deg);
}
.MenuLis_wrapper {
display: flex;
flex-direction: column;
margin-top: 12px;
gap: 12px;
@media (max-width: 1024px) {
padding-left: 8px;
}
}
.MenuLis_wrapper.false {
display: none;
}
}
}
}
}
.SocialMedia {
.Img_wrappers {
@media (max-width: 1024px) {
height: 35px;
padding-bottom: 12px;
}
}
.Site {
font-family: $fontFamily;
font-style: normal;
@ -188,9 +266,13 @@
padding: 15px 100px;
}
@media (max-width: 1024px) {
flex-direction: column;
gap: 15px;
}
.corporateName {
display: flex;
align-self: center;
width: 234px;
height: 24px;
font-family: $fontFamily;
@ -199,6 +281,10 @@
font-size: 10px;
line-height: 12px;
color: $color-white;
@media (min-width: 1025px) {
align-self: center;
}
}
.Payment_methods {
@ -206,6 +292,10 @@
display: flex;
gap: 12px;
@media (max-width: 1024px) {
order: -1;
}
.carts_icons {
width: 36px;
height: 20px;

26
src/components/Footer/MenuFolder.tsx
View File

@ -1,26 +0,0 @@
import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
// export const MenuFolder = () => {
// return (
// <>
// <div className="Menu_folder">
// <h5> INSTITUCIONAL </h5>
// <div>
// <MenuList1 />
// </div>
// </div>
// <div className="Menu_folder">
// <h5> DÚVIDAS </h5>
// <div>
// <MenuList2 />
// </div>
// </div>
// <div className="Menu_folder">
// <h5> FALE CONOSCO </h5>
// <div>
// <MenuList3 />
// </div>
// </div>
// </>
// );
// };

20
src/components/Footer/MenuListFooter.tsx
View File

@ -1,6 +1,14 @@
import { NavLink } from "react-router-dom";
export const MenuList1 = () => {
interface MenuFooterProps {
isOpenedFooter?: boolean;
setIsOpenedFooter?: React.Dispatch<React.SetStateAction<boolean>>;
}
export const MenuList1 = ({
isOpenedFooter,
setIsOpenedFooter,
}: MenuFooterProps) => {
return (
<>
<NavLink className={"links_footer"} to={"/"}>
@ -19,7 +27,10 @@ export const MenuList1 = () => {
);
};
export const MenuList2 = () => {
export const MenuList2 = ({
isOpenedFooter,
setIsOpenedFooter,
}: MenuFooterProps) => {
return (
<>
<NavLink className={"links_footer"} to={"/"}>
@ -38,7 +49,10 @@ export const MenuList2 = () => {
);
};
export const MenuList3 = () => {
export const MenuList3 = ({
isOpenedFooter,
setIsOpenedFooter,
}: MenuFooterProps) => {
return (
<>
<NavLink className={"links_footer"} to={"/"}>

81
src/components/Footer/MenuListMobile.tsx Normal file
View File

@ -0,0 +1,81 @@
import { useState } from "react";
import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
export const ListMobile1 = () => {
const [isOpenedFooter, setIsOpenedFooter] = useState(false);
const handlechange = () => {
setIsOpenedFooter((isOpenedFooter) => !isOpenedFooter);
};
return (
<>
<div className={`ButtonFooterWrapper `}>
<button
className={`ButtonFooter_list ${isOpenedFooter && ""}`}
onClick={() => handlechange()}
>
Institucional
</button>
<div className={`MenuLis_wrapper ${isOpenedFooter && ""}`}>
<MenuList1
isOpenedFooter={isOpenedFooter}
setIsOpenedFooter={setIsOpenedFooter}
/>
</div>
</div>
</>
);
};
export const ListMobile2 = () => {
const [isOpenedFooter, setIsOpenedFooter] = useState(false);
const handlechange = () => {
setIsOpenedFooter((isOpenedFooter) => !isOpenedFooter);
};
return (
<>
<div className={`ButtonFooterWrapper `}>
<button
className={`ButtonFooter_list ${isOpenedFooter && ""}`}
onClick={() => handlechange()}
>
Dúvidas
</button>
<div className={`MenuLis_wrapper ${isOpenedFooter && ""}`}>
<MenuList2
isOpenedFooter={isOpenedFooter}
setIsOpenedFooter={setIsOpenedFooter}
/>
</div>
</div>
</>
);
};
export const ListMobile3 = () => {
const [isOpenedFooter, setIsOpenedFooter] = useState(false);
const handlechange = () => {
setIsOpenedFooter((isOpenedFooter) => !isOpenedFooter);
};
return (
<>
<div className={`ButtonFooterWrapper `}>
<button
className={`ButtonFooter_list ${isOpenedFooter && ""}`}
onClick={() => handlechange()}
>
Fale Conosco
</button>
<div className={`MenuLis_wrapper ${isOpenedFooter && ""}`}>
<MenuList3
isOpenedFooter={isOpenedFooter}
setIsOpenedFooter={setIsOpenedFooter}
/>
</div>
</div>
</>
);
};