@etsoo/toolpad
Version:
Dashboard framework extention based on Toolpad Core
60 lines (59 loc) • 2.36 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TitleBar = TitleBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const Link_1 = require("../shared/Link");
const react_1 = __importDefault(require("react"));
const context_1 = require("../shared/context");
const styles_1 = require("@mui/material/styles");
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const Stack_1 = __importDefault(require("@mui/material/Stack"));
const LogoContainer = (0, styles_1.styled)("div")({
position: "relative",
height: 40,
"& img": {
maxHeight: 40
}
});
function TitleBar() {
// Theme
const theme = (0, styles_1.useTheme)();
// Branding
const branding = react_1.default.useContext(context_1.BrandingContext);
// Application title
const title = branding?.title;
const [titleUI, hasLink] = react_1.default.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 [
(0, jsx_runtime_1.jsx)(Typography_1.default, { 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 ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: "/", style: { color: "inherit", textDecoration: "none" }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", children: [branding?.logo && (0, jsx_runtime_1.jsx)(LogoContainer, { children: branding.logo }), titleUI] }) }));
}
else {
return titleUI;
}
}