web-conexs-app/web-conexs-client/src/components/Header.tsx at 9a08066efce3bba4c32f4752c81ceb6d8e9b7968 · DiamondLightSource/web-conexs-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import {
  Box,
  Drawer,
  IconButton,
  Stack,
  Tooltip,
  Typography,
  useTheme,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";

import { useContext, useState } from "react";
import { UserContext } from "../UserContext";
import {
  ColourSchemeButton,
  Navbar,
  User,
  Logo,
} from "@diamondlightsource/sci-react-ui";

import ClusterBadge from "./ClusterBadge";
import SideToolbar from "./SideToolbar";

export default function Header() {
  const user = useContext(UserContext);
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [isClosing, setIsClosing] = useState(false);

  const handleDrawerClose = () => {
    setIsClosing(true);
    setMobileOpen(false);
  };

  const handleDrawerTransitionEnd = () => {
    setIsClosing(false);
  };

  const handleDrawerToggle = () => {
    if (!isClosing) {
      setMobileOpen(!mobileOpen);
    }
  };

  const handleLogin = () => window.location.assign("/login");

  const handleLogout = () => window.location.assign("/oauth2/sign_out");

  const icon = theme.logos?.short;

  return (
    <Navbar
      sx={{
        zIndex: (theme) => theme.zIndex.drawer + 1,
        height: "70px",
      }}
      leftSlot={
        <Stack
          direction="row"
          sx={{ alignItems: "center", justifyConent: "center" }}
        >
          <IconButton
            size="large"
            onClick={handleDrawerToggle}
            sx={{
              color: theme.palette.primary.contrastText,
              display: { xs: "block", md: "none" },
            }}
          >
            <MenuIcon fontSize="inherit"></MenuIcon>
          </IconButton>
          <Drawer
            variant="temporary"
            open={mobileOpen}
            onTransitionEnd={handleDrawerTransitionEnd}
            onClose={handleDrawerClose}
            onClick={() => {
              handleDrawerClose();
              handleDrawerTransitionEnd();
            }}
          >
            <SideToolbar open={mobileOpen}></SideToolbar>
          </Drawer>
          {icon && (
            <Box
              maxWidth="2rem"
              margin="5px"
              height="100%"
              sx={{
                "&:hover": { filter: "brightness(80%);" },
                marginRight: { xs: "0", md: "50px" },
              }}
            >
              <Logo short={true}></Logo>
            </Box>
          )}
        </Stack>
      }
      logo={undefined}
      rightSlot={
        <Stack direction="row" alignItems="center">
          <ClusterBadge />

          <User
            colour="white"
            onLogin={handleLogin}
            onLogout={handleLogout}
            user={
              user.person == null || user.person == undefined
                ? null
                : { fedid: user.person.identifier }
            }
          />
          <ColourSchemeButton />
        </Stack>
      }
      containerWidth={false}
    >
      <Typography
        variant="h4"
        color={theme.palette.primary.contrastText}
        sx={{ padding: "10px 5px 2px 5px" }}
        height="100%"
      >
        Web&#8209;CONEXS
      </Typography>
    </Navbar>
  );
}