@natoora-libs/core 0.2.42 → 0.2.43

package/dist/components/index.cjs

@@ -10866,6 +10866,8 @@ var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
     }
   }
 }));
+var CENTER_MIN_WIDTH = 320;
+var SAFETY_BUFFER = 24;
 var TheToolbar = ({
   imageLogoDarkSmall,
   imageLogoLightSmall,
@@ -10877,9 +10879,48 @@ var TheToolbar = ({
   isAuthenticated = true
 }) => {
   const { classes } = useStyles50();
+  const theme = (0, import_material88.useTheme)();
+  const belowXl = (0, import_material88.useMediaQuery)(theme.breakpoints.down("xl"));
+  const toolbarRef = (0, import_react55.useRef)(null);
+  const leftSectionMeasureRef = (0, import_react55.useRef)(null);
+  const rightSectionMeasureRef = (0, import_react55.useRef)(null);
+  const logoRef = (0, import_react55.useRef)(null);
+  const rightSectionRef = (0, import_react55.useRef)(null);
+  const menuButtonRef = (0, import_react55.useRef)(null);
+  const [hideLeftSection, setHideLeftSection] = (0, import_react55.useState)(false);
+  const [hideRightSection, setHideRightSection] = (0, import_react55.useState)(false);
+  (0, import_react55.useLayoutEffect)(() => {
+    if (belowXl) {
+      setHideLeftSection(true);
+    }
+    const toolbar = toolbarRef.current;
+    const leftMeasure = leftSectionMeasureRef.current;
+    const rightMeasure = rightSectionMeasureRef.current;
+    if (!toolbar) return void 0;
+    const update = () => {
+      const toolbarWidth = toolbar.clientWidth;
+      const leftWidth = leftMeasure?.scrollWidth ?? 0;
+      const rightWidth = rightMeasure?.scrollWidth ?? 0;
+      const logoWidth = logoRef.current?.offsetWidth ?? 0;
+      const menuWidth = menuButtonRef.current?.offsetWidth ?? 0;
+      const availableWithoutLeft = toolbarWidth - logoWidth - menuWidth - CENTER_MIN_WIDTH - SAFETY_BUFFER;
+      const nextHideRight = rightWidth > availableWithoutLeft;
+      setHideRightSection(nextHideRight);
+      if (!belowXl) {
+        const effectiveRightWidth = nextHideRight ? 0 : rightWidth;
+        setHideLeftSection(leftWidth > availableWithoutLeft - effectiveRightWidth);
+      }
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(toolbar);
+    if (leftMeasure) observer.observe(leftMeasure);
+    if (rightMeasure) observer.observe(rightMeasure);
+    return () => observer.disconnect();
+  }, [belowXl, leftSection, rightSection]);
   return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(import_material88.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_material88.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(import_material88.Toolbar, { className: classes.topBar, children: [
-      isAuthenticated ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_material88.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(import_material88.Toolbar, { className: classes.topBar, ref: toolbarRef, children: [
+      isAuthenticated ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_material88.Box, { ref: menuButtonRef, sx: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -10887,21 +10928,31 @@ var TheToolbar = ({
           noStrokes: true,
           onClick: handleOpen
         }
-      ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_material88.Box, { sx: { display: { xs: "none", lg: "block" }, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
-        CompanyLogo_default,
+      ) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+        import_material88.Box,
         {
-          size: "small",
-          color: "light",
-          imageLogoDarkSmall,
-          imageLogoLightSmall
+          ref: logoRef,
+          sx: { display: { xs: "none", lg: "block" }, flexShrink: 0 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+            CompanyLogo_default,
+            {
+              size: "small",
+              color: "light",
+              imageLogoDarkSmall,
+              imageLogoLightSmall
+            }
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
         import_material88.Box,
         {
           ml: { xs: 0, lg: 2 },
-          sx: { display: { xs: "none", xl: "block" }, flexShrink: 0 },
+          sx: {
+            display: hideLeftSection ? "none" : "block",
+            flexShrink: 0
+          },
           children: leftSection
         }
       ),
@@ -10917,8 +10968,49 @@ var TheToolbar = ({
           children: centerSection
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_material88.Box, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_material88.Box, { sx: { flexShrink: 0 }, children: rightSection })
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+        import_material88.Box,
+        {
+          ref: rightSectionRef,
+          sx: { flexShrink: 0, display: hideRightSection ? "none" : "block" },
+          children: rightSection
+        }
+      )
     ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+      import_material88.Box,
+      {
+        ref: leftSectionMeasureRef,
+        "aria-hidden": true,
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          visibility: "hidden",
+          pointerEvents: "none",
+          whiteSpace: "nowrap",
+          display: "inline-flex"
+        },
+        children: leftSection
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+      import_material88.Box,
+      {
+        ref: rightSectionMeasureRef,
+        "aria-hidden": true,
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          visibility: "hidden",
+          pointerEvents: "none",
+          whiteSpace: "nowrap",
+          display: "inline-flex"
+        },
+        children: rightSection
+      }
+    ),
     LeftDrawer
   ] });
 };