Add current page indicator

Author: itsmeurbi

src/NavBar.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
 import { Link } from 'react-router-dom'
 import { useSurvey } from './hooks/useSurvey'
 import {
@@ -11,12 +12,18 @@ import {
   Avatar
 } from '@mui/material'
 import { LanguageSelector } from './LanguageSelector';
+import { ReactElement } from 'react'
 const LOGO = 'src/assets/images/logo.png'
 
-function NavBar({ selected = null }) {
+const NavBar = (): ReactElement => {
+  const location = useLocation()
   const { openSurvey } = useSurvey()
   const { t } = useTranslation()
 
+  const isActive = (path: string): boolean => {
+    return location.pathname.includes(path)
+  }
+
   return (
     <>
       <AppBar position="sticky" color="default">
@@ -26,12 +33,12 @@ function NavBar({ selected = null }) {
               <Avatar src={LOGO} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
             </Link>
             <Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%' }}>
-              <Button sx={{ height: '100%'}}>
+              <Button sx={{ height: '100%', backgroundColor: isActive('/sponsorship') ? '#c1c1c1' : 'transparent' }}>
                 <Typography>{t("navbar.sponsorship", "¿Te interesa patrocinar?")}</Typography>
               </Button>
             </Link>
             <Link to="/about" style={{ textDecoration: 'none', height: '100%' }}>
-              <Button sx={{ height: '100%'}}>
+              <Button sx={{ height: '100%', backgroundColor: isActive('/about') ? '#c1c1c1' : 'transparent' }}>
                 <Typography>{t("navbar.aboutUs", "Acerca de nosotros")}</Typography>
               </Button>
             </Link>

src/i18n.js

@@ -2,7 +2,7 @@ import i18n from 'i18next'
 import i18nBackend from 'i18next-http-backend'
 import { initReactI18next } from 'react-i18next'
 
-const getCurrentHost = process.env.NODE_ENV === 'development' ? 'http://localhost:5174': 'https://www.webdevtalks.mx'
+const getCurrentHost = process.env.NODE_ENV === 'development' ? 'http://localhost:5173': 'https://www.webdevtalks.mx'
 i18n.use(i18nBackend)
     .use(initReactI18next)
     .init({

src/theme.ts

@@ -4,6 +4,7 @@ const theme = createTheme({
   palette: {
     primary: {
       main: '#1c1c17',
+      hover: '',
     },
     secondary: {
       main: '#3298cc',