Refactor ApplicationBar component for improved readability and maintainability

This commit is contained in:
Tudor Stanciu 2025-09-29 01:48:51 +03:00
parent 5ef0fe31d3
commit 15c080d574

View File

@ -1,17 +1,9 @@
import { useState, useEffect } from "react";
import {
Container,
Toolbar,
Menu,
MenuItem,
IconButton,
Typography,
AppBar,
Box
} from "@mui/material";
import { Container, Toolbar, Menu, MenuItem, IconButton, Typography, AppBar, Box } from "@mui/material";
import { useTranslation } from "react-i18next";
import ReactCountryFlag from "react-country-flag";
import Navigation from "./Navigation";
import { getPublicPath } from "../../utils/paths";
interface Flag {
name: string;
@ -52,8 +44,6 @@ const ApplicationBar: React.FC = () => {
setAnchorEl(null);
};
const routePrefix = import.meta.env.VITE_BASE_PATH;
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
@ -67,7 +57,7 @@ const ApplicationBar: React.FC = () => {
>
<Box
component="a"
href={`${routePrefix}/`}
href={getPublicPath("/")}
sx={{
opacity: 1,
textAlign: "center"
@ -75,7 +65,7 @@ const ApplicationBar: React.FC = () => {
>
<Box
component="img"
src={`${routePrefix}/favicon.ico`}
src={getPublicPath("/favicon.ico")}
alt="logo"
sx={{
width: "100%",
@ -95,20 +85,8 @@ const ApplicationBar: React.FC = () => {
</Container>
<div>
<IconButton
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
size="large"
>
{i18n.language && (
<ReactCountryFlag
svg
countryCode={flag.name}
title={flag.name}
/>
)}
<IconButton aria-controls="menu-appbar" aria-haspopup="true" onClick={handleMenu} color="inherit" size="large">
{i18n.language && <ReactCountryFlag svg countryCode={flag.name} title={flag.name} />}
</IconButton>
<Menu
@ -126,12 +104,8 @@ const ApplicationBar: React.FC = () => {
open={open}
onClose={handleClose}
>
<MenuItem onClick={changeLanguage("ro")}>
{t("Language.Romanian")}
</MenuItem>
<MenuItem onClick={changeLanguage("en")}>
{t("Language.English")}
</MenuItem>
<MenuItem onClick={changeLanguage("ro")}>{t("Language.Romanian")}</MenuItem>
<MenuItem onClick={changeLanguage("en")}>{t("Language.English")}</MenuItem>
</Menu>
</div>
</Toolbar>