hazo_ui 6.15.0 → 6.16.0

package/dist/index.js

@@ -9,7 +9,7 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ArrowUpDown, icons, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, ChevronsUpDown, Download, Share2, Copy, GripVertical, ArrowUp, ArrowDown, Pencil, Calendar as Calendar$1, Globe } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Circle, ChevronRight, ChevronLeft, Filter, Plus, ArrowUpDown, icons, Loader2, AlertTriangle, OctagonAlert, CheckCircle2, ChevronsUpDown, Download, Share2, Copy, Menu, GripVertical, ArrowUp, ArrowDown, Pencil, Calendar as Calendar$1, Globe } from 'lucide-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -807,6 +807,8 @@ var en_default = {
   "locale_picker.change_language": "Change language",
   "app_logo.alt_fallback": "Logo",
   "app_header.aria_label": "Application header",
+  "app_header.menu_label": "Menu",
+  "app_header.nav_title": "Navigation",
   "skeleton.loading_content": "Loading content",
   "spinner.loading": "Loading",
   "spinner.loading_text": "Loading...",
@@ -12457,6 +12459,7 @@ function Logo({
 }
 function AppHeader({ identity, homeHref, navItems, actions, className }) {
   const t = useHazoUiT();
+  const [drawerOpen, setDrawerOpen] = React27.useState(false);
   return /* @__PURE__ */ jsxs(
     "header",
     {
@@ -12476,9 +12479,34 @@ function AppHeader({ identity, homeHref, navItems, actions, className }) {
               href: homeHref
             }
           ),
-          navItems
+          navItems && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center", children: navItems })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: actions })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          actions,
+          navItems && /* @__PURE__ */ jsxs(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+            /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "md:hidden rounded-md p-1.5 hover:bg-navbar-active/10",
+                "aria-label": t("app_header.menu_label"),
+                children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DrawerContent, { children: [
+              /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: t("app_header.nav_title") }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "p-4 [&_nav]:flex-col [&_nav]:gap-2 [&_nav]:items-stretch",
+                  onClick: (e) => {
+                    if (e.target.closest("a")) setDrawerOpen(false);
+                  },
+                  children: navItems
+                }
+              )
+            ] })
+          ] })
+        ] })
       ]
     }
   );