add breadcrumb to navigation

This commit is contained in:
proddy
2024-11-24 13:05:38 +01:00
parent 5c60ea9c15
commit d47b3b9276
12 changed files with 43 additions and 26 deletions

View File

@@ -46,7 +46,7 @@ const APSettings = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.SETTINGS_OF(LL.ACCESS_POINT(0)));
useLayoutTitle(LL.ACCESS_POINT(0));
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

View File

@@ -121,7 +121,7 @@ const ApplicationSettings = () => {
});
};
useLayoutTitle(LL.SETTINGS_OF(LL.APPLICATION()));
useLayoutTitle(LL.APPLICATION());
const SecondsInputProps = {
endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>

View File

@@ -48,7 +48,7 @@ const MqttSettings = () => {
});
const { LL } = useI18nContext();
useLayoutTitle(LL.SETTINGS_OF('MQTT'));
useLayoutTitle('MQTT');
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

View File

@@ -44,7 +44,7 @@ const NTPSettings = () => {
});
const { LL } = useI18nContext();
useLayoutTitle(LL.SETTINGS_OF('NTP'));
useLayoutTitle('NTP');
const updateFormValue = updateValueDirty(
origData,

View File

@@ -13,7 +13,7 @@ import WiFiNetworkScanner from './WiFiNetworkScanner';
const Network = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.SETTINGS_OF(LL.NETWORK(0)));
useLayoutTitle(LL.NETWORK(0));
const { routerTab } = useRouterTab();

View File

@@ -10,7 +10,7 @@ import SecuritySettings from './SecuritySettings';
const Security = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.SETTINGS_OF(LL.SECURITY(0)));
useLayoutTitle(LL.SECURITY(0));
const { routerTab } = useRouterTab();

View File

@@ -41,7 +41,7 @@ const APStatus = () => {
} = useAutoRequest(APApi.readAPStatus, { pollingTime: 3000 });
const { LL } = useI18nContext();
useLayoutTitle(LL.STATUS_OF(LL.ACCESS_POINT(0)));
useLayoutTitle(LL.ACCESS_POINT(0));
const theme = useTheme();

View File

@@ -30,7 +30,7 @@ function formatNumber(num: number) {
const HardwareStatus = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.STATUS_OF(LL.HARDWARE()));
useLayoutTitle(LL.HARDWARE());
const {
data,

View File

@@ -61,7 +61,7 @@ const MqttStatus = () => {
} = useAutoRequest(MqttApi.readMqttStatus, { pollingTime: 3000 });
const { LL } = useI18nContext();
useLayoutTitle(LL.STATUS_OF('MQTT'));
useLayoutTitle('MQTT');
const theme = useTheme();

View File

@@ -47,7 +47,7 @@ const NTPStatus = () => {
const [processing, setProcessing] = useState<boolean>(false);
const { LL } = useI18nContext();
useLayoutTitle(LL.STATUS_OF('NTP'));
useLayoutTitle('NTP');
const { send: updateTime } = useRequest(
(local_time: Time) => NTPApi.updateTime(local_time),

View File

@@ -88,7 +88,7 @@ const NetworkStatus = () => {
} = useAutoRequest(NetworkApi.readNetworkStatus, { pollingTime: 3000 });
const { LL } = useI18nContext();
useLayoutTitle(LL.STATUS_OF(LL.NETWORK(1)));
useLayoutTitle(LL.NETWORK(1));
const theme = useTheme();

View File

@@ -1,9 +1,12 @@
import { useLocation, useNavigate } from 'react-router';
import { Link, useLocation, useNavigate } from 'react-router';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import MenuIcon from '@mui/icons-material/Menu';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
import { useI18nContext } from 'i18n/i18n-react';
export const DRAWER_WIDTH = 210;
interface LayoutAppBarProps {
@@ -12,11 +15,12 @@ interface LayoutAppBarProps {
}
const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
const { LL } = useI18nContext();
const navigate = useNavigate();
const pathnames = useLocation()
.pathname.split('/')
.filter((x) => x);
const back_path = pathnames.length > 1 ? '/' + pathnames[0] : undefined;
const navigate = useNavigate();
return (
<AppBar
@@ -38,20 +42,33 @@ const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
<MenuIcon />
</IconButton>
{back_path && (
{pathnames.length > 1 && (
<>
<IconButton
sx={{ mr: 1 }}
color="inherit"
sx={{ mr: 1, fontSize: 20, verticalAlign: 'middle' }}
color="primary"
edge="start"
onClick={() => navigate(back_path)}
onClick={() => navigate('/' + pathnames[0])}
>
<ArrowBackIcon />
</IconButton>
<Link
to={'/' + pathnames[0]}
style={{ textDecoration: 'none', color: 'white' }}
>
<Typography variant="h6">
{pathnames[0] === 'status' ? LL.STATUS_OF('') : LL.SETTINGS(0)}
<NavigateNextIcon
sx={{ fontSize: 20, verticalAlign: 'middle' }}
color="primary"
/>
</Typography>
</Link>
</>
)}
<Typography variant="h6" noWrap component="div">
{title}
</Typography>
<Typography variant="h6">{title}</Typography>
</Toolbar>
</AppBar>
);