Gustavo_Rallenson_Goncalves_Da_Silva/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(footer)departments mobile estruturado

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-16 22:37:54 -03:00
parent c753cdfaa8
commit ad2ea455d5
5 changed files with 255 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
desafio-5/src/components/modules/footer.module.scss
View File

@ -1,7 +1,4 @@
@import "../utils/Variables.scss";
.hiden{
display: none !important;
}
.footer{
&_wrapper{
display: flex;
@ -80,7 +77,53 @@
display: flex;
justify-content: space-between;
width: 65.556%;
height: 140px;
&_departments{
max-width: 156px;
display: flex;
flex-direction: column;
gap: 12px;
div{
display: flex;
justify-content: space-between;
h2{
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: $-black-3030;
}
}
ul{
height: 100%;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: space-between;
li{
&[datatype=last_departaments]{
text-decoration: underline;
}
&[datatype=Call_Center]{
p{
font-weight: 700;
}
}
a,p{
color: $-black-3030;
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
}
}
}
}
}
&_media{
display: flex;
@ -195,6 +238,12 @@
}
}
@media screen and (min-width: 280px) and (max-width: 1024px){
.hiden{
display: none !important;
}
.active{
display: flex !important;
}
.footer{
&_wrapper{
&_Form{
@ -220,7 +269,53 @@
}
}
&_Top{
width: 100%;
flex-direction: column;
padding: 50px 16px;
gap: 12px;
&_menu{
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
&_departments{
max-width:100%;
flex-direction: column;
gap: 12px;
ul{
flex-direction: column;
gap: 12px;
}
}
}
&_media{
display: flex;
flex-direction: column;
width: 20%;
gap: 12px;
a{
color: $-black-3030;
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
&_MediaWraaper{
fieldset{
display: flex;
gap: 10px;
border: 0;
height: 100%;
max-height: 100%;
a{
width:100%;
img{
width: 100%;
}
}
}
}
}
}
&_bottom{
flex-direction: column;
@ -322,7 +417,54 @@
}
}
&_Top{
width: 100%;
&_menu{
&_departments{
max-width: 316px;
h2{
font-size: 28px;
line-height: 33px;
}
ul{
li{
a,p{
font-size: 24px;
line-height: 28px;
}
}
}
}
}
&_media{
display: flex;
flex-direction: column;
width: 20%;
gap: 12px;
a{
color: $-black-3030;
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
&_MediaWraaper{
width: 100%;
max-height: 6.484vh;
fieldset{
display: flex;
gap: 10px;
border: 0;
height: 100%;
max-height: 6.484vh;
a{
width:16.21%;
img{
width: 100%;
}
}
}
}
}
}
&_bottom{
p{
@ -353,4 +495,4 @@
}
}
}
}
}

20
desafio-5/src/components/scripts/celulas/FooterTop.tsx
View File

