tudor.stanciu/reverse-proxy-frontend
tudor.stanciu/reverse-proxy-frontend
1
0
Fork 0
mirror of https://dev.azure.com/tstanciu94/ReverseProxy/_git/ReverseProxy_Frontend synced 2025-10-03 16:49:04 +03:00
Code Issues 3 Packages Projects Releases Wiki Activity

Refactor ApplicationBar component for improved readability and maintainability

Browse Source
This commit is contained in:
Tudor Stanciu 2025-09-29 01:48:51 +03:00
parent 5ef0fe31d3
commit 15c080d574
1 changed files with 8 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/layout/ApplicationBar.tsx
View File

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