@dossierhq/design
Version:
The design system for Dossier.
44 lines • 2.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { toClassName } from '../../utils/ClassNameUtils.js';
export const Navbar = ({ children }) => {
return (_jsx("nav", { className: "navbar", role: "navigation", children: children }));
};
Navbar.displayName = 'Navbar';
Navbar.Brand = ({ children }) => {
return _jsx("div", { className: "navbar-brand", children: children });
};
Navbar.Brand.displayName = 'Navbar.Brand';
Navbar.Burger = ({ active, onClick }) => {
return (_jsxs("a", { role: "button", className: toClassName('navbar-burger', active && 'is-active'), onClick: onClick, children: [_jsx("span", { "aria-hidden": "true" }), _jsx("span", { "aria-hidden": "true" }), _jsx("span", { "aria-hidden": "true" })] }));
};
Navbar.Burger.displayName = 'Navbar.Burger';
Navbar.Menu = ({ active, children }) => {
return _jsx("div", { className: toClassName('navbar-menu', active && 'is-active'), children: children });
};
Navbar.Menu.displayName = 'Navbar.Menu';
Navbar.Start = ({ children }) => {
return _jsx("div", { className: "navbar-start", children: children });
};
Navbar.Start.displayName = 'Navbar.Start';
Navbar.End = ({ children }) => {
return _jsx("div", { className: "navbar-end", children: children });
};
Navbar.End.displayName = 'Navbar.End';
Navbar.Item = ({ active, children }) => {
const className = toClassName('navbar-item', active && 'is-active');
return children({ className });
};
Navbar.Item.displayName = 'Navbar.Item';
Navbar.Dropdown = ({ left, renderLink, children }) => {
return (_jsxs("div", { className: "navbar-item has-dropdown is-hoverable", children: [renderLink('navbar-link'), _jsx("div", { className: toClassName('navbar-dropdown', left && 'is-right'), children: children })] }));
};
Navbar.Dropdown.displayName = 'Navbar.Dropdown';
Navbar.DropdownDivider = () => {
return _jsx("hr", { className: "navbar-divider" });
};
Navbar.DropdownDivider.displayName = 'Navbar.DropdownDivider';
Navbar.DropdownContentItem = ({ children }) => {
return _jsx("p", { className: "navbar-item", children: children });
};
Navbar.DropdownContentItem.displayName = 'Navbar.ContentItem';
//# sourceMappingURL=Navbar.js.map