gbfa validator header nav

Author: Alessandro100

web-app/public/locales/en/common.json

@@ -92,5 +92,8 @@
         "description": "Railway in which the track consists of a single rail or a beam."
       }
     }
-  }
+  },
+  "validators": "Validators",
+  "gbfsValidator": "GBFS Validator",
+  "gtfsValidator": "GTFS Validator"
 }

web-app/src/app/components/Header.tsx

@@ -39,6 +39,7 @@ import { defaultRemoteConfigValues } from '../interface/RemoteConfig';
 import { animatedButtonStyling } from './Header.style';
 import DrawerContent from './HeaderMobileDrawer';
 import ThemeToggle from './ThemeToggle';
+import { useTranslation } from 'react-i18next';
 
 export default function DrawerAppBar(): React.ReactElement {
   const theme = useTheme();
@@ -53,6 +54,7 @@ export default function DrawerAppBar(): React.ReactElement {
     string | undefined
   >(i18n.language);
   const { config } = useRemoteConfig();
+  const { t } = useTranslation('common');
 
   i18n.on('languageChanged', (lang) => {
     setCurrentLanguage(i18n.language);
@@ -200,6 +202,62 @@ export default function DrawerAppBar(): React.ReactElement {
                 {item.title}
               </Button>
             ))}
+            {config.gbfsValidator && (
+              <>
+                <Button
+                  aria-controls='validator-menu'
+                  aria-haspopup='true'
+                  endIcon={<ArrowDropDownIcon />}
+                  onClick={handleMenuOpen}
+                  sx={(theme) => ({
+                    ...animatedButtonStyling(theme),
+                    color: theme.palette.text.primary,
+                  })}
+                  id='validator-button-menu'
+                  className={
+                    activeTab.includes('validator') ? 'active short' : ''
+                  }
+                >
+                  {t('validators')}
+                </Button>
+                <Menu
+                  id='validator-menu'
+                  anchorEl={anchorEl}
+                  open={
+                    anchorEl !== null && anchorEl.id === 'validator-button-menu'
+                  }
+                  onClose={handleMenuClose}
+                >
+                  <MenuItem
+                    key={'gbfs-validator'}
+                    onClick={() => {
+                      handleMenuItemClick('gbfs-validator');
+                    }}
+                    sx={{display: 'flex', gap: 1}}
+                  >
+                     <BikeScooterOutlined
+                        fontSize='small'
+                        sx={{ color: theme.palette.text.primary }}
+                      />
+                    {t('gbfsValidator')}
+                  </MenuItem>
+                  <MenuItem
+                    key={'gtfs-validator'}
+                    onClick={() => {
+                      handleMenuItemClick('gtfs-validator');
+                    }}
+                    sx={{display: 'flex', gap: 1}}
+                    disabled={true}
+                  >
+                    <DirectionsBusIcon
+                      fontSize='small'
+                      sx={{ color: theme.palette.text.primary }}
+                    />
+                    {t('gtfsValidator')}
+                  </MenuItem>
+                </Menu>
+              </>
+            )}
             {/* Allow users with mobilitydata.org email to access metrics */}
             {metricsOptionsEnabled && (
               <>

web-app/src/app/components/HeaderMobileDrawer.tsx

@@ -23,6 +23,8 @@ import { selectIsAuthenticated } from '../store/profile-selectors';
 import { fontFamily } from '../Theme';
 import { mobileNavElementStyle } from './Header.style';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useRemoteConfig } from '../context/RemoteConfigProvider';
+import { useTranslation } from 'react-i18next';
 
 const websiteTile = 'Mobility Database';
 
@@ -39,6 +41,8 @@ export default function DrawerContent({
 }: DrawerContentProps): JSX.Element {
   const isAuthenticated = useSelector(selectIsAuthenticated);
   const navigateTo = useNavigate();
+  const { config } = useRemoteConfig();
+  const { t } = useTranslation('common');
   const theme = useTheme();
 
   return (
@@ -95,7 +99,36 @@ export default function DrawerContent({
             {item.title}
           </Button>
         ))}
+        
         <Divider sx={{ mt: 2 }} />
+        {config.gbfsValidator && (
+          <Accordion disableGutters={true} sx={{ boxShadow: 'none' }}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls='validators-content'
+              id='validators-content'
+            >
+              <Typography
+                variant={'subtitle1'}
+                sx={{ fontFamily: fontFamily.secondary }}
+              >
+                {t('validators')}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Button
+                variant='text'
+                sx={mobileNavElementStyle}
+                href={'gbfs-validator'}
+              >
+                {t('gbfsValidator')}
+              </Button>
+              <Button variant='text' sx={mobileNavElementStyle} disabled={true}>
+                {t('gtfsValidator')}
+              </Button>
+            </AccordionDetails>
+          </Accordion>
+        )}
         {metricsOptionsEnabled && (
           <>
             <Accordion disableGutters={true} sx={{ boxShadow: 'none' }}>
@@ -186,8 +219,8 @@ export default function DrawerContent({
           </Accordion>
         ) : (
           <Button
-            variant='text'
-            sx={mobileNavElementStyle}
+            variant='contained'
+            sx={{ml:2}}
             href={SIGN_IN_TARGET}
           >
             Login