Merge pull request #34 from italoh623/feat/menu-behavior

Feat/menu behavior
italoh623 · Mar 13, 2024 · 7b8f5ce · 7b8f5ce
2 parents 2febb28 + bcf99e2
commit 7b8f5ce
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 25 deletions.
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -2,6 +2,7 @@
 
 import styles from "./styles.module.css";
 import { useState } from "react";
+import Link from "next/link";
 
 
 
@@ -15,7 +16,7 @@ export default function Menu() {
   return (
     <menu className={styles.container}>
       <div className={styles.principal}>
-        <div className={styles.title} onClick={handleClick('/')}>
+        <div className={styles.menuTitle} onClick={handleClick('/')}>
           <h1>CINEMA DE RUA</h1>
           <h2>DO RECIFE</h2>
         </div>
@@ -26,25 +27,25 @@ export default function Menu() {
 
       <div className={[styles.menu, menuOpen ? styles.open : ""].join(' ')}>
         <li>
-          <a className={styles.menuButton} onClick={handleClick('/')}>INÍCIO</a>
+          <Link className={styles.menuButton} href='/'>INÍCIO</Link>
         </li>
         <li>
-          <a className={styles.menuButton} href="#importance">CINEMA DE RUA</a>
+          <Link className={styles.menuButton} href="/#cinema-de-rua">CINEMA DE RUA</Link>
         </li>
         <li>
-          <a className={styles.menuButton} href="#appreciation">VALORIZAÇÃO</a>
+          <Link className={styles.menuButton} href="/#valorizacao">VALORIZAÇÃO</Link>
         </li>
         <li>
-          <a className={styles.menuButton} href="#affection">AFETIVIDADE</a>
+          <Link className={styles.menuButton} href="/#afetividade">AFETIVIDADE</Link>
         </li>
         <li>
-          <a className={styles.menuButton} href="#panorama">PANORAMA</a>
+          <Link className={styles.menuButton} href="/#panorama">PANORAMA</Link>
         </li>
         <li>
-          <a className={styles.menuButton} href="#disappearance">O QUE FAZER?</a>
+          <Link className={styles.menuButton} href="/#o-que-fazer">O QUE FAZER?</Link>
         </li>
         <li>
-          <a className={styles.menuButton} onClick={handleClick('/about')}>O PROJETO</a>
+          <Link className={styles.menuButton} href='/about'>O PROJETO</Link>
         </li>
       </div>
     </menu>

diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.css
@@ -9,23 +9,23 @@
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
-.title {
+.menuTitle {
   flex-direction: column;
 }
 
-.title:hover {
+.menuTitle:hover {
   cursor: pointer;
 }
 
-.title h1, 
-.title h2 {
+.menuTitle h1, 
+.menuTitle h2 {
   font-family: var(--favela-font);
   color: #F3E8D5;
   font-weight: 400;
   font-size: 48px;
 }
 
-.title h2 {
+.menuTitle h2 {
   font-size: 36px;
 }
 
@@ -91,12 +91,12 @@
 }
 
 @media (max-width: 1000px) {
-  .title h1 {
-    font-size: 36px;
+  .menuTitle h1 {
+    font-size: 1.8rem;
   }
 
-  .title h2 {
-    font-size: 24px;
+  .menuTitle h2 {
+    font-size: 1.5rem;
   }
 
   .menu {
@@ -108,13 +108,15 @@
   }
 
   .open {
-    height: 360px;
+    height: 440px;
     padding-top: 20px;
+    padding-bottom: 20px;
     opacity: 100;
   }
 
   .menuButton {
-    font-size: 1rem;
+    font-size: 1.2rem;
+    padding: 15px 10px;
   }
 
   .container {
@@ -132,12 +134,12 @@
 
 @media (max-width: 768px) {
   .container {
-    padding: 25px 40px;
+    padding: 15px 40px;
   }
 }
 
 @media (max-width: 667px) {
   .container {
-    padding: 25px 20px;
+    padding: 15px 20px;
   }
 }
diff --git a/src/components/SessionAffection/index.tsx b/src/components/SessionAffection/index.tsx
@@ -5,7 +5,7 @@ import styles from "./styles.module.css";
 
 export default function SessionAffection() {
   return (
-    <div className={styles.container} id="affection">
+    <div className={styles.container} id="afetividade">
       <div className={styles.wrapper}>
         <section className={styles.author}>
           <h1>AFETIVIDADE</h1>

diff --git a/src/components/SessionAppreciation/index.tsx b/src/components/SessionAppreciation/index.tsx
@@ -28,7 +28,7 @@ export default function SessionAppreciation() {
           <p>É necessário refletir, dada a importância do cinema de rua, sobre como construir e incorporar esse tipo de cinema ao tecido urbano e à vida da cidade atual. A lógica do cinema de rua não envolve a lógica comercial, na realidade, cumpre um papel em termos ambientais, econômicos e culturais. A característica mais particular é a de possibilitar o conhecimento e trazer sessões que dialoguem com o público de modo acessível e democrático.</p>        
         </section>
 
-        <section className={styles.author} id="appreciation">
+        <section className={styles.author} id="valorizacao">
           <h1 className={styles.title}>A VALORIZAÇÃO DOS CINEMAS DE RUA</h1>
           <h2>como equipamentos culturais <br /> que preservam a história</h2>
           <h4>Thiago Freire</h4>

diff --git a/src/components/SessionDisappearance/index.tsx b/src/components/SessionDisappearance/index.tsx
@@ -5,7 +5,7 @@ import styles from "./styles.module.css";
 
 export default function SessionDisappearance() {
   return (
-    <div className={styles.container} id="disappearance">
+    <div className={styles.container} id="o-que-fazer">
       <div className={styles.wrapper}>
         <section className={styles.author}>
           <h1>COMO IMPEDIR O SUMIÇO DESTA FERRAMENTA?</h1>

diff --git a/src/components/SessionImportance/index.tsx b/src/components/SessionImportance/index.tsx
@@ -10,7 +10,7 @@ export default function SessionImportance() {
         <h1 className={styles.title}>OCUPAÇÃO DO ESPAÇO PÚBLICO PELA ÓTICA DO CINEMA EM RECIFE - CULTURA É RESISTÊNCIA!</h1>
         <img className={styles.image} src="./images/cinema.svg" alt="" />
 
-        <section className={styles.author} id="importance">
+        <section className={styles.author} id="cinema-de-rua">
           <h1>CINEMA DE RUA</h1>
           <h2>e sua importância</h2>
           <h4>Beatriz Severo</h4>