Criação do header (Elementos e estilo)

Vamos criar uma pasta “headerNoAuth” dentro de “homeNoAuth”
Dentro da pasta “headerNoAuth” nós vamos criar um arquivo chamado “index.tsx” e um “styles.module.scss”. E em boa parte dos nossos components teremos essa configuração. No arquivo do component não vamos ter “head” nem “main”, pois não é uma página, então não é necessário.
```
import styles from "./styles.module.scss";

const HeaderNoAuth = function () {
  return <></>;
};

export default HeaderNoAuth;
```

Vamos então começar criando uma div que irá ter dentro o cta acima da navegação.

<>
	<div className={styles.ctaSection}>
		<img src="/homeNotAuth/logoCta.png" alt="logoCta" className={styles.imgCta}/>
    <p>Se cadastre para ter acesso aos cursos</p>
    <img src="/homeNotAuth/logoCta.png" alt="logoCta" className={styles.imgCta}/>
	</div>
</>

Nós iremos agora ver o retorno visual disso que criamos. Nós vamos em “index.tsx” de “pages”, e vamos colocar ele aqui dentro de main.
```
<main>
	<HeaderNoAuth />
</main>
```

Agora podemos fazer a alteração visual dele. Nós iremos importar as cores, e depois iremos manipular a div do cta e as imagens.

@import "../../../../styles/colors.module.scss";
.ctaSection {
  background-color: $lightRed;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0px;
  gap: 30px;
}
.imgCta {
  width: 20px;
}

Agora nós faremos a nossa barra de navegação, onde teremos a logo e os botões de login e registro.

Nós vamos usar algumas coisas vindas do reactstrap, então vamos importar. Clicando duas vezes no que formos usar e segurando “ctrl” + “barra de espaço”, vai aparecer a opção de importação automática.
Nós iremos colocar os botões dentro de uma div, pois nós vamos fazer o uso do “space-between” do flex, então isso vai fazer com que a logo fique de um lado e os botões do outro.

return (
	<>
		<div className={styles.ctaSection}>
			<img src="/homeNotAuth/logoCta.png" alt="logoCta" className={styles.imgCta}/>
      <p>Se cadastre para ter acesso aos cursos</p>
			<img src="/homeNotAuth/logoCta.png" alt="logoCta" className={styles.imgCta}/>
		</div>
		<Container className={styles.nav}>
			<img src="/logoOnebitflix.svg" alt="logoOnebitflix" className={styles.imgLogoNav}/>
			<div>
				<Button className={styles.navBtn} outline>Entrar</Button>
				<Button className={styles.navBtn} outline>Quero fazer parte</Button>
			</div>
		</Container>
    </>
);

Agora iremos colocar os botões para funcionar. Nós iremos envolver eles com o “Link” do next, e nesse link vamos colocar um “href” levando para as páginas que ainda não foram criadas. O link do next é uma forma otimizada para navegarmos dentro de páginas na nossa aplicação, se formos usar um link para ir para uma página fora do nosso projeto, vai ser a âncora.

Para criar uma página, e já ter o url dela funcionando é simples. Criando um arquivo na pasta “pages”, você gerou um link com o seu nome. Ex: “localhost:3000/login”

return (
	<>
		<div className={styles.ctaSection}>
			<img src="/homeNotAuth/logoCta.png" alt="logoCta" className={styles.imgCta}/>
      <p>Se cadastre para ter acesso aos cursos</p>
			<img src="/homeNotAuth/logoCta.png" alt="logoCta" className={styles.imgCta}/>
		</div>
		<Container className={styles.nav}>
			<img src="/logoOnebitflix.svg" alt="logoOnebitflix" className={styles.imgLogoNav}/>
			<div>
				<Link href="/login">
					<Button className={styles.navBtn} outline>Entrar</Button>
				</Link>
				<Link href="/register">
					<Button className={styles.navBtn} outline>Quero fazer parte</Button>
				</Link>
			</div>
		</Container>
  </>
);

Nós vamos então fazer a manipulação visual desse header, começando pela div da navegação e pela sua logo..

.nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}
.imgLogoNav {
  width: 180px;
}

Em seguida iremos manipular o visual dos nosso botões.

.navBtn {
  margin: 0px 5px;
  border-color: transparent;
  color: $lightGray;

  &:hover {
    border-color: $lightRed;
    color: white;
    background-color: transparent;
  }
}

Responsividade do header

Agora, vamos fazer a responsividade tanto da navegação quanto do cta. Todas as responsividades que iremos fazer sempre vai ser buscando “280px” de responsividade, pois é o não existe celular menor que isso, então não é necessário ficar responsivo em telas menores.
Vamos começar fazendo a diminuição da nossa página com o elemento inspecionar do google, e com ela, vamos ver que acontece uma quebra em “442px”, com os botões indo para baixo. Nós vamos então centralizar tanto os botões quanto a logo, também botando borda nos botões. Nós vamos aproveitar e diminuir o gap entre os elementos do cta.
```
@media (max-width: 442px) {
  .nav {
    justify-content: center;
  }
  .navBtn {
    margin: 16px 10px;
    border-color: white;
    font-size: 14px;
  }
  .ctaSection {
    gap: 10px;
  }
}
```

Agora, nós podemos ver que em “329px” nós temos uma quebra no cta.

@media (max-width: 329px) {
  .ctaSection {
    text-align: center;
  }
  .imgCta {
    margin: 0px 8px;
  }
}

Agora vamos diminuir até “280px” e vemos que está 100% responsivo.

⇒ A partir da criação do header, toda vez que criamos algo importante para a aplicação, nós iremos dar um commit.

Commit do git

Com o nosso header finalizado, podemos então dar o seu commit.

git add -A

git commit -m "Criação do header da página homeNoAuth - Header Não autenticado"

Conclusão

O que foi feito/visto nessa aula: