@articles-media/articles-dev-box 1.0.34 → 1.0.36

package/README.md

@@ -79,7 +79,7 @@ For newly developed components I sometimes find myself trying to remember what r
 
 - typicalZustandStoreExcludes - Catching Game and School Run
 - SessionButton - Catching Game and School Run
-- GameMenu - School Run
+- GameMenu - Catching Game and School Run use Static Panel for sidebarStyle and Corner Button for menuBarStyle. Ice Slide uses Floating Panel for sidebarStyle and Bar for menuBarStyle.
 
 # Roadmap
 ⏹️ Remove Bootstrap reliance?  

package/dist/GameMenu-DrqaN2Qg.js

@@ -0,0 +1,120 @@
+import { n as __toESM, t as require_classnames } from "./classnames-No-mjhw1.js";
+import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Games/GameMenu/MobileMenu.jsx
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
+function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
+	const showMenu = useStore((state) => state.showMenu);
+	const setShowMenu = useStore((state) => state.setShowMenu);
+	const MenuButton = () => /* @__PURE__ */ jsxs(ArticlesButton, {
+		small: true,
+		active: showMenu,
+		onClick: () => {
+			setShowMenu(!showMenu);
+		},
+		className: "d-flex",
+		children: [/* @__PURE__ */ jsx("i", { className: "fad fa-bars" }), /* @__PURE__ */ jsx("span", {
+			className: "text",
+			children: "Menu"
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: (0, import_classnames.default)(`menu-bar ${menuBarConfig.menuBarClassName || ""}`, {
+			"card card-articles p-1 justify-content-center": menuBarConfig.style == "Bar",
+			[menuBarConfig.style.replaceAll(" ", "_")]: menuBarConfig.style,
+			[menuBarConfig.menuBarButtonPosition]: menuBarConfig.menuBarButtonPosition
+		}),
+		style: {
+			...menuBarConfig.menuBarCssStyle,
+			...menuBarConfig.style == "Bar" && { borderRadius: "0px" }
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex-header align-items-center",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "Left d-flex align-items-center",
+					children: [(menuBarConfig.menuBarButtonPosition == "Left" || !menuBarConfig.menuBarButtonPosition) && /* @__PURE__ */ jsx(MenuButton, {}), menuBarConfig.leftSlotChildren && menuBarConfig.leftSlotChildren]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "Center d-flex align-items-center",
+					children: [menuBarConfig.menuBarButtonPosition == "Center" && /* @__PURE__ */ jsx(MenuButton, {}), menuBarConfig.centerSlotChildren && menuBarConfig.centerSlotChildren]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "Right d-flex align-items-center",
+					children: [menuBarConfig.menuBarButtonPosition == "Right" && /* @__PURE__ */ jsx(MenuButton, {}), menuBarConfig.rightSlotChildren && menuBarConfig.rightSlotChildren]
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: `mobile-menu ${showMenu && "show"}`,
+		onClick: () => setShowMenu(false),
+		style: {
+			...menuBarConfig.style == "Bar" && { bottom: "50px" },
+			...menuBarConfig.style == "Corner Button" && { bottom: "0px" }
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				maxWidth: "300px",
+				maxHeight: "calc(100vh - 100px)",
+				overflowY: "auto"
+			},
+			className: "mobile-menu-container",
+			onClick: (e) => e.stopPropagation(),
+			children: LeftPanelContent && /* @__PURE__ */ jsx(LeftPanelContent, {})
+		})
+	})] });
+}
+//#endregion
+//#region src/components/Games/GameMenu/GameMenu.jsx
+/**
+* @param {Object} props - The component props.
+* @param {Function} props.useStore - The Zustand store hook used for state management.
+* @param {React.ComponentType} props.LeftPanelContent - Component to render inside the sidebar and mobile-menu panel.
+* @param {Object} props.sidebarConfig - Configuration for the sidebar appearance and behavior.
+* @param {"Static Panel" | "Floating Panel"} props.sidebarConfig.style - Defines if the panel is static or floats over content.
+* @param {string} [props.sidebarConfig.className] - Additional CSS class for the sidebar container.
+* @param {Object} [props.sidebarConfig.cssStyle] - Inline styles to apply to the sidebar.
+* @param {Object} props.menuBarConfig - Configuration for the navigation menu bar.
+* @param {"Bar" | "Corner Button"} props.menuBarConfig.style - Visual style of the menu trigger (a full bar or a small corner button).
+* @param {"left" | "right"} [props.menuBarConfig.menuBarButtonPosition] - Position of the menu button when using "Corner Button" style.
+* @param {string} [props.menuBarConfig.menuBarClassName] - Additional CSS class for the menu bar.
+* @param {Object} [props.menuBarConfig.menuBarCssStyle] - Inline styles to apply to the menu bar.
+* @param {React.ComponentType} [props.menuBarConfig.leftSlotChildren] - Content to render in the left slot of the menu bar.
+* @param {React.ComponentType} [props.menuBarConfig.centerSlotChildren] - Content to render in the center slot of the menu bar.
+* @param {React.ComponentType} [props.menuBarConfig.rightSlotChildren] - Content to render in the right slot of the menu bar.
+*/
+function GameMenu(props) {
+	const { useStore, LeftPanelContent, sidebarConfig, menuBarConfig } = props;
+	const sidebar = useStore((state) => state.sidebar);
+	const setShowMenu = useStore((state) => state.setShowMenu);
+	useEffect(() => {
+		if (sidebar == true) setShowMenu(false);
+	}, [sidebar]);
+	const convertedSidebarStyle = (sidebarConfig?.style).replaceAll(" ", "_");
+	if (!useStore) {
+		console.error("GameMenu: useStore is required");
+		return null;
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMenu, {
+		useStore,
+		LeftPanelContent,
+		menuBarConfig: { ...menuBarConfig }
+	}), /* @__PURE__ */ jsx("div", {
+		className: `panel-left card rounded-0 ${convertedSidebarStyle} ${sidebarConfig?.className || ""}`,
+		style: {
+			...sidebarConfig?.cssStyle,
+			...convertedSidebarStyle == "Floating_Panel" && {
+				position: "absolute",
+				top: "0.5rem",
+				left: "0.5rem",
+				zIndex: 1,
+				height: "calc(100vh - 1rem)",
+				backgroundColor: "color-mix(in srgb, var(--bs-card-bg) 50%, transparent)"
+			}
+		},
+		children: /* @__PURE__ */ jsx(LeftPanelContent, {})
+	})] });
+}
+//#endregion
+export { GameMenu as t };

