Merge pull request #25 from bancodobrasil/fix/header-adjustments

Fix/header adjustments

src/components/Nav/Nav.tsx

@@ -7,11 +7,13 @@ import {
  SelectChangeEvent,
  Typography,
  Button,
+ Menu,
 } from '@mui/material';
 import { useKeycloak } from '@react-keycloak/web';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
+import LanguageIcon from '@mui/icons-material/Language';
 import { JAMIE_UI_BASE_URL } from '../../constants';
 
 export const Nav = () => {
@@ -22,28 +24,57 @@ export const Nav = () => {
  const { t, i18n } = useTranslation();
 
  const [language, setLanguage] = useState<string>(i18n.resolvedLanguage);
+ const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
- const handleLanguageChange = (event: SelectChangeEvent) => {
- const lng = event.target.value as string;
- i18n.changeLanguage(lng);
- setLanguage(lng);
+ const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleCloseMenu = () => {
+ setAnchorEl(null);
+ };
+
+ const handleLanguageChange = (event: React.MouseEvent<HTMLElement>, newLanguage: string) => {
+ i18n.changeLanguage(newLanguage);
+ setLanguage(newLanguage);
+ setAnchorEl(null);
  };
 
  const renderLanguageSwitcher = () => (
- <FormControl sx={{ minWidth: 160 }}>
- <InputLabel id="demo-simple-select-label">{t('language.title')}</InputLabel>
- <Select
- variant="standard"
- labelId="demo-simple-select-label"
- id="demo-simple-select"
- value={language}
- label={t('language.title')}
- onChange={handleLanguageChange}
+ <Box sx={{ flex: 1, width: '2.7rem' }}>
+ <Button
+ onClick={handleMenuClick}
+ variant="text"
+ id="language-button"
+ startIcon={
+ <LanguageIcon
+ sx={{
+ color: '#38879c',
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'center',
+ mr: '10px',
+ }}
+ />
+ }
+ />
+ <Menu
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleCloseMenu}
+ id="language-menu"
  >
- <MenuItem value="en">English</MenuItem>
- <MenuItem value="pt-BR">Português Brasileiro</MenuItem>
- </Select>
- </FormControl>
+ <MenuItem onClick={event => handleLanguageChange(event, 'en')} selected={language === 'en'}>
+ English
+ </MenuItem>
+ <MenuItem
+ onClick={event => handleLanguageChange(event, 'pt-BR')}
+ selected={language === 'pt-BR'}
+ >
+ Português Brasileiro
+ </MenuItem>
+ </Menu>
+ </Box>
  );
 
  const onLogoutClickHandler = () => {
@@ -54,35 +85,43 @@ export const Nav = () => {
  keycloak?.login({ redirectUri: `${JAMIE_UI_BASE_URL}${location.pathname}` });
  };
 
+ /* The `renderLoginButton` function is responsible for rendering the login button based on the
+authentication status of the user. */
  const renderLoginButton = () => {
  if (keycloak?.authenticated) {
  return (
  <Box>
- <Button onClick={onLogoutClickHandler}>Logout</Button>
+ <Button variant="text" color="secondary" onClick={onLogoutClickHandler}>
+ Logout
+ </Button>
  </Box>
  );
  }
  return (
  <Box>
- <Button onClick={onLoginClickHandler}>Login</Button>
+ <Button variant="text" color="secondary" onClick={onLoginClickHandler}>
+ Login
+ </Button>
  </Box>
  );
  };
 
+ /* Return a element that represents the navigation bar component. */
  return (
  <Box
  component="nav"
  sx={{
  display: 'flex',
  alignItems: 'center',
  px: '2rem',
- minHeight: '5rem',
+ minHeight: '3rem',
+ backgroundColor: 'black',
  }}
  className="shadow"
  >
  <Box>
  <Link to="/">
- <Typography variant="h6" component="h6" sx={{ fontSize: '1.5rem' }}>
+ <Typography variant="h6" component="h6" sx={{ fontSize: '1.25rem', color: 'white' }}>
  Jamie
  </Typography>
  </Link>
@@ -91,7 +130,7 @@ export const Nav = () => {
  sx={{ display: 'flex', justifyContent: 'flex-end', flex: 1, alignItems: 'center' }}
  className="space-x-4"
  >
- {renderLanguageSwitcher()}
+ <Box>{renderLanguageSwitcher()}</Box>
  {renderLoginButton()}
  </Box>
  </Box>