forked from M3-Academy/desafio-react-e-typescript
refactor(header): new names for html classes were created using BEM
This commit is contained in:
parent
2b0862dea3
commit
6281bb98b2
@ -6,5 +6,5 @@ export interface ITopProps {
|
||||
|
||||
export interface IBottomProps {
|
||||
isMenuOpen: boolean
|
||||
handleClose: () => void
|
||||
handleClickClose: () => void
|
||||
}
|
||||
|
||||
@ -4,11 +4,11 @@ import closeIcon from '../../../assets/icons/x.svg'
|
||||
|
||||
import styles from '../index.module.scss'
|
||||
|
||||
export function Bottom({ isMenuOpen, handleClose }: IBottomProps) {
|
||||
export function Bottom({ isMenuOpen, handleClickClose }: IBottomProps) {
|
||||
function closeMenu(e: any) {
|
||||
if (e.target.classList.contains(styles.menu)) {
|
||||
if (e.target.children[0] !== e.target) {
|
||||
handleClose()
|
||||
handleClickClose()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,17 +16,23 @@ export function Bottom({ isMenuOpen, handleClose }: IBottomProps) {
|
||||
return (
|
||||
<div
|
||||
onClick={(e) => closeMenu(e)}
|
||||
className={`${styles.menu} ${isMenuOpen ? styles.active : ''}`}
|
||||
className={`${styles['menu']} ${
|
||||
isMenuOpen ? styles['menu--active'] : ''
|
||||
}`}
|
||||
>
|
||||
<div className={styles['menu-content']}>
|
||||
<div className={styles['actions-bottom']}>
|
||||
<div className={styles['menu__container']}>
|
||||
<div className={styles['actions__bottom']}>
|
||||
<a href="/">Entrar</a>
|
||||
<button type="button" onClick={handleClose} className={styles.close}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClickClose}
|
||||
className={styles.close}
|
||||
>
|
||||
<img src={closeIcon} alt="ícone do botão para fechar o menu" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul className={styles.list}>
|
||||
<ul className={styles['menu__list']}>
|
||||
{['Cursos', 'Saiba Mais', 'Institucionais'].map((item, index) => {
|
||||
return (
|
||||
<li key={'header-bottom-list-' + index}>
|
||||
|
||||
@ -1,12 +1,26 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
import { ISearchProps } from './@types'
|
||||
|
||||
import searchIcon from '../../../assets/icons/search.svg'
|
||||
|
||||
export function Search({ ...props }: ISearchProps) {
|
||||
const [searchData, setSearchData] = useState('')
|
||||
|
||||
const handleChangeValue = (e: any) => {
|
||||
setSearchData(e.target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div {...props}>
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button type="button">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Buscar..."
|
||||
value={searchData}
|
||||
onChange={handleChangeValue}
|
||||
/>
|
||||
<button type="button" onClick={() => setSearchData('')}>
|
||||
<img src={searchIcon} alt="Search icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@ import styles from '../index.module.scss'
|
||||
|
||||
export function Top({ handleClickOpen }: ITopProps) {
|
||||
return (
|
||||
<div className={styles['content']}>
|
||||
<div className={`${styles['l-header__top']}`}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClickOpen}
|
||||
@ -20,16 +20,16 @@ export function Top({ handleClickOpen }: ITopProps) {
|
||||
<img src={openIcon} alt="ícone do botão para abrir o menu" />
|
||||
</button>
|
||||
|
||||
<a className={styles['logo']} href="/">
|
||||
<a className="top__logo" href="/">
|
||||
<picture>
|
||||
<source media="(min-width:1025px)" srcSet={logoMediumImg} />
|
||||
<img src={logoImg} alt="logo da M3 Academy" />
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
<Search className={`${styles.search} ${styles['search-top']}`} />
|
||||
<Search className={`${styles['search']} ${styles['search--top']}`} />
|
||||
|
||||
<div className={styles['actions-top']}>
|
||||
<div className={styles['actions__top']}>
|
||||
<a href="/">Entrar</a>
|
||||
|
||||
<button type="button">
|
||||
|
||||
@ -7,18 +7,16 @@ $containers: (
|
||||
'xl': 2299.68px,
|
||||
);
|
||||
|
||||
.component {
|
||||
.l-header {
|
||||
padding: 25px 0;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
position: sticky;
|
||||
|
||||
background-color: var(--clr-common-black);
|
||||
}
|
||||
|
||||
.component {
|
||||
@media only screen and (min-width: 1025px) {
|
||||
padding: 25px 0 0;
|
||||
}
|
||||
@ -28,16 +26,14 @@ $containers: (
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.l-header__top {
|
||||
padding: 0px 16px;
|
||||
margin-bottom: 27.14px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content {
|
||||
@media only screen and (min-width: 1025px) {
|
||||
width: #{function.fluid(map-get($containers, 'md'), 1280px)};
|
||||
padding: 0;
|
||||
@ -49,27 +45,29 @@ $containers: (
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
$content: (
|
||||
'md': 136px,
|
||||
'xl': 265.62px,
|
||||
);
|
||||
.l-header__top :global {
|
||||
.top__logo {
|
||||
$content: (
|
||||
'md': 136px,
|
||||
'xl': 265.62px,
|
||||
);
|
||||
|
||||
// prettier-ignore
|
||||
@media only screen and (min-width: 1025px) {
|
||||
// prettier-ignore
|
||||
@media only screen and (min-width: 1025px) {
|
||||
width: function.fluid(
|
||||
map-get($content, 'md'),
|
||||
map-get($containers, 'md')
|
||||
);
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
@media only screen and (min-width: 2500px) {
|
||||
// prettier-ignore
|
||||
@media only screen and (min-width: 2500px) {
|
||||
width: function.fluid(
|
||||
map-get($content, 'xl'),
|
||||
map-get($containers, 'xl')
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
@ -86,6 +84,12 @@ $containers: (
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 36px;
|
||||
height: 100%;
|
||||
background-color: var(--clr-common-white);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0 9px 0 16px;
|
||||
@ -101,15 +105,6 @@ $containers: (
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
button {
|
||||
width: 36px;
|
||||
height: 100%;
|
||||
|
||||
background-color: var(--clr-common-white);
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
@media only screen and (min-width: 1025px) {
|
||||
button {
|
||||
@ -125,17 +120,17 @@ $containers: (
|
||||
|
||||
button {
|
||||
width: 56.85px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
}
|
||||
button img {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-top,
|
||||
.actions-bottom {
|
||||
.actions__top,
|
||||
.actions__bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -146,10 +141,9 @@ $containers: (
|
||||
|
||||
display: block;
|
||||
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-common-white);
|
||||
|
||||
transition: color 200ms linear;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-primary-blue-500);
|
||||
@ -161,9 +155,20 @@ $containers: (
|
||||
}
|
||||
}
|
||||
|
||||
.actions-top {
|
||||
.actions__top {
|
||||
gap: 55px;
|
||||
|
||||
// remove action top link for small devices and added for large devices 1025 > x
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1025px) {
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2500px) {
|
||||
img {
|
||||
width: 54.68px;
|
||||
@ -181,16 +186,20 @@ $containers: (
|
||||
}
|
||||
}
|
||||
|
||||
// remove action top link for small devices and added for large devices 1025 > x
|
||||
.actions-top {
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
.actions__bottom {
|
||||
width: 100%;
|
||||
height: 78px;
|
||||
padding: 0 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
background-color: var(--clr-common-black);
|
||||
|
||||
// remove actions bottom for large devices
|
||||
@media only screen and (min-width: 1025px) {
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -206,68 +215,55 @@ $containers: (
|
||||
transition: 300ms ease;
|
||||
|
||||
&,
|
||||
&-content {
|
||||
&__container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
&-content {
|
||||
&__container {
|
||||
width: function.fluid(map-get($containers, 'sm'), 1024px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
&-content {
|
||||
border-top: 1px solid var(--clr-common-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
@media only screen and (max-width: 768px) {
|
||||
&-content {
|
||||
&__container {
|
||||
width: function.fluid(map-get($containers, 'xs'), 375px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
.actions-bottom {
|
||||
width: 100%;
|
||||
height: 78px;
|
||||
|
||||
background-color: var(--clr-common-black);
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 16px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
transition: color 200ms linear;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-primary-blue-500);
|
||||
}
|
||||
@media screen and (min-width: 1025px) {
|
||||
&__container {
|
||||
border-top: 1px solid var(--clr-common-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
.list {
|
||||
&__list {
|
||||
height: calc(100% - 78px);
|
||||
padding-top: 31px;
|
||||
padding: 31px 16px 0;
|
||||
|
||||
background-color: var(--clr-common-white);
|
||||
|
||||
a {
|
||||
margin-bottom: 12px;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: var(--txt-normal);
|
||||
line-height: 16.41px;
|
||||
|
||||
margin-bottom: 12px;
|
||||
|
||||
display: block;
|
||||
|
||||
color: var(--clr-gray-400);
|
||||
transition: color 200ms linear;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-primary-blue-500);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
line-height: 32.81px;
|
||||
@ -276,18 +272,9 @@ $containers: (
|
||||
}
|
||||
}
|
||||
|
||||
.actions-bottom {
|
||||
padding: 0 16px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// styles for menu is active
|
||||
|
||||
.menu {
|
||||
&.active {
|
||||
&.menu--active {
|
||||
left: 0;
|
||||
background-color: #0004;
|
||||
}
|
||||
@ -300,7 +287,9 @@ $containers: (
|
||||
|
||||
display: block;
|
||||
|
||||
.list {
|
||||
background-color: var(--clr-common-black);
|
||||
|
||||
&__list {
|
||||
width: function.fluid(map-get($containers, 'md'), 1280px);
|
||||
padding: 14px 0;
|
||||
margin: 0 auto;
|
||||
@ -317,22 +306,16 @@ $containers: (
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: var(--clr-common-black);
|
||||
|
||||
.actions-bottom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.list {
|
||||
&__list {
|
||||
width: function.fluid(map-get($containers, 'xl'), 2500px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-top {
|
||||
.search--top {
|
||||
$content: (
|
||||
'md': 264px,
|
||||
'xl': 515.62px,
|
||||
@ -360,7 +343,7 @@ $containers: (
|
||||
\*|[O]o-o-o-o[X]|*/
|
||||
|
||||
//remove search top box for small, medium devices
|
||||
.search-top {
|
||||
.search--top {
|
||||
display: none;
|
||||
|
||||
@media only screen and (min-width: 1025px) {
|
||||
@ -369,12 +352,12 @@ $containers: (
|
||||
}
|
||||
|
||||
// added search bottom box for small devices, medium devices
|
||||
.search-bottom {
|
||||
.search__bottom {
|
||||
padding: 0 16px;
|
||||
|
||||
display: flex;
|
||||
|
||||
&-content {
|
||||
&--content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ export const Header = () => {
|
||||
|
||||
const bottomProps = {
|
||||
isMenuOpen,
|
||||
handleClose: useMemo(
|
||||
handleClickClose: useMemo(
|
||||
() =>
|
||||
function () {
|
||||
if (window.innerWidth <= 1024) setIsMenuOpen(false)
|
||||
@ -31,13 +31,13 @@ export const Header = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<header className={styles['component']}>
|
||||
<header className={styles['l-header']}>
|
||||
<nav>
|
||||
<Top {...topProps} />
|
||||
|
||||
<div className={`${styles['search-bottom']}`}>
|
||||
<div className={`${styles['search__bottom']}`}>
|
||||
<Search
|
||||
className={`${styles['search']} ${styles['search-bottom-content']}`}
|
||||
className={`${styles['search']} ${styles['search__bottom--content']}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
|
||||
import css from './index.module.scss'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export function Sidebar() {
|
||||
const { pathname } = useLocation()
|
||||
@ -15,13 +15,16 @@ export function Sidebar() {
|
||||
]
|
||||
|
||||
return (
|
||||
<aside className={css.sidebar}>
|
||||
<div className={css.container}>
|
||||
<ul className={css.list}>
|
||||
<aside className={styles['sidebar']}>
|
||||
<div className={styles.container}>
|
||||
<ul className={styles.list}>
|
||||
{paths.map(({ path, name }) => {
|
||||
return (
|
||||
<li key={name + '-sidebar'}>
|
||||
<Link className={pathname === path ? css.active : ''} to={path}>
|
||||
<Link
|
||||
className={pathname === path ? styles.active : ''}
|
||||
to={path}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user