package/dist/GameMenu.js

@@ -1,2 +1,2 @@
-import { t as GameMenu } from "./GameMenu-BD1HSDJ-.js";
+import { t as GameMenu } from "./GameMenu-DrqaN2Qg.js";
 export { GameMenu as default };

package/dist/{SettingsModal-D6AkYDbw.js → SettingsModal-DkLtzl7B.js}

@@ -232,7 +232,7 @@ function OtherTab({ useStore, config }) {
 var package_default = {
 	name: "@articles-media/articles-dev-box",
 	description: "Shared code, functions, and components for different Articles Media projects.",
-	version: "1.0.34",
+	version: "1.0.36",
 	type: "module",
 	imports: { "#root/src/*": "./src/*" },
 	main: "./dist/index.js",
@@ -300,25 +300,10 @@ var package_default = {
 //#endregion
 //#region src/components/Games/Settings/DebugTab.jsx
 function DebugTab({ useStore, config }) {
-	useStore((state) => state?.debug);
-	useStore((state) => state?.setDebug);
-	useStore((state) => state?.toontownMode);
-	useStore((state) => state?.setToontownMode);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "mb-3",
-			children: ["dev-box version: ", package_default.version]
-		}),
-		/* @__PURE__ */ jsx("div", { children: "Future Thing" }),
-		/* @__PURE__ */ jsx("div", {
-			className: "mb-3",
-			children: [false, true].map((level, i) => /* @__PURE__ */ jsx(ArticlesButton, {
-				onClick: () => {},
-				children: "Placeholder"
-			}, i))
-		}),
-		config?.tabs?.Debug?.children
-	] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "mb-3",
+		children: ["dev-box version: ", package_default.version]
+	}), config?.tabs?.Debug?.children && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("hr", {}), config?.tabs?.Debug?.children] })] });
 }
 //#endregion
 //#region src/components/Games/Settings/SettingsModal.jsx

package/dist/SettingsModal.js

@@ -1,2 +1,2 @@
-import { t as SettingsModal } from "./SettingsModal-D6AkYDbw.js";
+import { t as SettingsModal } from "./SettingsModal-DkLtzl7B.js";
 export { SettingsModal as default };

package/dist/articles-dev-box.css

@@ -283,13 +283,13 @@
 .menu-bar.Corner_Button {
   position: fixed;
   bottom: 0;
+  width: 100%;
   left: 0;
-  width: 50px;
+  right: 0;
   height: 50px;
   z-index: 3;
 }
 .menu-bar.Corner_Button .btn {
-  position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 0;
@@ -334,6 +334,7 @@
 .panel-right {
   width: 300px;
   height: calc(100vh - 0px);
+  overflow-y: auto;
   flex-shrink: 0;
 }
 

package/dist/index.js

@@ -8,11 +8,11 @@ import useUserFriends from "./useUserFriends.js";
 import FriendsList from "./FriendsList.js";
 import SessionButton from "./SessionButton.js";
 import ArticlesAd from "./ArticlesAd.js";
-import { t as GameMenu } from "./GameMenu-BD1HSDJ-.js";
+import { t as GameMenu } from "./GameMenu-DrqaN2Qg.js";
 import { t as GameScoreboard } from "./GameScoreboard-DVoXXDnM.js";
 import GlobalHead from "./GlobalHead.js";
 import GlobalBody_default from "./GlobalBody.js";
-import { t as SettingsModal } from "./SettingsModal-D6AkYDbw.js";
+import { t as SettingsModal } from "./SettingsModal-DkLtzl7B.js";
 import CreditsModal from "./CreditsModal.js";
 import DarkModeHandler from "./DarkModeHandler.js";
 import ToontownModeHandler from "./ToontownModeHandler.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@articles-media/articles-dev-box",
   "description": "Shared code, functions, and components for different Articles Media projects.",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"

package/dist/GameMenu-BD1HSDJ-.js

@@ -1,84 +0,0 @@
-import { n as __toESM, t as require_classnames } from "./classnames-No-mjhw1.js";
-import { t as ArticlesButton } from "./Button-DvEZjsVV.js";
-import { useEffect } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Games/GameMenu/MobileMenu.jsx
-var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
-function MobileMenu({ useStore, LeftPanelContent, menuBarStyle }) {
-	const showMenu = useStore((state) => state.showMenu);
-	const setShowMenu = useStore((state) => state.setShowMenu);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: (0, import_classnames.default)("menu-bar", {
-			"card card-articles p-1 justify-content-center": menuBarStyle == "Bar",
-			[menuBarStyle.replaceAll(" ", "_")]: menuBarStyle
-		}),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex-header align-items-center",
-			children: /* @__PURE__ */ jsxs(ArticlesButton, {
-				small: true,
-				active: showMenu,
-				onClick: () => {
-					setShowMenu(!showMenu);
-				},
-				className: "d-flex",
-				children: [/* @__PURE__ */ jsx("i", { className: "fad fa-bars" }), /* @__PURE__ */ jsx("span", {
-					className: "text",
-					children: "Menu"
-				})]
-			})
-		})
-	}), /* @__PURE__ */ jsx("div", {
-		className: `mobile-menu ${showMenu && "show"}`,
-		onClick: () => setShowMenu(false),
-		style: {
-			...menuBarStyle == "Bar" && { bottom: "50px" },
-			...menuBarStyle == "Corner Button" && { bottom: "0px" }
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			style: { maxWidth: "300px" },
-			className: "mobile-menu-container",
-			onClick: (e) => e.stopPropagation(),
-			children: LeftPanelContent && /* @__PURE__ */ jsx(LeftPanelContent, {})
-		})
-	})] });
-}
-//#endregion
-//#region src/components/Games/GameMenu/GameMenu.jsx
-/**
-* @param {Object} props
-* @param {Function} props.useStore
-* @param {React.ComponentType} props.LeftPanelContent
-* @param {"Bar" | "Corner Button"} props.menuBarStyle
-* @param {"Static Panel" | "Floating Panel"} [props.sidebarStyle]
-*/
-function GameMenu(props) {
-	const { useStore, LeftPanelContent, menuBarStyle, sidebarStyle } = props;
-	const sidebar = useStore((state) => state.sidebar);
-	const setShowMenu = useStore((state) => state.setShowMenu);
-	useEffect(() => {
-		if (sidebar == true) setShowMenu(false);
-	}, [sidebar]);
-	const convertedSidebarStyle = sidebarStyle.replaceAll(" ", "_");
-	if (!useStore) {
-		console.error("GameMenu: useStore is required");
-		return null;
-	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMenu, {
-		useStore,
-		LeftPanelContent,
-		menuBarStyle
-	}), /* @__PURE__ */ jsx("div", {
-		className: `panel-left card rounded-0 ${convertedSidebarStyle}`,
-		style: { ...convertedSidebarStyle == "Floating_Panel" && {
-			position: "absolute",
-			top: "0.5rem",
-			left: "0.5rem",
-			zIndex: 1,
-			height: "calc(100vh - 1rem)",
-			backgroundColor: "color-mix(in srgb, var(--bs-card-bg) 50%, transparent)"
-		} },
-		children: /* @__PURE__ */ jsx(LeftPanelContent, {})
-	})] });
-}
-//#endregion
-export { GameMenu as t };