stackpress
Version:
Incept is a content management framework.
10 lines (9 loc) • 1.81 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function LayoutHead(props) {
const { open, theme, base, logo, brand, toggleLeft, toggleRight, toggleTheme } = props;
const left = open ? 'rmd-px-l-220' : 'rmd-px-l-0';
const full = typeof open === 'undefined' ? 'px-l-0' : 'px-l-220';
const themeColor = theme === 'dark' ? 'bg-gray-600' : 'bg-orange-600';
const themeIcon = theme === 'dark' ? 'fa-moon' : 'fa-sun';
return (_jsx("header", { className: `theme-bg-bg1 duration-200 absolute px-h-60 px-r-0 px-t-0 ${full} ${left}`, children: _jsxs("div", { className: "flex items-center px-px-20 px-h-100-0", children: [toggleLeft && (_jsx("button", { className: "theme-tx1 md-hidden b-0 p-0 bg-transparent text-xl", onClick: toggleLeft, children: _jsx("i", { className: "fas fa-bars" }) })), _jsx("div", { className: "flex-grow", children: base ? (_jsxs("a", { className: "theme-tx1 flex items-center no-underline", href: base, children: [logo && _jsx("img", { src: logo, alt: brand, className: "px-w-30 px-h-30 px-mr-10" }), brand && _jsx("span", { className: "uppercase px-fs-16", children: brand })] })) : brand || logo ? (_jsxs("span", { children: [logo && _jsx("img", { src: logo, alt: brand, className: "px-w-30 px-h-30 px-mr-10" }), brand && _jsx("span", { className: "uppercase px-fs-16", children: brand })] })) : undefined }), toggleTheme && (_jsx("button", { className: `flex justify-center items-center b-0 px-mr-10 px-h-26 px-w-26 px-fs-18 rounded-full text-white ${themeColor}`, onClick: () => toggleTheme(), children: _jsx("i", { className: `fas ${themeIcon}` }) })), toggleRight && (_jsx("button", { className: "theme-tx1 b-0 p-0 bg-transparent px-fs-26", onClick: toggleRight, children: _jsx("i", { className: "fas fa-user-circle" }) }))] }) }));
}