@prezly/theme-kit-ui/build/components/Navigation/Navigation.mjs

UI components for Prezly themes

'use client';

import { ArrowUpRightIcon } from '@heroicons/react/20/solid';
import { Bars3BottomRightIcon, MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
import Image from '@prezly/uploadcare-image';
import Link from 'next/link';
import React, { useState } from 'react';
import { twMerge } from 'tailwind-merge';
import { useDevice } from '@/hooks';
import { Button } from "../Button/index.mjs";
import { CategoriesDropdown, LanguagesDropdown } from "./components/index.mjs";
export 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] = useState(false);
  var {
    isSm
  } = 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 = 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.createElement("header", {
    className: twMerge('p-6 lg:px-12 border-b border-gray-200 relative', className)
  }, /*#__PURE__*/React.createElement("nav", {
    className: "flex items-center justify-between"
  }, /*#__PURE__*/React.createElement(Link, {
    className: "flex items-center gap-2",
    href: indexHref
  }, /*#__PURE__*/React.createElement("h1", {
    className: twMerge("subtitle-medium", Boolean(logo) && "hidden")
  }, name), logo && /*#__PURE__*/React.createElement(Image, {
    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.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.createElement("div", {
    className: 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.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.createElement(CategoriesDropdown, {
    options: categories.options,
    intl: intl,
    indexHref: categories.indexHref
  }), galleries > 0 && /*#__PURE__*/React.createElement(Link, {
    className: linkClassName,
    href: "/media"
  }, (_intl$mediaTitle = intl['media.title']) !== null && _intl$mediaTitle !== void 0 ? _intl$mediaTitle : 'Media'), hasStandaloneAboutPage && aboutHref && /*#__PURE__*/React.createElement(Link, {
    className: linkClassName,
    href: aboutHref
  }, (_intl$aboutTitle = intl['about.title']) !== null && _intl$aboutTitle !== void 0 ? _intl$aboutTitle : 'About'), hasStandaloneContactsPage && contactsHref && /*#__PURE__*/React.createElement(Link, {
    className: linkClassName,
    href: contactsHref
  }, (_intl$contactsTitle = intl['contacts.title']) !== null && _intl$contactsTitle !== void 0 ? _intl$contactsTitle : 'Contacts')), /*#__PURE__*/React.createElement("div", {
    className: "flex flex-col md:flex-row md:items-center gap-12 md:gap-4"
  }, Boolean(onSearch) && /*#__PURE__*/React.createElement(Button, {
    className: "hidden md:flex p-0",
    variation: "navigation",
    icon: MagnifyingGlassIcon,
    onClick: handleSearch
  }), Boolean(languages.length || externalSiteLink) && /*#__PURE__*/React.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.createElement(LanguagesDropdown, {
    options: languages,
    selected: selectedLanguage
  }), externalSiteLink && /*#__PURE__*/React.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.createElement(ArrowUpRightIcon, {
    className: "ml-1 w-5 h-5"
  }))))), /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-4 md:hidden"
  }, Boolean(onSearch) && /*#__PURE__*/React.createElement(Button, {
    variation: "navigation",
    icon: MagnifyingGlassIcon,
    onClick: handleSearch
  }), hasExtraLinks && /*#__PURE__*/React.createElement(Button, {
    variation: "navigation",
    icon: openMobileNav ? XMarkIcon : Bars3BottomRightIcon,
    onClick: toggleMobileNav
  }))));
}