@ -2,21 +2,31 @@ import React from "react";
import { MenuList } from "./ListMenu";
import { SocialMedia } from "./SocialMedia";
interface Calsses {
interface Classes {
DadClass?: string;
wrapperClass?: string;
DepartamentClass?: string;
MediaCLass?: string;
MenuClass?: string;
SectionListCLass?: string;
hidenCLass?: string;
activeListCLass?: string;
}
interface TopFooteratrr extends Classes{
}
export const TopFooter: React.FC<Calsses> = (
{DadClass, MediaCLass,wrapperClass,MenuClass}
export const TopFooter: React.FC<TopFooteratrr> = (
{DadClass, MediaCLass,wrapperClass,MenuClass,DepartamentClass,SectionListCLass,activeListCLass,hidenCLass}
) => {
return(
<div className={DadClass}>
<MenuList wrapperClass={MenuClass} />
<MenuList wrapperClass={MenuClass}
DepartamentClass={DepartamentClass}
SectionListCLass={SectionListCLass}
activeListCLass={activeListCLass}
hidenCLass={hidenCLass}
/>
<SocialMedia wrapperClass={wrapperClass}
MediaCLass={MediaCLass} />
</div>

124
desafio-5/src/components/scripts/celulas/ListMenu.tsx
View File

@ -1,59 +1,105 @@
import React from "react"
import React,{ useState, useEffect} from "react"
interface Calsses {
interface Classes {
wrapperClass?: string;
DepartamentClass?: string;
SectionListCLass?: string;
hidenCLass?: string;
activeListCLass?: string;
}
export const MenuList: React.FC<Calsses> = (
{wrapperClass}
// ${ < 1025 ? FooterStyles.hiden:FooterStyles.active}
export const MenuList: React.FC<Classes> = (
{wrapperClass,DepartamentClass,SectionListCLass,hidenCLass,activeListCLass}
) => {
const [screenSize, setScreenSize] = useState({ width: window.innerWidth, height: window.innerHeight });
const [activeSection, setActiveSection] = useState(" ");
const [toggleSection, settoggleSection] = useState(false);
const handleClick = (section:string) => {
setActiveSection(section);
settoggleSection(!toggleSection)
console.log(toggleSection)
}
useEffect(() => {
const ToggleResize= ()=> {
setScreenSize({ width: window.innerWidth, height: window.innerHeight });
}
window.addEventListener('resize', ToggleResize);
return () => {
window.removeEventListener('resize', ToggleResize);
};
}, [screenSize]);
let activated = {
screen:screenSize.width,
active:activeSection
}
return(
<div className={wrapperClass}>
<div>
<h2>Institucional</h2>
<ul>
<li>Departamento 1</li>
<li>Departamento 2</li>
<li>Departamento 3</li>
<li>Departamento 4</li>
<div className={DepartamentClass}>
<div>
<h2>Institucional</h2>
{screenSize.width < 1025 ? <button onClick={() => handleClick("Institucional")}>+</button>: null}
</div>
<ul className={`${SectionListCLass} ${activated.screen <= 1024 && activated.active === "Institucional" && toggleSection ? activeListCLass: hidenCLass }`}>
<li>
<a href="/">Quem Somos</a>
</li>
<li>
<a href="/">Política de Privacidade</a>
</li>
<li>
<a href="/">Segurança</a>
</li>
<li datatype="last_departaments">
<a href="/">Seja um Revendedor</a>
</li>
</ul>
</div>
<div>
<h2>Dúvidas</h2>
<ul>
<li>Departamento 1</li>
<li>Departamento 2</li>
<li>Departamento 3</li>
<li>Departamento 4</li>
<div className={DepartamentClass}>
<div>
<h2>Dúvidas</h2>
{screenSize.width < 1025 ? <button onClick={() => handleClick("Dúvidas")}>+</button>: null}
</div>
<ul className={`${SectionListCLass} ${activated.screen <= 1024 && activated.active === "Dúvidas" && toggleSection ? activeListCLass: hidenCLass }`}>
<li>
<a href="/">Entrega</a>
</li>
<li>
<a href="/">Pagamento</a>
</li>
<li>
<a href="/">Trocas e Devoluções</a>
</li>
<li datatype="last_departaments">
<a href="/">Dúvidas Frequentes</a>
</li>
</ul>
</div>
<div>
<h2>FALE CONOSCO</h2>
<ul>
<li>Departamento 1</li>
<li>Departamento 2</li>
<li>Departamento 3</li>
<li>Departamento 4</li>
<div className={DepartamentClass}>
<div>
<h2>FALE CONOSCO</h2>
{screenSize.width < 1025 ? <button onClick={() => handleClick("FALE CONOSCO")}>+</button>: null}
</div>
<ul className={`${SectionListCLass} ${activated.screen < 1024 && activated.active === "FALE CONOSCO" && toggleSection ? activeListCLass: hidenCLass }`}>
<li datatype="Call_Center">
<p>Atendimento ao Consumidor</p>
</li>
<li>
<p>(11) 4159-9504</p>
</li>
<li datatype="Call_Center">
<p>Atendimento Online</p>
</li>
<li datatype="last_departaments">
<p>(11) 4159-9504</p>
</li>
</ul>
</div>
</div>
)
};
export const MenuListmobile: React.FC<Calsses> = (
{wrapperClass}
) => {
return(
<div className={wrapperClass}>
<div>primeira lista</div>
<div>segunda lista</div>
<div>terceira lista</div>
</div>
)
};

5
desafio-5/src/components/scripts/footer.tsx
View File

@ -6,6 +6,7 @@ import { Newsletter } from "./celulas/Newsletter";
import { TopFooter } from "./celulas/FooterTop";
import { BottomFooter } from "./celulas/FooterBottom";
const Footer = () =>{
return (
<footer>
@ -16,8 +17,12 @@ const Footer = () =>{
/>
<TopFooter DadClass={FooterStyles.footer_Top}
MenuClass={FooterStyles.footer_Top_menu}
DepartamentClass={FooterStyles.footer_Top_menu_departments}
SectionListCLass={FooterStyles.footer_Top_menu_departments_sections}
wrapperClass={FooterStyles.footer_Top_media}
MediaCLass={FooterStyles.footer_Top_media_MediaWraaper}
activeListCLass={FooterStyles.active}
hidenCLass={FooterStyles.hiden}
/>
<BottomFooter Dadclass={FooterStyles.footer_bottom}
wraaperclass={FooterStyles.footer_bottom_wraaper}

2
desafio-5/src/pages/Institucional.tsx
View File

@ -73,7 +73,7 @@ const Institucional = () => {
</a>
<img id={MainStyles["iconarrow"]} src={Leftarrow} alt="seta" />
</fieldset>
<a href="/">
<a href="/">
<BreadcrumbTitle className={MainStyles.main_wrapper_breadcrumb_title} nameTitle={title}/>
</a>
</div>