@wq/material-web
Version:
Web bindings for @wq/material
60 lines (59 loc) • 2.03 kB
JavaScript
import React, { useState } from "react";
import { AppBar, Toolbar, Typography } from "@mui/material";
import { useSiteTitle, useBreadcrumbs, useComponents } from "@wq/react";
import { useMinWidth } from "../hooks.js";
export default function Header() {
const title = useSiteTitle(),
links = useBreadcrumbs(),
{ Logo, SiteTitle, Breadcrumbs, IconButton, NavMenuPopup } =
useComponents(),
fixedMenu = useMinWidth(600),
[open, setOpen] = useState(false);
return /*#__PURE__*/ React.createElement(
React.Fragment,
null,
/*#__PURE__*/ React.createElement(
AppBar,
{
position: "static",
sx: {
zIndex: 500,
},
},
/*#__PURE__*/ React.createElement(
Toolbar,
null,
fixedMenu
? /*#__PURE__*/ React.createElement(Logo, {
edge: "start",
})
: /*#__PURE__*/ React.createElement(IconButton, {
icon: "menu",
sx: {
mr: 2,
},
onClick: () => setOpen(true),
color: "inherit",
edge: "start",
}),
/*#__PURE__*/ React.createElement(
Typography,
{
variant: "h6",
},
/*#__PURE__*/ React.createElement(SiteTitle, {
title: title,
})
)
)
),
/*#__PURE__*/ React.createElement(Breadcrumbs, {
links: links,
}),
!fixedMenu &&
/*#__PURE__*/ React.createElement(NavMenuPopup, {
open: open,
onClose: () => setOpen(false),
})
);
}