@octopusdeploy/design-system-components
Version:
The design systems component library.
69 lines (68 loc) • 3.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TopNavBar = TopNavBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_responsive_1 = require("react-responsive");
const breakpoints_1 = require("../../hooks/breakpoints");
const resetStyles_1 = require("../../utils/resetStyles");
const NavigationBarIconButton_1 = require("../NavigationBar/NavigationBarIconButton");
function TopNavBar({ logo, searchBar, banner, actions, onExpandMenu }) {
const isLargerThanIpad = (0, breakpoints_1.useIsLargerThanIpadResolution)();
const mobileBannerBreakpointWidth = 1231;
const isMobileBannerScreen = (0, react_responsive_1.useMediaQuery)({ query: `(max-width:${mobileBannerBreakpointWidth}px)` });
const inAppMessagingBannerTarget = (0, jsx_runtime_1.jsx)("span", { "data-chmln": "top-nav-banner" });
const actionsComponent = actions && (0, jsx_runtime_1.jsx)(TopNavBarActions, { actions: actions });
// Desktop layout
if (isLargerThanIpad) {
// Desktop layout with banner on separate row
if (isMobileBannerScreen) {
return ((0, jsx_runtime_1.jsxs)("nav", { className: topNavBarStyles, children: [(0, jsx_runtime_1.jsxs)(TopNavBarRow, { children: [logo, searchBar, actionsComponent] }), banner] }));
}
// Desktop layout with all elements on the same row
return ((0, jsx_runtime_1.jsx)("nav", { className: topNavBarStyles, children: (0, jsx_runtime_1.jsxs)(TopNavBarRow, { children: [logo, searchBar, banner, inAppMessagingBannerTarget, actionsComponent] }) }));
}
// Mobile layout with search bar and banner on separate rows
return ((0, jsx_runtime_1.jsxs)("nav", { className: topNavBarStyles, children: [(0, jsx_runtime_1.jsxs)(TopNavBarRow, { children: [(0, jsx_runtime_1.jsx)(NavigationBarIconButton_1.NavigationBarIconButton, { icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.BarsIcon, { size: 24 }), accessibleName: "Open navigation menu", onClick: onExpandMenu }), logo, actionsComponent] }), searchBar && ((0, jsx_runtime_1.jsx)(TopNavBarRow, { children: (0, jsx_runtime_1.jsx)("div", { className: searchBarMobileContainerStyles, children: searchBar }) })), banner] }));
}
function TopNavBarRow({ children }) {
return (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(topNavBarRowStyles), children: children });
}
function TopNavBarActions({ actions }) {
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(topNavBarActionsContainerStyles), children: (0, jsx_runtime_1.jsx)("ul", { className: actionsListStyles, children: actions?.map((action) => {
if (!action.content) {
return null;
}
return (0, jsx_runtime_1.jsx)("li", { children: action.content }, action.key);
}) }) }));
}
const topNavBarStyles = (0, css_1.css)({
position: "relative",
padding: design_system_tokens_1.space[16],
width: "100%",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[16],
});
const topNavBarRowStyles = (0, css_1.css)({
display: "flex",
//We need an explicit height in order to avoid items/actions from expanding
//the navbar past what the design accounts for.
height: "2.25rem",
gap: design_system_tokens_1.space[16],
});
const searchBarMobileContainerStyles = (0, css_1.css)({
flex: 1,
});
const topNavBarActionsContainerStyles = (0, css_1.css)({
marginLeft: "auto",
});
const actionsListStyles = (0, css_1.css)({
...resetStyles_1.resetStyles.list,
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[16],
});