@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
54 lines (53 loc) • 1.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Link } from "../shared/Link";
import React from "react";
import { BrandingContext } from "../shared/context";
import { styled, useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
const LogoContainer = styled("div")({
position: "relative",
height: 40,
"& img": {
maxHeight: 40
}
});
export function TitleBar() {
// Theme
const theme = useTheme();
// Branding
const branding = React.useContext(BrandingContext);
// Application title
const title = branding?.title;
const [titleUI, hasLink] = React.useMemo(() => {
if (title == null)
return [undefined, true];
if (typeof title === "string" || Array.isArray(title)) {
let titleString;
let clickHandler;
if (Array.isArray(title)) {
titleString = title[0];
clickHandler = title[1];
}
else {
titleString = title;
}
return [
_jsx(Typography, { variant: "h6", sx: {
color: (theme.vars ?? theme).palette.primary.main,
fontWeight: "700",
ml: 0.5,
whiteSpace: "nowrap"
}, onClick: clickHandler == null ? undefined : (e) => clickHandler(e), children: titleString }),
true
];
}
return [title, false];
}, [title]);
if (hasLink) {
return (_jsx(Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: _jsxs(Stack, { direction: "row", sx: { alignItems: "center" }, children: [branding?.logo && _jsx(LogoContainer, { children: branding.logo }), titleUI] }) }));
}
else {
return titleUI;
}
}