76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { Toolbar, Typography, IconButton, Box } from "@mui/material";
|
|
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import ProfileButton from "./ProfileButton";
|
|
import LightDarkToggle from "./LightDarkToggle";
|
|
import SensitiveInfoToggle from "./SensitiveInfoToggle";
|
|
import { styled } from "@mui/material/styles";
|
|
import { drawerWidth } from "./constants";
|
|
import { ProgressBar } from "units/progress";
|
|
import AppNotifications from "./notifications/AppNotifications";
|
|
|
|
interface AppBarProps extends MuiAppBarProps {
|
|
open?: boolean;
|
|
}
|
|
|
|
const AppBar = styled(MuiAppBar, {
|
|
shouldForwardProp: prop => prop !== "open"
|
|
})<AppBarProps>(({ theme, open }) => ({
|
|
zIndex: theme.zIndex.drawer + 1,
|
|
transition: theme.transitions.create(["width", "margin"], {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen
|
|
}),
|
|
...(open && {
|
|
marginLeft: drawerWidth,
|
|
width: `calc(100% - ${drawerWidth}px)`,
|
|
transition: theme.transitions.create(["width", "margin"], {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.enteringScreen
|
|
})
|
|
})
|
|
}));
|
|
|
|
type TopBarProps = {
|
|
open: boolean;
|
|
onDrawerOpen: () => void;
|
|
};
|
|
|
|
const title = "Network resurrector";
|
|
const TopBar: React.FC<TopBarProps> = ({ open, onDrawerOpen }) => {
|
|
// const { userInfo } = useTuitioUserInfo();
|
|
// to do: Avatar: userInfo.profilePictureUrl
|
|
return (
|
|
<AppBar position="fixed" open={open}>
|
|
<Toolbar>
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="open drawer"
|
|
onClick={onDrawerOpen}
|
|
edge="start"
|
|
sx={{
|
|
marginRight: 5,
|
|
...(open && { display: "none" })
|
|
}}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" noWrap component="div">
|
|
{title}
|
|
</Typography>
|
|
<Box sx={{ flexGrow: 1 }} />
|
|
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 1 }}>
|
|
<AppNotifications />
|
|
<SensitiveInfoToggle />
|
|
<LightDarkToggle />
|
|
<ProfileButton />
|
|
</Box>
|
|
</Toolbar>
|
|
<ProgressBar />
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default TopBar;
|