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

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-BD1HSDJ-.js → GameMenu-lHVT8MdJ.js}

@@ -4,38 +4,58 @@ 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 }) {
+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", {
-			"card card-articles p-1 justify-content-center": menuBarStyle == "Bar",
-			[menuBarStyle.replaceAll(" ", "_")]: menuBarStyle
+			"card card-articles p-1 justify-content-center": menuBarConfig.style == "Bar",
+			[menuBarConfig.style.replaceAll(" ", "_")]: menuBarConfig.style,
+			[menuBarConfig.menuBarButtonPosition]: menuBarConfig.menuBarButtonPosition
 		}),
-		children: /* @__PURE__ */ jsx("div", {
+		style: { ...menuBarConfig.style == "Bar" && { borderRadius: "0px" } },
+		children: /* @__PURE__ */ jsxs("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"
-				})]
-			})
+			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: {
-			...menuBarStyle == "Bar" && { bottom: "50px" },
-			...menuBarStyle == "Corner Button" && { bottom: "0px" }
+			...menuBarConfig.style == "Bar" && { bottom: "50px" },
+			...menuBarConfig.style == "Corner Button" && { bottom: "0px" }
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: { maxWidth: "300px" },
+			style: {
+				maxWidth: "300px",
+				maxHeight: "calc(100vh - 100px)",
+				overflowY: "auto"
+			},
 			className: "mobile-menu-container",
 			onClick: (e) => e.stopPropagation(),
 			children: LeftPanelContent && /* @__PURE__ */ jsx(LeftPanelContent, {})
@@ -52,7 +72,7 @@ function MobileMenu({ useStore, LeftPanelContent, menuBarStyle }) {
 * @param {"Static Panel" | "Floating Panel"} [props.sidebarStyle]
 */
 function GameMenu(props) {
-	const { useStore, LeftPanelContent, menuBarStyle, sidebarStyle } = props;
+	const { useStore, LeftPanelContent, sidebarStyleConfig, sidebarStyle, menuBarConfig, menuBarStyle, menuBarButtonPosition } = props;
 	const sidebar = useStore((state) => state.sidebar);
 	const setShowMenu = useStore((state) => state.setShowMenu);
 	useEffect(() => {
@@ -66,7 +86,11 @@ function GameMenu(props) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileMenu, {
 		useStore,
 		LeftPanelContent,
-		menuBarStyle
+		menuBarConfig: {
+			...menuBarConfig,
+			style: menuBarConfig.style || menuBarStyle,
+			menuBarButtonPosition: menuBarConfig.menuBarButtonPosition || menuBarButtonPosition
+		}
 	}), /* @__PURE__ */ jsx("div", {
 		className: `panel-left card rounded-0 ${convertedSidebarStyle}`,
 		style: { ...convertedSidebarStyle == "Floating_Panel" && {

package/dist/GameMenu.js

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

package/dist/{SettingsModal-D6AkYDbw.js → SettingsModal-yJTqjsyc.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.35",
 	type: "module",
 	imports: { "#root/src/*": "./src/*" },
 	main: "./dist/index.js",

package/dist/SettingsModal.js

@@ -1,2 +1,2 @@
-import { t as SettingsModal } from "./SettingsModal-D6AkYDbw.js";
+import { t as SettingsModal } from "./SettingsModal-yJTqjsyc.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-lHVT8MdJ.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-yJTqjsyc.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.35",
   "type": "module",
   "imports": {
     "#root/src/*": "./src/*"