@prezly/theme-kit-ui
Version:
UI components for Prezly themes
127 lines (126 loc) • 7.26 kB
JavaScript
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Navigation = Navigation;
var _solid = require("@heroicons/react/20/solid");
var _outline = require("@heroicons/react/24/outline");
var _uploadcareImage = _interopRequireDefault(require("@prezly/uploadcare-image"));
var _link = _interopRequireDefault(require("next/link"));
var _react = _interopRequireWildcard(require("react"));
var _tailwindMerge = require("tailwind-merge");
var _hooks = require("@/hooks");
var _index = require("../Button/index.cjs");
var _index2 = require("./components/index.cjs");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Navigation(_ref) {
var _intl$newsroomTitle, _intl$mediaTitle, _intl$aboutTitle, _intl$contactsTitle;
var {
className,
intl = {},
categories = {
options: []
},
languages = [],
newsroom,
showNewsroomLabelAsideLogo,
externalSiteLink,
onSearch,
locale,
hasStandaloneAboutPage,
hasStandaloneContactsPage,
indexHref,
aboutHref,
contactsHref
} = _ref;
var [openMobileNav, setOpenMobileNav] = (0, _react.useState)(false);
var {
isSm
} = (0, _hooks.useDevice)();
var {
name,
galleries,
logo
} = newsroom;
var hasExtraLinks = Boolean(categories.options.length > 0 || languages.length > 0 || galleries || hasStandaloneAboutPage || hasStandaloneContactsPage || externalSiteLink);
var selectedLanguage = languages.find(lang => lang.code === locale);
var shouldUseCenteredLayout = [categories.options.length, languages.length, galleries, hasStandaloneAboutPage, hasStandaloneContactsPage, externalSiteLink].filter(Boolean).length >= 5;
var externalLinkLabel = '';
if (externalSiteLink) {
externalLinkLabel = new URL(externalSiteLink).hostname.length > 15 ? 'Website' : new URL(externalSiteLink).hostname;
}
var linkClassName = (0, _tailwindMerge.twMerge)('label-large text-gray-600 hover:text-gray-800 shrink-0', !isSm && 'text-lg font-bold');
function toggleMobileNav() {
setOpenMobileNav(!openMobileNav);
}
function handleSearch(event) {
event === null || event === void 0 || event.preventDefault();
onSearch === null || onSearch === void 0 || onSearch();
}
return /*#__PURE__*/_react.default.createElement("header", {
className: (0, _tailwindMerge.twMerge)('p-6 lg:px-12 border-b border-gray-200 relative', className)
}, /*#__PURE__*/_react.default.createElement("nav", {
className: "flex items-center justify-between"
}, /*#__PURE__*/_react.default.createElement(_link.default, {
className: "flex items-center gap-2",
href: indexHref
}, /*#__PURE__*/_react.default.createElement("h1", {
className: (0, _tailwindMerge.twMerge)('subtitle-medium', Boolean(logo) && 'hidden')
}, name), logo && /*#__PURE__*/_react.default.createElement(_uploadcareImage.default, {
className: "w-auto min-w-[80px] max-w-[120px] md:max-w-none max-h-12",
layout: "fill",
objectFit: "contain",
imageDetails: logo,
alt: name
}), showNewsroomLabelAsideLogo && /*#__PURE__*/_react.default.createElement("p", {
className: "label-large pl-2 border-l border-gray-400 text-gray-400"
}, (_intl$newsroomTitle = intl['newsroom.title']) !== null && _intl$newsroomTitle !== void 0 ? _intl$newsroomTitle : 'Newsroom')), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _tailwindMerge.twMerge)('md:items-center justify-between gap-12 md:gap-4 hidden md:flex', Boolean(openMobileNav && !isSm) && 'flex flex-col w-screen absolute top-24 left-0 z-10 bg-white border-b border-gray-200', shouldUseCenteredLayout ? 'lg:w-2/3' : 'md:w-max')
}, Boolean(categories.options.length > 0 || hasStandaloneAboutPage || hasStandaloneContactsPage || galleries) && /*#__PURE__*/_react.default.createElement("div", {
className: "pt-6 md:pt-0 flex flex-col md:flex-row md:items-center gap-12 md:gap-4 px-6 md:px-0"
}, categories.options.length > 0 && /*#__PURE__*/_react.default.createElement(_index2.CategoriesDropdown, {
options: categories.options,
intl: intl,
indexHref: categories.indexHref
}), galleries > 0 && /*#__PURE__*/_react.default.createElement(_link.default, {
className: linkClassName,
href: "/media"
}, (_intl$mediaTitle = intl['media.title']) !== null && _intl$mediaTitle !== void 0 ? _intl$mediaTitle : 'Media'), hasStandaloneAboutPage && aboutHref && /*#__PURE__*/_react.default.createElement(_link.default, {
className: linkClassName,
href: aboutHref
}, (_intl$aboutTitle = intl['about.title']) !== null && _intl$aboutTitle !== void 0 ? _intl$aboutTitle : 'About'), hasStandaloneContactsPage && contactsHref && /*#__PURE__*/_react.default.createElement(_link.default, {
className: linkClassName,
href: contactsHref
}, (_intl$contactsTitle = intl['contacts.title']) !== null && _intl$contactsTitle !== void 0 ? _intl$contactsTitle : 'Contacts')), /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex-col md:flex-row md:items-center gap-12 md:gap-4"
}, Boolean(onSearch) && /*#__PURE__*/_react.default.createElement(_index.Button, {
className: "hidden md:flex p-0",
variation: "navigation",
icon: _outline.MagnifyingGlassIcon,
onClick: handleSearch
}), Boolean(languages.length || externalSiteLink) && /*#__PURE__*/_react.default.createElement("div", {
className: "flex items-start md:items-center flex-row-reverse md:flex-row bg-gray-50 md:bg-transparent p-6 md:p-0 gap-4 justify-between md:justify-start"
}, languages.length > 0 && /*#__PURE__*/_react.default.createElement(_index2.LanguagesDropdown, {
options: languages,
selected: selectedLanguage
}), externalSiteLink && /*#__PURE__*/_react.default.createElement("a", {
className: "label-large text-gray-600 hover:text-gray-800 flex items-center shrink-0",
href: externalSiteLink,
target: "_blank",
rel: "noopener noreferrer"
}, externalLinkLabel, /*#__PURE__*/_react.default.createElement(_solid.ArrowUpRightIcon, {
className: "ml-1 w-5 h-5"
}))))), /*#__PURE__*/_react.default.createElement("div", {
className: "flex items-center gap-4 md:hidden"
}, Boolean(onSearch) && /*#__PURE__*/_react.default.createElement(_index.Button, {
variation: "navigation",
icon: _outline.MagnifyingGlassIcon,
onClick: handleSearch
}), hasExtraLinks && /*#__PURE__*/_react.default.createElement(_index.Button, {
variation: "navigation",
icon: openMobileNav ? _outline.XMarkIcon : _outline.Bars3BottomRightIcon,
onClick: toggleMobileNav
}))));
}