From 30e3d0d0da01926e9a3fbeaca1ee50e4b054a834 Mon Sep 17 00:00:00 2001 From: itMatos Date: Fri, 19 Jun 2026 21:44:31 -0300 Subject: [PATCH 1/6] Atualiza componente de navbar --- .../{NavBar.jsx => NavBar.tsx} | 48 ++---------- components/navbar-components/NavHeader.jsx | 39 ---------- components/navbar-components/NavHeader.tsx | 73 +++++++++++++++++++ components/navbar-components/NavLinks.jsx | 30 -------- components/navbar-components/NavLinks.tsx | 53 ++++++++++++++ components/navbar-components/NavMenu.jsx | 17 ----- locales/es/common.json | 10 +-- locales/pt/common.json | 18 +++-- src/shared/consts/navLinks.const.ts | 14 ++++ 9 files changed, 166 insertions(+), 136 deletions(-) rename components/navbar-components/{NavBar.jsx => NavBar.tsx} (51%) delete mode 100644 components/navbar-components/NavHeader.jsx create mode 100644 components/navbar-components/NavHeader.tsx delete mode 100644 components/navbar-components/NavLinks.jsx create mode 100644 components/navbar-components/NavLinks.tsx delete mode 100644 components/navbar-components/NavMenu.jsx create mode 100644 src/shared/consts/navLinks.const.ts diff --git a/components/navbar-components/NavBar.jsx b/components/navbar-components/NavBar.tsx similarity index 51% rename from components/navbar-components/NavBar.jsx rename to components/navbar-components/NavBar.tsx index 09380ceb..06e95995 100644 --- a/components/navbar-components/NavBar.jsx +++ b/components/navbar-components/NavBar.tsx @@ -1,38 +1,20 @@ import React, { useState, useEffect } from 'react'; import NavHeader from './NavHeader'; -import NavMenu from './NavMenu'; import style from 'styles/NavBar.module.css'; -function NavBar(props) { - const [menu, setMenuState] = useState(false); - const [scrollDir, setScrollDir] = useState('top'); - - const toggleMenu = (open) => { - setMenuState(open); - }; - - useEffect(() => { - const closeMenu = () => { - toggleMenu(false); - }; - - window.addEventListener('resize', closeMenu); - - return () => window.removeEventListener('resize', closeMenu); - }, []); +export default function NavBar() { + const [scrollDir, setScrollDir] = useState<'top' | 'up' | 'down'>('top'); useEffect(() => { - toggleMenu(false); const threshold = 5; - const topThreshHold = 90; - + const topThreshold = 90; let lastYPos = window.pageYOffset; let ticking = false; const updateScrollDir = () => { const currYPos = window.pageYOffset; - if (currYPos > topThreshHold) { + if (currYPos > topThreshold) { if (Math.abs(currYPos - lastYPos) < threshold) { ticking = false; return; @@ -53,30 +35,16 @@ function NavBar(props) { }; window.addEventListener('scroll', onScroll); - return () => window.removeEventListener('scroll', onScroll); - }, [scrollDir]); + }, []); return ( -
+
- - +
); } - -export default NavBar; diff --git a/components/navbar-components/NavHeader.jsx b/components/navbar-components/NavHeader.jsx deleted file mode 100644 index 0aa3c379..00000000 --- a/components/navbar-components/NavHeader.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { Fade as Hamburger } from 'hamburger-react'; -import style from 'styles/NavBar.module.css'; -import NavLinks from './NavLinks'; - -export default function NavHeader(props) { - const { toggleMenu } = props; - const { isMenuOpen } = props; - - return ( - <> -
- - Zenith Logo - - - - -
- -
-
- - ); -} diff --git a/components/navbar-components/NavHeader.tsx b/components/navbar-components/NavHeader.tsx new file mode 100644 index 00000000..f1dcf03d --- /dev/null +++ b/components/navbar-components/NavHeader.tsx @@ -0,0 +1,73 @@ +import React, { useState } from 'react'; +import { AppBar, Toolbar, Box, Drawer, List, IconButton } from '@mui/material'; +import MenuIcon from '@mui/icons-material/Menu'; +import CloseIcon from '@mui/icons-material/Close'; +import NavLinks from './NavLinks'; + +export default function NavHeader() { + const [menuOpen, setMenuOpen] = useState(false); + + return ( + <> + + + + Zenith Logo + + + + + + + setMenuOpen(true)} sx={menuButtonSx} aria-label="abrir menu"> + + + + + + setMenuOpen(false)} slotProps={drawerSlotProps}> + + setMenuOpen(false)} /> + + + setMenuOpen(false)} sx={closeButtonSx} aria-label="fechar menu" size="large"> + + + + + + ); +} + +const appBarSx = { + backgroundColor: 'transparent', + zIndex: 3 +}; + +const toolbarSx = { + justifyContent: 'space-between', + alignItems: 'center', + px: { xs: '1.5em', md: '2em' }, + height: '90px', + minHeight: '90px !important' +}; + +const desktopNavSx = { display: { xs: 'none', md: 'flex' } }; + +const menuButtonSx = { display: { xs: 'flex', md: 'none' }, color: 'white' }; + +const drawerHeaderSx = { + display: 'flex', + justifyContent: 'center', + px: '1.5em', + pt: 1, + backgroundColor: 'black' +}; + +const closeButtonSx = { color: 'white' }; + +const drawerSlotProps = { + paper: { sx: { backgroundColor: 'black' } } +}; + +const drawerListSx = { backgroundColor: 'black', height: '100%' }; diff --git a/components/navbar-components/NavLinks.jsx b/components/navbar-components/NavLinks.jsx deleted file mode 100644 index cd38c69f..00000000 --- a/components/navbar-components/NavLinks.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import useTranslation from 'next-translate/useTranslation'; -import { navBarItem } from '../../styles/NavBar.module.css'; - -export default function NavLinks(props) { - const { t } = useTranslation(); - const navTexts = t('common:navBar', { count: -1 }, { returnObjects: true }); - return ( - <> -
    -
  • - {navTexts[0]} -
    • -
  • - {navTexts[1]} -
    • -
  • - {navTexts[2]} -
    • -
  • - {navTexts[3]} -
    • -
  • - {navTexts[4]} -
    • -
- - ); -} diff --git a/components/navbar-components/NavLinks.tsx b/components/navbar-components/NavLinks.tsx new file mode 100644 index 00000000..29f1134b --- /dev/null +++ b/components/navbar-components/NavLinks.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import Link from 'next/link'; +import useTranslation from 'next-translate/useTranslation'; +import { Box, Button, ListItem } from '@mui/material'; +import { NAV_LINKS } from '@/src/shared/consts/navLinks.const'; + +interface NavLinksProps { + mobile?: boolean; + onNavigate?: () => void; + sx?: object; +} + +export default function NavLinks({ mobile, onNavigate, sx }: NavLinksProps) { + const { t } = useTranslation(); + + const buttonSx = { + color: 'white', + fontWeight: 300, + fontSize: '18px', + textTransform: 'none', + '&:hover': { color: 'lightgray', backgroundColor: 'transparent' } + }; + + const mobileItemSx = { + borderBottom: '1px solid rgba(169, 169, 169, 0.3)', + py: '1.2em', + px: '1.5em' + }; + + if (mobile) { + return ( + <> + {NAV_LINKS.map((link) => ( + + + + ))} + + ); + } + + return ( + + {NAV_LINKS.map((link) => ( + + ))} + + ); +} diff --git a/components/navbar-components/NavMenu.jsx b/components/navbar-components/NavMenu.jsx deleted file mode 100644 index f069b2a1..00000000 --- a/components/navbar-components/NavMenu.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import NavLinks from './NavLinks'; -import style from 'styles/NavBar.module.css'; - -export default function NavMenu(props) { - return ( -
- -
- ); -} diff --git a/locales/es/common.json b/locales/es/common.json index af750480..46a1dec1 100644 --- a/locales/es/common.json +++ b/locales/es/common.json @@ -1,7 +1,7 @@ { - "navBar": ["SOBRE NÓS", "PROJETOS", "KURUMIM", "PROCESSO SELETIVO", "OBSAT"], - "footer": { - "copyright": "© 2024 Zenith Aerospace", - "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD" - } + "navBar": ["SOBRE NÓS", "PROJETOS", "KURUMIM", "PROCESSO SELETIVO", "LANÇAMENTOS", "OBSAT"], + "footer": { + "copyright": "© 2024 Zenith Aerospace", + "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD" + } } diff --git a/locales/pt/common.json b/locales/pt/common.json index af750480..ce16e8d2 100644 --- a/locales/pt/common.json +++ b/locales/pt/common.json @@ -1,7 +1,15 @@ { - "navBar": ["SOBRE NÓS", "PROJETOS", "KURUMIM", "PROCESSO SELETIVO", "OBSAT"], - "footer": { - "copyright": "© 2024 Zenith Aerospace", - "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD" - } + "navBar": ["SOBRE NÓS", "PROJETOS", "KURUMIM", "PROCESSO SELETIVO", "LANÇAMENTOS", "OBSAT"], + "NAVBAR": { + "ABOUT_US": "SOBRE NÓS", + "PROJECTS": "PROJETOS", + "KURUMIM": "KURUMIM", + "RECRUITMENT_PROCESS": "PROCESSO SELETIVO", + "LAUNCHES": "LANÇAMENTOS", + "OBSAT": "OBSAT" + }, + "footer": { + "copyright": "© 2024 Zenith Aerospace", + "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD" + } } diff --git a/src/shared/consts/navLinks.const.ts b/src/shared/consts/navLinks.const.ts new file mode 100644 index 00000000..f3f45099 --- /dev/null +++ b/src/shared/consts/navLinks.const.ts @@ -0,0 +1,14 @@ +type NavLinkType = { + href: string; + labelKey: string; + external?: boolean; +}; + +export const NAV_LINKS: readonly NavLinkType[] = [ + { href: '/zenith', labelKey: 'common:NAVBAR.ABOUT_US' }, + { href: '/projetos', labelKey: 'common:NAVBAR.PROJECTS' }, + { href: '/kurumim', labelKey: 'common:NAVBAR.KURUMIM' }, + { href: '/processo-seletivo', labelKey: 'common:NAVBAR.RECRUITMENT_PROCESS' } + // { href: '/launches', labelKey: 'common:NAVBAR.LAUNCHES' } + // { href: 'https://ob-site.vercel.app/', labelKey: 'common:NAVBAR.OBSAT', external: true } +] as const; From 73eb27c2c9b257b7a30bf9b92a6c48fca2f0981d Mon Sep 17 00:00:00 2001 From: itMatos Date: Fri, 19 Jun 2026 21:50:30 -0300 Subject: [PATCH 2/6] =?UTF-8?q?Melhora=20comportamento=20do=20menu=20de=20?= =?UTF-8?q?navega=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/navbar-components/NavHeader.tsx | 59 ++++++++++++---------- locales/en/common.json | 10 ++-- locales/es/common.json | 2 +- locales/pt/common.json | 2 +- 4 files changed, 40 insertions(+), 33 deletions(-) diff --git a/components/navbar-components/NavHeader.tsx b/components/navbar-components/NavHeader.tsx index f1dcf03d..7100cb15 100644 --- a/components/navbar-components/NavHeader.tsx +++ b/components/navbar-components/NavHeader.tsx @@ -1,11 +1,15 @@ import React, { useState } from 'react'; -import { AppBar, Toolbar, Box, Drawer, List, IconButton } from '@mui/material'; +import { AppBar, Toolbar, Box, Menu, List, IconButton } from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; import CloseIcon from '@mui/icons-material/Close'; import NavLinks from './NavLinks'; export default function NavHeader() { - const [menuOpen, setMenuOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + const menuOpen = Boolean(anchorEl); + + const handleOpen = (event: React.MouseEvent) => setAnchorEl(event.currentTarget); + const handleClose = () => setAnchorEl(null); return ( <> @@ -19,22 +23,28 @@ export default function NavHeader() { - setMenuOpen(true)} sx={menuButtonSx} aria-label="abrir menu"> - + + {menuOpen ? : } - setMenuOpen(false)} slotProps={drawerSlotProps}> - - setMenuOpen(false)} /> + + + - - setMenuOpen(false)} sx={closeButtonSx} aria-label="fechar menu" size="large"> - - - - + ); } @@ -56,18 +66,15 @@ const desktopNavSx = { display: { xs: 'none', md: 'flex' } }; const menuButtonSx = { display: { xs: 'flex', md: 'none' }, color: 'white' }; -const drawerHeaderSx = { - display: 'flex', - justifyContent: 'center', - px: '1.5em', - pt: 1, - backgroundColor: 'black' -}; - -const closeButtonSx = { color: 'white' }; - -const drawerSlotProps = { - paper: { sx: { backgroundColor: 'black' } } +const menuSlotProps = { + paper: { + sx: { + backgroundColor: 'black', + width: '100vw', + maxWidth: '100vw', + left: '0 !important' + } + } }; -const drawerListSx = { backgroundColor: 'black', height: '100%' }; +const menuListSx = { backgroundColor: 'black', width: '100%' }; diff --git a/locales/en/common.json b/locales/en/common.json index a56446b9..85ad00b9 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -1,7 +1,7 @@ { - "navBar": ["ABOUT US", "PROJECTS", "KURUMIM", "SELECTION PROCESS", "OBSAT"], - "footer": { - "copyright": "© 2024 Zenith Aerospace", - "easterEgg": "MADE WITH TONS OF JAVASCRIPT AND CONFUSION ON DISCORD" - } + "navBar": ["ABOUT US", "PROJECTS", "KURUMIM", "SELECTION PROCESS", "OBSAT"], + "footer": { + "copyright": "©Zenith Aerospace", + "easterEgg": "MADE WITH TONS OF JAVASCRIPT AND CONFUSION ON DISCORD" + } } diff --git a/locales/es/common.json b/locales/es/common.json index 46a1dec1..3af9e5a1 100644 --- a/locales/es/common.json +++ b/locales/es/common.json @@ -1,7 +1,7 @@ { "navBar": ["SOBRE NÓS", "PROJETOS", "KURUMIM", "PROCESSO SELETIVO", "LANÇAMENTOS", "OBSAT"], "footer": { - "copyright": "© 2024 Zenith Aerospace", + "copyright": "© Zenith Aerospace", "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD" } } diff --git a/locales/pt/common.json b/locales/pt/common.json index ce16e8d2..1ef11b64 100644 --- a/locales/pt/common.json +++ b/locales/pt/common.json @@ -9,7 +9,7 @@ "OBSAT": "OBSAT" }, "footer": { - "copyright": "© 2024 Zenith Aerospace", + "copyright": "© Zenith Aerospace", "easterEgg": "FEITO COM MUITO JAVASCRIPT E CONFUSÃO NO DISCORD" } } From ea1ed8122b03486ac4eacf319220200a0fceef09 Mon Sep 17 00:00:00 2001 From: itMatos Date: Fri, 19 Jun 2026 22:05:16 -0300 Subject: [PATCH 3/6] Atualiza refs para navbar --- pages/index.jsx | 32 ++- pages/kurumim.jsx | 222 ++++++++++-------- pages/processo-seletivo.jsx | 138 +++++------ pages/projetos.jsx | 21 +- pages/zenith.jsx | 177 +++++++------- .../components/Navbar}/NavBar.tsx | 0 .../components/Navbar}/NavHeader.tsx | 0 .../components/Navbar}/NavLinks.tsx | 0 8 files changed, 329 insertions(+), 261 deletions(-) rename {components/navbar-components => src/components/Navbar}/NavBar.tsx (100%) rename {components/navbar-components => src/components/Navbar}/NavHeader.tsx (100%) rename {components/navbar-components => src/components/Navbar}/NavLinks.tsx (100%) diff --git a/pages/index.jsx b/pages/index.jsx index c3a9922e..d5a26039 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -1,26 +1,42 @@ import React from 'react'; -import NavBar from 'components/navbar-components/NavBar'; +import HeadTags from 'components/general/HeadTags'; import HighlightsSection from 'components/home-components/highlights-section/HighlightsSection'; import ProjectBanner from 'components/banners-components/ProjectBanner'; import SupportersBanner from 'components/banners-components/SupportersBanner'; import Sectors from 'components/home-components/sectors-section/Sectors'; import Footer from 'components/Footer'; import useTranslation from 'next-translate/useTranslation'; -import HeadTags from 'components/general/HeadTags'; +import NavBar from '../src/components/Navbar/NavBar.tsx'; import HomepageHeroSection from '../components/home-components/HeroSection'; function Home() { - const { t } = useTranslation(); const metaTags = t('homePage:metaTags', { count: -1 }, { returnObjects: true }); return ( <> - + - - + +