1  import { Box, IconButton, Menu, MenuItem, styled, Tooltip } from "@mui/material";
 2  
 3  import { Span } from "./Typography";
 4  import { MatxLogo } from "app/components";
 5  import useSettings from "app/hooks/useSettings";
 6  import { usePlatformCapabilities } from "app/contexts/PlatformContext";
 7  import { useTeamBranding } from "app/contexts/TeamBrandingContext";
 8  import { useState } from "react";
 9  import { SwapHoriz } from "@mui/icons-material";
10  
11  const BrandRoot = styled(Box)(() => ({
12    display: "flex",
13    alignItems: "center",
14    justifyContent: "space-between",
15    padding: "20px 18px 20px 29px"
16  }));
17  
18  const StyledSpan = styled(Span)(({ mode }) => ({
19    fontSize: 18,
20    marginLeft: ".5rem",
21    display: mode === "compact" ? "none" : "block"
22  }));
23  
24  export default function Brand({ children }) {
25    const { settings } = useSettings();
26    const { platformCapabilities } = usePlatformCapabilities();
27    const { branding, brandedTeams, activeTeamId, setActiveTeamId } = useTeamBranding();
28    const leftSidebar = settings.layout1Settings.leftSidebar;
29    const { mode } = leftSidebar;
30    const [anchorEl, setAnchorEl] = useState(null);
31  
32    const appName = branding?.app_name || platformCapabilities.app_name || "RESTai";
33    const showSwitcher = brandedTeams.length > 1;
34  
35    return (
36      <BrandRoot>
37        <Box display="flex" alignItems="center">
38          {branding?.logo_url ? (
39            <img width="30px" height="30px" src={branding.logo_url} alt="logo" style={{ objectFit: "contain" }} />
40          ) : (
41            <MatxLogo />
42          )}
43          <StyledSpan mode={mode} className="sidenavHoverShow">
44            {appName}
45          </StyledSpan>
46        </Box>
47  
48        <Box className="sidenavHoverShow" sx={{ display: mode === "compact" ? "none" : "flex", alignItems: "center", gap: 0.5 }}>
49          {showSwitcher && (
50            <>
51              <Tooltip title="Switch team branding">
52                <IconButton size="small" onClick={(e) => setAnchorEl(e.currentTarget)}>
53                  <SwapHoriz fontSize="small" />
54                </IconButton>
55              </Tooltip>
56              <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
57                {brandedTeams.map((t) => (
58                  <MenuItem
59                    key={t.id}
60                    selected={t.id === activeTeamId}
61                    onClick={() => { setActiveTeamId(t.id); setAnchorEl(null); }}
62                  >
63                    {t.branding?.app_name || t.name}
64                  </MenuItem>
65                ))}
66              </Menu>
67            </>
68          )}
69          {children || null}
70        </Box>
71      </BrandRoot>
72    );
73  }