tinacms 2.8.0 → 2.8.1

package/dist/index.js

@@ -45087,7 +45087,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     ...props
   }) => {
     const styles = {
-      warning: "text-sm px-4 py-2 text-amber-700 bg-amber-100 rounded border border-amber-700/20"
+      warning: "ml-8 text-sm px-4 py-2 text-amber-700 bg-amber-100 rounded border border-amber-700/20"
     };
     const icon = {
       warning: /* @__PURE__ */ React__namespace.createElement(AiFillWarning, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-amber-600" })
@@ -45845,7 +45845,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     requiredArgs(1, arguments);
     return formatDistance(dirtyDate, Date.now(), options);
   }
-  const currentVersion = "1.0";
+  const version$1 = "2.8.1";
   const VersionInfo = () => {
     const cms = useCMS();
     const [isLoading, setIsLoading] = React.useState(true);
@@ -45861,7 +45861,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
       };
       fetchVersionInfo();
     }, [cms]);
-    return /* @__PURE__ */ React.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-4 text-gray-500" }, "TinaCMS v", currentVersion + " ", isLoading ? /* @__PURE__ */ React.createElement(lucideReact.LoaderCircle, { className: "animate-spin w-4 h-4 inline-block mb-px" }) : /* @__PURE__ */ React.createElement(LatestVersionWarning, { latestVersionInfo }));
+    return /* @__PURE__ */ React.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-4 text-gray-500" }, "TinaCMS v", version$1 + " ", isLoading ? /* @__PURE__ */ React.createElement(lucideReact.LoaderCircle, { className: "animate-spin w-4 h-4 inline-block mb-px" }) : /* @__PURE__ */ React.createElement(LatestVersionWarning, { latestVersionInfo }));
   };
   const LatestVersionWarning = ({
     latestVersionInfo
@@ -45876,7 +45876,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     if (!latestVersion) {
       return null;
     }
-    if (latestVersion === currentVersion) {
+    if (latestVersion === version$1) {
       return /* @__PURE__ */ React.createElement(lucideReact.Check, { className: "w-4 h-4 inline-block mb-px text-green-500" });
     }
     return /* @__PURE__ */ React.createElement("span", { className: "text-yellow-700" }, /* @__PURE__ */ React.createElement(lucideReact.TriangleAlert, { className: "w-4 h-4 inline-block mb-px" }), /* @__PURE__ */ React.createElement("br", null), "v", latestVersion, " published ", relativePublishedAt);
@@ -46021,6 +46021,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
   const Nav = ({
     isLocalMode,
     showHamburger = true,
+    menuIsOpen,
     toggleMenu,
     className = "",
     children,
@@ -46061,9 +46062,24 @@ Please wrap them with useCallback or configure the deps array correctly.`
       { Site: [] }
     );
     return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+      "button",
+      {
+        className: cn(
+          "fixed pointer-events-auto p-4 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded z-10",
+          menuIsOpen ? "hidden" : ""
+        ),
+        onClick: () => {
+          toggleMenu();
+        }
+      },
+      /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
+    ), /* @__PURE__ */ React__namespace.createElement(
       "div",
       {
-        className: `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
+        className: cn(
+          `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
+          menuIsOpen ? "" : "hidden"
+        ),
         style: { maxWidth: `${sidebarWidth}px` },
         ...props
       },
@@ -46071,10 +46087,11 @@ Please wrap them with useCallback or configure the deps array correctly.`
         "button",
         {
           className: cn(
-            "pointer-events-auto p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded",
-            showHamburger ? "" : "md:hidden"
+            "pointer-events-auto p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded"
           ),
-          onClick: toggleMenu
+          onClick: () => {
+            toggleMenu();
+          }
         },
         /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
       ), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React__namespace.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 fill-orange-500" }), /* @__PURE__ */ React__namespace.createElement("span", null, "TinaCMS"))),
@@ -46894,6 +46911,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
           Nav,
           {
             isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
+            menuIsOpen: true,
             toggleMenu,
             showCollections: isTinaAdminEnabled,
             collectionsInfo,
@@ -119744,6 +119762,7 @@ This will work when developing locally but NOT when deployed to production.
     const collectionsInfo = useGetCollections(cms);
     const screens = cms.plugins.getType("screen").all();
     const cloudConfigs = cms.plugins.getType("cloud-config").all();
+    const [menuIsOpen, setMenuIsOpen] = React.useState(false);
     const isLocalMode = (_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.isLocalMode;
     const activeScreens = screens.filter(
       (screen) => {
@@ -119756,8 +119775,8 @@ This will work when developing locally but NOT when deployed to production.
       {
         isLocalMode,
         showHamburger: false,
-        toggleMenu: () => {
-        },
+        menuIsOpen,
+        toggleMenu: () => setMenuIsOpen((menu) => !menu),
         sidebarWidth: 360,
         showCollections: true,
         collectionsInfo,

package/dist/index.mjs

@@ -45114,7 +45114,7 @@ const Alert$1 = ({
   ...props
 }) => {
   const styles = {
-    warning: "text-sm px-4 py-2 text-amber-700 bg-amber-100 rounded border border-amber-700/20"
+    warning: "ml-8 text-sm px-4 py-2 text-amber-700 bg-amber-100 rounded border border-amber-700/20"
   };
   const icon = {
     warning: /* @__PURE__ */ React.createElement(AiFillWarning, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-amber-600" })
@@ -45872,7 +45872,7 @@ function formatDistanceToNow(dirtyDate, options) {
   requiredArgs(1, arguments);
   return formatDistance2(dirtyDate, Date.now(), options);
 }
-const currentVersion = "1.0";
+const version$1 = "2.8.1";
 const VersionInfo = () => {
   const cms = useCMS();
   const [isLoading, setIsLoading] = React__default.useState(true);
@@ -45888,7 +45888,7 @@ const VersionInfo = () => {
     };
     fetchVersionInfo();
   }, [cms]);
-  return /* @__PURE__ */ React__default.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-4 text-gray-500" }, "TinaCMS v", currentVersion + " ", isLoading ? /* @__PURE__ */ React__default.createElement(LoaderCircle, { className: "animate-spin w-4 h-4 inline-block mb-px" }) : /* @__PURE__ */ React__default.createElement(LatestVersionWarning, { latestVersionInfo }));
+  return /* @__PURE__ */ React__default.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-4 text-gray-500" }, "TinaCMS v", version$1 + " ", isLoading ? /* @__PURE__ */ React__default.createElement(LoaderCircle, { className: "animate-spin w-4 h-4 inline-block mb-px" }) : /* @__PURE__ */ React__default.createElement(LatestVersionWarning, { latestVersionInfo }));
 };
 const LatestVersionWarning = ({
   latestVersionInfo
@@ -45903,7 +45903,7 @@ const LatestVersionWarning = ({
   if (!latestVersion) {
     return null;
   }
-  if (latestVersion === currentVersion) {
+  if (latestVersion === version$1) {
     return /* @__PURE__ */ React__default.createElement(Check, { className: "w-4 h-4 inline-block mb-px text-green-500" });
   }
   return /* @__PURE__ */ React__default.createElement("span", { className: "text-yellow-700" }, /* @__PURE__ */ React__default.createElement(TriangleAlert, { className: "w-4 h-4 inline-block mb-px" }), /* @__PURE__ */ React__default.createElement("br", null), "v", latestVersion, " published ", relativePublishedAt);
@@ -46048,6 +46048,7 @@ const SyncStatusButton = ({
 const Nav = ({
   isLocalMode,
   showHamburger = true,
+  menuIsOpen,
   toggleMenu,
   className = "",
   children,
@@ -46088,9 +46089,24 @@ const Nav = ({
     { Site: [] }
   );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: cn(
+        "fixed pointer-events-auto p-4 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded z-10",
+        menuIsOpen ? "hidden" : ""
+      ),
+      onClick: () => {
+        toggleMenu();
+      }
+    },
+    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
+  ), /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
+      className: cn(
+        `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
+        menuIsOpen ? "" : "hidden"
+      ),
       style: { maxWidth: `${sidebarWidth}px` },
       ...props
     },
@@ -46098,10 +46114,11 @@ const Nav = ({
       "button",
       {
         className: cn(
-          "pointer-events-auto p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded",
-          showHamburger ? "" : "md:hidden"
+          "pointer-events-auto p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded"
         ),
-        onClick: toggleMenu
+        onClick: () => {
+          toggleMenu();
+        }
       },
       /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
     ), /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 fill-orange-500" }), /* @__PURE__ */ React.createElement("span", null, "TinaCMS"))),
@@ -46921,6 +46938,7 @@ const Sidebar$1 = ({
         Nav,
         {
           isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
+          menuIsOpen: true,
           toggleMenu,
           showCollections: isTinaAdminEnabled,
           collectionsInfo,
@@ -119771,6 +119789,7 @@ const Sidebar = ({ cms }) => {
   const collectionsInfo = useGetCollections(cms);
   const screens = cms.plugins.getType("screen").all();
   const cloudConfigs = cms.plugins.getType("cloud-config").all();
+  const [menuIsOpen, setMenuIsOpen] = React__default.useState(false);
   const isLocalMode = (_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.isLocalMode;
   const activeScreens = screens.filter(
     (screen) => {
@@ -119783,8 +119802,8 @@ const Sidebar = ({ cms }) => {
     {
       isLocalMode,
       showHamburger: false,
-      toggleMenu: () => {
-      },
+      menuIsOpen,
+      toggleMenu: () => setMenuIsOpen((menu) => !menu),
       sidebarWidth: 360,
       showCollections: true,
       collectionsInfo,

package/dist/toolkit/react-sidebar/components/nav.d.ts

@@ -9,6 +9,7 @@ interface NavCollection {
 interface NavProps {
     isLocalMode: boolean;
     showHamburger?: boolean;
+    menuIsOpen: boolean;
     toggleMenu: () => void;
     children?: any;
     className?: string;
@@ -40,5 +41,5 @@ interface NavProps {
         };
     }>;
 }
-export declare const Nav: ({ isLocalMode, showHamburger, toggleMenu, className, children, showCollections, collectionsInfo, screens, cloudConfigs, contentCreators, sidebarWidth, RenderNavSite, RenderNavCloud, RenderNavCollection, AuthRenderNavCollection, ...props }: NavProps) => React.JSX.Element;
+export declare const Nav: ({ isLocalMode, showHamburger, menuIsOpen, toggleMenu, className, children, showCollections, collectionsInfo, screens, cloudConfigs, contentCreators, sidebarWidth, RenderNavSite, RenderNavCloud, RenderNavCollection, AuthRenderNavCollection, ...props }: NavProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {