'use strict';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { Icon, iconNames, defaultSidebarIconName, iconSizes } from '../../../fd-component-toolbox/icon/Icon.js';
import { Link } from '../../../fd-component-toolbox/link/Link.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { useSidebarItems } from '../sidebar/sidebar-resources-provider.js';
import { useSearchDialog } from '../../search/search-dialog-provider.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function NarrowNavbar(t0) {
  const $ = c(4);
  const {
    className
  } = t0;
  const {
    openDialog
  } = useSearchDialog();
  const {
    sidebarItems
  } = useSidebarItems();
  let t1;
  if ($[0] !== className || $[1] !== openDialog || $[2] !== sidebarItems) {
    t1 = jsx("section", {
      className: "z-50 block md:hidden",
      children: jsx("div", {
        className: cn("bg-fd-tertiary-900 hover:shadow-toolbar fixed bottom-0 h-14 w-full transition-[width] duration-75 ease-in", className),
        children: jsx("div", {
          className: "flex size-full flex-row justify-between",
          children: jsxs("nav", {
            className: "scrollbar-hidden flex flex-row gap-2 overflow-x-auto p-1 whitespace-nowrap",
            children: [jsx(Link, {
              href: "#",
              className: "text-fd-tertiary-50 hover:bg-fd-tertiary-700 group flex min-w-14 shrink-0 cursor-pointer items-center justify-center gap-3 rounded-md p-1 text-xs",
              onClick: openDialog,
              children: jsx("div", {
                className: "relative flex flex-col items-center gap-1",
                children: jsx("label", {
                  className: "hover:cursor-pointer [&>svg]:size-5",
                  children: jsx(Icon, {
                    name: iconNames.magnifyingGlass,
                    color: "text-fd-tertiary-50"
                  })
                })
              })
            }), sidebarItems.map(_temp)]
          })
        })
      })
    });
    $[0] = className;
    $[1] = openDialog;
    $[2] = sidebarItems;
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  return t1;
}
function _temp(sidebarItem) {
  return jsx(Link, {
    href: sidebarItem.link,
    children: jsx(Button, {
      variant: "icon",
      className: "hover:bg-fd-tertiary-700 relative flex size-full w-14 shrink-0 flex-col items-center justify-center gap-1 rounded-md p-0 px-1 text-xs",
      children: jsx(Icon, {
        size: iconSizes.medium,
        name: sidebarItem?.icon ?? defaultSidebarIconName,
        color: "text-fd-tertiary-50"
      })
    })
  }, sidebarItem.displayName);
}
__name(NarrowNavbar, "NarrowNavbar");

export { NarrowNavbar };
