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

package/dist/{GameMenu-lHVT8MdJ.js → GameMenu-DrqaN2Qg.js}

@@ -20,12 +20,15 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 		})]
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: (0, import_classnames.default)("menu-bar", {
+		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.style == "Bar" && { borderRadius: "0px" } },
+		style: {
+			...menuBarConfig.menuBarCssStyle,
+			...menuBarConfig.style == "Bar" && { borderRadius: "0px" }
+		},
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex-header align-items-center",
 			children: [
@@ -65,20 +68,30 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarConfig }) {
 //#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]
+* @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, sidebarStyleConfig, sidebarStyle, menuBarConfig, menuBarStyle, menuBarButtonPosition } = 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 = sidebarStyle.replaceAll(" ", "_");
+	const convertedSidebarStyle = (sidebarConfig?.style).replaceAll(" ", "_");
 	if (!useStore) {
 		console.error("GameMenu: useStore is required");
 		return null;
@@ -86,21 +99,20 @@ function GameMenu(props) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMenu, {
 		useStore,
 		LeftPanelContent,
-		menuBarConfig: {
-			...menuBarConfig,
-			style: menuBarConfig.style || menuBarStyle,
-			menuBarButtonPosition: menuBarConfig.menuBarButtonPosition || menuBarButtonPosition
-		}
+		menuBarConfig: { ...menuBarConfig }
 	}), /* @__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)"
-		} },
+		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, {})
 	})] });
 }

package/dist/GameMenu.js

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

package/dist/{SettingsModal-yJTqjsyc.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.35",
+	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-yJTqjsyc.js";
+import { t as SettingsModal } from "./SettingsModal-DkLtzl7B.js";
 export { SettingsModal as default };

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-lHVT8MdJ.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-yJTqjsyc.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.35",
+  "version": "1.0.36",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"