Merge pull request #30 from miguelnietoa/fix/update-navbar-options

fix: Update NavBar options and fix mobile behaviour

all-organizers.json → all-founders.json

@@ -1,8 +1,8 @@
 {
-  "organizers": [
+  "founders": [
     {
       "name": "Jesus Hernandez",
-      "image": "/images/organizers/jesus-hernandez.jpeg",
+      "image": "/images/founders/jesus-hernandez.jpeg",
       "social": {
         "twitter": "https://twitter.com/jesuhrz",
         "github": "https://github.com/jesuhrz",
@@ -11,23 +11,23 @@
     },
     {
       "name": "Kelly Villa",
-      "image": "/images/organizers/kelly-villa.png",
+      "image": "/images/founders/kelly-villa.png",
       "social": {
         "twitter": "https://twitter.com/02kellyv",
         "github": "https://github.com/02KellyV"
       }
     },
     {
       "name": "Brianith Navarro",
-      "image": "/images/organizers/brianith-navarro.jpeg",
+      "image": "/images/founders/brianith-navarro.jpeg",
       "social": {
         "twitter": "https://twitter.com/briaenrose",
         "github": "https://github.com/briaenrose"
       }
     },
     {
       "name": "Javier Daza",
-      "image": "/images/organizers/javier-daza.jpeg",
+      "image": "/images/founders/javier-daza.jpeg",
       "social": {
         "twitter": "https://twitter.com/pyjavo",
         "github": "https://github.com/pyjavo",
@@ -36,7 +36,7 @@
     },
     {
       "name": "Aldair Moreno",
-      "image": "/images/organizers/aldair-moreno.jpeg",
+      "image": "/images/founders/aldair-moreno.jpeg",
       "social": {
         "twitter": "https://twitter.com/_aldamc",
         "github": "https://github.com/AldairMC",
@@ -45,7 +45,7 @@
     },
     {
       "name": "Jesus Bossa",
-      "image": "/images/organizers/jesus-bossa.jpeg",
+      "image": "/images/founders/jesus-bossa.jpeg",
       "social": {
         "twitter": "https://twitter.com/jesMakinox",
         "github": "https://github.com/makinox",
@@ -54,15 +54,15 @@
     },
     {
       "name": "Fabian Altahona",
-      "image": "/images/organizers/fabian-altahona.png",
+      "image": "/images/founders/fabian-altahona.png",
       "social": {
         "twitter": "https://twitter.com/fabolivar23",
         "github": "https://github.com/fabolivar"
       }
     },
     {
       "name": "Luis Porras",
-      "image": "/images/organizers/luis-porras.jpg",
+      "image": "/images/founders/luis-porras.jpg",
       "social": {
         "twitter": "https://twitter.com/lporras16",
         "github": "https://github.com/lporras",
@@ -71,7 +71,7 @@
     },
     {
       "name": "Francisco Quintero",
-      "image": "/images/organizers/francisco-quintero.jpg",
+      "image": "/images/founders/francisco-quintero.jpg",
       "social": {
         "twitter": "https://twitter.com/cescquintero",
         "github": "https://github.com/cesc1989"

jsconfig.json

@@ -7,8 +7,8 @@
       "@/all-communities": [
         "./all-communities.json"
       ],
-      "@/all-organizers": [
-        "./all-organizers.json"
+      "@/all-founders": [
+        "./all-founders.json"
       ],
       "@/all-social-media": [
         "./all-social-media.json"
@@ -21,4 +21,4 @@
       ],
     }
   }
-}
+}

schedule.json

@@ -5,14 +5,14 @@
       "title": "\"Creando conexiones auténticas a través de la conversación\"",
       "name": "Brianith Navarro",
       "time": "9:15 AM - 9:35 AM",
-      "photo": "/images/organizers/brianith-navarro.jpeg"
+      "photo": "/images/founders/brianith-navarro.jpeg"
     },
     {
       "label": "red",
       "title": "\"Backend: Más allá de las APIs\"",
       "name": "Gabriel Coronado",
       "time": "9:40 AM - 10:10 AM",
-      "photo": "/images/organizers/gabriel-coronado.jpg"
+      "photo": "/images/founders/gabriel-coronado.jpg"
     },
     {
       "label": "white",

src/components/Header/index.js

@@ -43,7 +43,7 @@ export function Header() {
           'after:md:h-full': scrollTop,
         })}
       >
-        <Layout className="flex relative flex-wrap md:flex-nowrap md:items-center z-10">
+        <Layout className="relative z-10 flex flex-wrap md:flex-nowrap md:items-center">
           <div className="flex basis-full justify-between h-[70px] items-center">
             <Link href="/">
               <Image src="/images/caribe-dev-logo.svg" alt="Caribe Dev logo" width={120} height={40} />
@@ -58,7 +58,7 @@ export function Header() {
               <Icon icon="hamburger" className="fill-secondary" width={25} height={25} />
             </a>
           </div>
-          <Menu isOpen={open} className="flex-col justify-center py-4 md:flex-row md:justify-start md:py-0" />
+          <Menu isOpen={open} setOpen={setOpen} className="flex-col justify-center py-4 md:flex-row md:justify-start md:py-0" />
         </Layout>
       </div>
     </header>

src/components/Menu/index.js

@@ -1,23 +1,32 @@
 import classNames from 'classnames'
 import Link from 'next/link'
+import { useCallback } from 'react'
+
+export function Menu({ className, isOpen, setOpen }) {
+
+  const onClick = useCallback(() => {
+    if (isOpen) setOpen(false)
+  })
 
-export function Menu({ className, isOpen }) {
   return (
     <nav className={classNames(
       'w-full h-full md:h-auto md:w-auto md:block',
       { 'hidden': !isOpen }
     )}>
       <ul className={classNames('flex gap-5', className)}>
-        <li className='md:font-medium font-bold text-center text-tertiary'>
-          <a href='#communities' scroll={false}>Comunidades</a>
+        <li className='font-bold text-center md:font-medium text-tertiary' >
+          <a href='#communities' scroll={false} onClick={onClick}>Comunidades</a>
+        </li>
+        <li className='font-bold text-center md:font-medium text-tertiary' onClick={onClick}>
+          <a href='#sponsors' scroll={false}>Sponsors</a>
         </li>
-        <li className='md:font-medium font-bold text-center text-tertiary'>
-          <a href='#organizers' scroll={false}>Organizadores</a>
+        <li className='font-bold text-center md:font-medium text-tertiary' onClick={onClick}>
+          <a href='#founders' scroll={false}>Fundadores</a>
         </li>
-        <li className='md:font-medium font-bold text-center text-tertiary'>
-          <a href='#we' scroll={false}>Nosotros</a>
+        <li className='font-bold text-center md:font-medium text-tertiary' onClick={onClick}>
+          <a href='#about-us' scroll={false}>Nosotros</a>
         </li>
-        <li className='md:font-medium font-bold text-center text-tertiary'>
+        <li className='font-bold text-center md:font-medium text-tertiary'>
           <Link href="/hacktoberfest2024/index.html">HacktoberFest</Link>
         </li>
       </ul>

src/pages/index.js

@@ -9,7 +9,7 @@ import { Sponsor } from "@/components/Sponsor";
 
 import allSocialMedia from '@/all-social-media'
 import allCommunities from "@/all-communities";
-import allOrganizers from "@/all-organizers";
+import allFounders from "@/all-founders";
 import allSponsors from "@/all-sponsors";
 
 import ReflectedSunImage from "../../public/images/reflected-sun.svg";
@@ -20,7 +20,7 @@ import { getEventsFromCalendar } from '@/utils/google-calendar'
 
 
 const { communities } = allCommunities;
-const { organizers } = allOrganizers;
+const { founders } = allFounders;
 const { social } = allSocialMedia;
 const { sponsors } = allSponsors;
 
@@ -61,26 +61,26 @@ const home = ({ events }) => {
         <div className='absolute left-0 right-0 justify-center w-full md:flex md:top-0'>
           <ReflectedClouldsImage className='w-[100%] z-0' />
         </div>
-        <Layout className='relative md:pt-16'>
-          <h2 id='organizers' className='text-[35px] md:text-[60px] mt-20 text-tertiary'>
+        <Layout className='relative md:mt-16'>
+          <h2 id='communities' className='text-[35px] md:text-[60px] pt-20 text-tertiary'>
             Comunidades
           </h2>
           <div className='flex flex-wrap justify-center items-center pt-[50px]'>
             <section className="flex flex-wrap justify-center gap-4 pt-6 md:pt-0">
               {communities.map((comunity) => <Community key={comunity.website} {...comunity} />)}
             </section>
           </div>
-          <h2 id='organizers' className='text-[35px] md:text-[60px] mt-20 text-tertiary'>
+          <h2 id='sponsors' className='text-[35px] md:text-[60px] pt-20 text-tertiary'>
             Sponsors
           </h2>
           <section className="flex flex-wrap justify-center gap-4 pt-6 md:pt-50">
             {sponsors.map((sponsor) => <Sponsor key={sponsor.website} {...sponsor} />)}
           </section>
-          <h2 id='organizers' className='text-[35px] md:text-[60px] mt-20 text-tertiary'>
+          <h2 id='founders' className='text-[35px] md:text-[60px] pt-20 text-tertiary'>
             Fundadores
           </h2>
           <div className='flex flex-wrap justify-around md:justify-center items-center pt-[50px]'>
-            {organizers.map(({ name, image, social }) => {
+            {founders.map(({ name, image, social }) => {
               return (
                 <div className='flex justify-center basis-[20%] mb-12' key={name}>
                   <Avatar name={name} image={image} social={social} />
@@ -99,7 +99,7 @@ const home = ({ events }) => {
           </div>
         </Layout>
       </section>
-      <section id='we' className='relative overflow-hidden'>
+      <section id='about-us' className='relative overflow-hidden'>
         <div className='absolute flex justify-center w-full'>
           <GreenBlockImage className='w-full' />
         </div>