@natoora-libs/core 0.2.43 → 0.2.44

package/dist/components/index.cjs

@@ -10866,8 +10866,6 @@ var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
     }
   }
 }));
-var CENTER_MIN_WIDTH = 320;
-var SAFETY_BUFFER = 24;
 var TheToolbar = ({
   imageLogoDarkSmall,
   imageLogoLightSmall,
@@ -10879,48 +10877,9 @@ 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, 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)(
+    /* @__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)(import_material88.Box, { sx: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -10929,30 +10888,20 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
-        import_material88.Box,
+      /* @__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,
         {
-          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
-            }
-          )
+          size: "small",
+          color: "light",
+          imageLogoDarkSmall,
+          imageLogoLightSmall
         }
-      ),
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
         import_material88.Box,
         {
           ml: { xs: 0, lg: 2 },
-          sx: {
-            display: hideLeftSection ? "none" : "block",
-            flexShrink: 0
-          },
+          sx: { flexShrink: 0, display: { xs: "none", xl: "block" } },
           children: leftSection
         }
       ),
@@ -10968,49 +10917,8 @@ 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,
-        {
-          ref: rightSectionRef,
-          sx: { flexShrink: 0, display: hideRightSection ? "none" : "block" },
-          children: rightSection
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(import_material88.Box, { sx: { flexShrink: 0, display: { xs: "none", xl: "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
   ] });
 };