mirror of
https://dev.azure.com/tstanciu94/ReverseProxy/_git/ReverseProxy_Frontend
synced 2025-10-03 16:49:04 +03:00
Refactor ApplicationBar component for improved readability and maintainability
This commit is contained in:
parent
5ef0fe31d3
commit
15c080d574
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user