@xyo-network/react-appbar 2.25.38 → 2.25.41

package/dist/esm/components/Toolbar/System/DefaultMenuItems.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DefaultMenuItems: React.FC;

package/dist/esm/components/Toolbar/System/DefaultMenuItems.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SettingsIcon from '@mui/icons-material/Settings';
+import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import { ListItemButtonEx } from '@xyo-network/react-shared';
+export const DefaultMenuItems = () => {
+    return (_jsx(List, { children: _jsx(ListItem, { disablePadding: true, children: _jsxs(ListItemButtonEx, { to: "/settings", children: [_jsx(ListItemIcon, { children: _jsx(SettingsIcon, {}) }), _jsx(ListItemText, { primary: "Settings" })] }) }) }));
+};
+//# sourceMappingURL=DefaultMenuItems.js.map

package/dist/esm/components/Toolbar/System/DefaultMenuItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultMenuItems.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/DefaultMenuItems.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAa,GAAG,EAAE;IAC7C,OAAO,CACL,KAAC,IAAI,cACH,KAAC,QAAQ,IAAC,cAAc,kBACtB,MAAC,gBAAgB,IAAC,EAAE,EAAC,WAAW,aAC9B,KAAC,YAAY,cACX,KAAC,YAAY,KAAG,GACH,EACf,KAAC,YAAY,IAAC,OAAO,EAAC,UAAU,GAAG,IAClB,GACV,GACN,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Toolbar/System/SiteMenu.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { FlexBoxProps } from '@xylabs/sdk-react';
+import { ReactNode } from 'react';
 import { To } from 'react-router-dom';
 export interface SiteMenuItem {
     name: string;
@@ -9,6 +9,7 @@ export interface SiteMenuItem {
 }
 export interface SiteMenuProps extends FlexBoxProps {
     hideSettingsMenuItem?: boolean;
-    menuItems?: SiteMenuItem[];
+    menu?: ReactNode;
+    side?: 'left' | 'right' | 'top' | 'bottom';
 }
 export declare const SiteMenu: React.FC<SiteMenuProps>;

package/dist/esm/components/Toolbar/System/SiteMenu.js

@@ -1,35 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu as MenuIcon } from '@mui/icons-material';
-import { Menu, MenuItem } from '@mui/material';
-import { FlexRow, LinkEx } from '@xylabs/sdk-react';
-import { useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-export const SiteMenu = ({ hideSettingsMenuItem, menuItems, ...props }) => {
-    const [menuElement, setMenuElement] = useState(null);
-    const open = Boolean(menuElement);
-    const navigate = useNavigate();
-    const handleMenuClose = () => {
-        setMenuElement(null);
-    };
-    const ref = useRef(null);
-    return (_jsxs(FlexRow, { alignItems: "stretch", ...props, children: [_jsx(LinkEx, { color: "inherit", onClick: () => {
-                    setMenuElement(ref.current);
-                }, children: _jsx("div", { style: { alignItems: 'center', cursor: 'pointer', display: 'flex' }, ref: ref, children: _jsx(MenuIcon, { fontSize: "large" }) }) }), _jsxs(Menu, { anchorEl: menuElement, open: open, onClose: handleMenuClose, children: [menuItems?.map(({ name, to, href, onClick }) => {
-                        return (_jsx(MenuItem, { onClick: () => {
-                                if (onClick) {
-                                    onClick();
-                                }
-                                else if (to) {
-                                    navigate(to);
-                                }
-                                else if (href) {
-                                    window.open(href);
-                                }
-                                handleMenuClose();
-                            }, disableRipple: true, children: name }, name));
-                    }), hideSettingsMenuItem ? null : (_jsx(MenuItem, { onClick: () => {
-                            navigate('/settings');
-                            handleMenuClose();
-                        }, disableRipple: true, children: "Settings" }))] })] }));
+import MenuIcon from '@mui/icons-material/Menu';
+import { Box, IconButton, SwipeableDrawer } from '@mui/material';
+import { FlexRow } from '@xylabs/sdk-react';
+import { useState } from 'react';
+import { DefaultMenuItems } from './DefaultMenuItems';
+export const SiteMenu = ({ side, menu, ...props }) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(FlexRow, { alignItems: "stretch", ...props, children: [_jsx(IconButton, { size: "small", color: "inherit", onClick: () => {
+                    setOpen(!open);
+                }, children: _jsx(MenuIcon, { fontSize: "large" }) }), _jsx(SwipeableDrawer, { anchor: side ?? 'left', open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true), children: _jsx(Box, { width: "auto", role: "presentation", onClick: () => setOpen(false), onKeyDown: () => setOpen(false), children: menu ?? _jsx(DefaultMenuItems, {}) }) })] }));
 };
 //# sourceMappingURL=SiteMenu.js.map

package/dist/esm/components/Toolbar/System/SiteMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SiteMenu.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SiteMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAM,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAclD,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,oBAAoB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAA;IAC9E,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;IACjC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAE9B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAExB,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,MAAM,IACL,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;gBAC7B,CAAC,YAED,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,YAChF,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG,GACzB,GACC,EACT,MAAC,IAAI,IAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,aAC9D,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;wBAC9C,OAAO,CACL,KAAC,QAAQ,IAEP,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,OAAO,EAAE;oCACX,OAAO,EAAE,CAAA;iCACV;qCAAM,IAAI,EAAE,EAAE;oCACb,QAAQ,CAAC,EAAE,CAAC,CAAA;iCACb;qCAAM,IAAI,IAAI,EAAE;oCACf,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;iCAClB;gCACD,eAAe,EAAE,CAAA;4BACnB,CAAC,EACD,aAAa,kBAEZ,IAAI,IAbA,IAAI,CAcA,CACZ,CAAA;oBACH,CAAC,CAAC,EACD,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC7B,KAAC,QAAQ,IACP,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,CAAC,WAAW,CAAC,CAAA;4BACrB,eAAe,EAAE,CAAA;wBACnB,CAAC,EACD,aAAa,+BAGJ,CACZ,IACI,IACC,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SiteMenu.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SiteMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAgB,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAG3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAerD,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA;gBAChB,CAAC,YAED,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG,GAClB,EACb,KAAC,eAAe,IAAC,MAAM,EAAE,IAAI,IAAI,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YAC7G,KAAC,GAAG,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YACjG,IAAI,IAAI,KAAC,gBAAgB,KAAG,GACzB,GACU,IACV,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Toolbar/System/SystemToolbar.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 import { ToolbarProps } from '@mui/material';
 import { SelectExProps } from '@xylabs/sdk-react';
 import { NetworkSelectExProps } from '@xyo-network/react-network';
-import { SiteMenuProps } from './SiteMenu';
+import { ReactNode } from 'react';
 export interface SystemToolbarProps extends ToolbarProps {
     networkSelectProps?: NetworkSelectExProps;
     archiveSelectProps?: SelectExProps<string>;
     hideNetworkSelect?: boolean;
     hideArchiveSelect?: boolean;
-    siteMenuProps?: SiteMenuProps;
+    menuItems?: ReactNode;
     darkModeButton?: boolean;
     authButton?: boolean;
     noMenu?: boolean;

package/dist/esm/components/Toolbar/System/SystemToolbar.js

@@ -6,7 +6,7 @@ import { AuthStatusIconButton } from '@xyo-network/react-auth';
 import { NetworkSelectEx } from '@xyo-network/react-network';
 import { DarkModeIconButton } from '@xyo-network/react-shared';
 import { SiteMenu } from './SiteMenu';
-export const SystemToolbar = ({ children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, siteMenuProps, darkModeButton = false, authButton = false, noMenu = false, ...props }) => {
-    return (_jsxs(Toolbar, { ...props, children: [hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null, noMenu ? null : _jsx(SiteMenu, { ...siteMenuProps })] }));
+export const SystemToolbar = ({ children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, menuItems, darkModeButton = false, authButton = false, noMenu = false, ...props }) => {
+    return (_jsxs(Toolbar, { ...props, children: [hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, maxWidth: 120, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null, noMenu ? null : _jsx(SiteMenu, { menu: menuItems })] }));
 };
 //# sourceMappingURL=SystemToolbar.js.map

package/dist/esm/components/Toolbar/System/SystemToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAiB,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAE9D,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAapD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,KAAK,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aACf,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,KAAC,oBAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,aAAa,GAAI,IACxC,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAiB,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAG9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAarC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,KAAK,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aACf,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,YAClC,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,KAAC,oBAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAE,SAAS,GAAI,IACtC,CACX,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -12,16 +12,16 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.2",
-    "@mui/material": "^5.8.2",
-    "@xylabs/sdk-react": "^2.13.2",
-    "@xyo-network/core": "^2.20.43",
-    "@xyo-network/react-archive": "^2.25.38",
-    "@xyo-network/react-archivist-api": "^2.25.38",
-    "@xyo-network/react-auth": "^2.25.38",
-    "@xyo-network/react-network": "^2.25.38",
-    "@xyo-network/react-shared": "^2.25.38",
-    "@xyo-network/react-theme": "^2.25.38",
+    "@mui/icons-material": "^5.8.3",
+    "@mui/material": "^5.8.3",
+    "@xylabs/sdk-react": "^2.13.7",
+    "@xyo-network/core": "^2.20.44",
+    "@xyo-network/react-archive": "^2.25.41",
+    "@xyo-network/react-archivist-api": "^2.25.41",
+    "@xyo-network/react-auth": "^2.25.41",
+    "@xyo-network/react-network": "^2.25.41",
+    "@xyo-network/react-shared": "^2.25.41",
+    "@xyo-network/react-theme": "^2.25.41",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -33,14 +33,14 @@
   "devDependencies": {
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
-    "@storybook/addons": "^6.5.7",
-    "@storybook/api": "^6.5.7",
-    "@storybook/components": "^6.5.7",
-    "@storybook/core-events": "^6.5.7",
-    "@storybook/react": "^6.5.7",
-    "@storybook/theming": "^6.5.7",
+    "@storybook/addons": "^6.5.8",
+    "@storybook/api": "^6.5.8",
+    "@storybook/components": "^6.5.8",
+    "@storybook/core-events": "^6.5.8",
+    "@storybook/react": "^6.5.8",
+    "@storybook/theming": "^6.5.8",
     "@types/lodash": "^4.14.182",
-    "@xylabs/sdk-react": "^2.13.2",
+    "@xylabs/sdk-react": "^2.13.7",
     "@xylabs/ts-scripts": "^1.0.66",
     "@xylabs/tsconfig": "^1.0.13",
     "axios": "^0.27.2",
@@ -105,6 +105,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.38",
+  "version": "2.25.41",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Toolbar/System/DefaultMenuItems.tsx

@@ -0,0 +1,18 @@
+import SettingsIcon from '@mui/icons-material/Settings'
+import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material'
+import { ListItemButtonEx } from '@xyo-network/react-shared'
+
+export const DefaultMenuItems: React.FC = () => {
+  return (
+    <List>
+      <ListItem disablePadding>
+        <ListItemButtonEx to="/settings">
+          <ListItemIcon>
+            <SettingsIcon />
+          </ListItemIcon>
+          <ListItemText primary="Settings" />
+        </ListItemButtonEx>
+      </ListItem>
+    </List>
+  )
+}

package/src/components/Toolbar/System/SiteMenu.tsx

@@ -1,8 +1,10 @@
-import { Menu as MenuIcon } from '@mui/icons-material'
-import { Menu, MenuItem } from '@mui/material'
-import { FlexBoxProps, FlexRow, LinkEx } from '@xylabs/sdk-react'
-import { useRef, useState } from 'react'
-import { To, useNavigate } from 'react-router-dom'
+import MenuIcon from '@mui/icons-material/Menu'
+import { Box, IconButton, SwipeableDrawer } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/sdk-react'
+import { ReactNode, useState } from 'react'
+import { To } from 'react-router-dom'
+
+import { DefaultMenuItems } from './DefaultMenuItems'
 
 export interface SiteMenuItem {
   name: string
@@ -13,65 +15,29 @@ export interface SiteMenuItem {
 
 export interface SiteMenuProps extends FlexBoxProps {
   hideSettingsMenuItem?: boolean
-  menuItems?: SiteMenuItem[]
+  menu?: ReactNode
+  side?: 'left' | 'right' | 'top' | 'bottom'
 }
 
-export const SiteMenu: React.FC<SiteMenuProps> = ({ hideSettingsMenuItem, menuItems, ...props }) => {
-  const [menuElement, setMenuElement] = useState<HTMLButtonElement | null>(null)
-  const open = Boolean(menuElement)
-  const navigate = useNavigate()
-
-  const handleMenuClose = () => {
-    setMenuElement(null)
-  }
-
-  const ref = useRef(null)
+export const SiteMenu: React.FC<SiteMenuProps> = ({ side, menu, ...props }) => {
+  const [open, setOpen] = useState(false)
 
   return (
     <FlexRow alignItems="stretch" {...props}>
-      <LinkEx
+      <IconButton
+        size="small"
         color="inherit"
         onClick={() => {
-          setMenuElement(ref.current)
+          setOpen(!open)
         }}
       >
-        <div style={{ alignItems: 'center', cursor: 'pointer', display: 'flex' }} ref={ref}>
-          <MenuIcon fontSize="large" />
-        </div>
-      </LinkEx>
-      <Menu anchorEl={menuElement} open={open} onClose={handleMenuClose}>
-        {menuItems?.map(({ name, to, href, onClick }) => {
-          return (
-            <MenuItem
-              key={name}
-              onClick={() => {
-                if (onClick) {
-                  onClick()
-                } else if (to) {
-                  navigate(to)
-                } else if (href) {
-                  window.open(href)
-                }
-                handleMenuClose()
-              }}
-              disableRipple
-            >
-              {name}
-            </MenuItem>
-          )
-        })}
-        {hideSettingsMenuItem ? null : (
-          <MenuItem
-            onClick={() => {
-              navigate('/settings')
-              handleMenuClose()
-            }}
-            disableRipple
-          >
-            Settings
-          </MenuItem>
-        )}
-      </Menu>
+        <MenuIcon fontSize="large" />
+      </IconButton>
+      <SwipeableDrawer anchor={side ?? 'left'} open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)}>
+        <Box width="auto" role="presentation" onClick={() => setOpen(false)} onKeyDown={() => setOpen(false)}>
+          {menu ?? <DefaultMenuItems />}
+        </Box>
+      </SwipeableDrawer>
     </FlexRow>
   )
 }

package/src/components/Toolbar/System/SystemToolbar.tsx

@@ -4,15 +4,16 @@ import { ArchiveSelectEx } from '@xyo-network/react-archive'
 import { AuthStatusIconButton } from '@xyo-network/react-auth'
 import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
 import { DarkModeIconButton } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
 
-import { SiteMenu, SiteMenuProps } from './SiteMenu'
+import { SiteMenu } from './SiteMenu'
 
 export interface SystemToolbarProps extends ToolbarProps {
   networkSelectProps?: NetworkSelectExProps
   archiveSelectProps?: SelectExProps<string>
   hideNetworkSelect?: boolean
   hideArchiveSelect?: boolean
-  siteMenuProps?: SiteMenuProps
+  menuItems?: ReactNode
   darkModeButton?: boolean
   authButton?: boolean
   noMenu?: boolean
@@ -24,7 +25,7 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
   archiveSelectProps,
   hideNetworkSelect,
   hideArchiveSelect,
-  siteMenuProps,
+  menuItems,
   darkModeButton = false,
   authButton = false,
   noMenu = false,
@@ -49,7 +50,7 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
       {children}
       {authButton ? <AuthStatusIconButton color="inherit" /> : null}
       {darkModeButton ? <DarkModeIconButton color="inherit" /> : null}
-      {noMenu ? null : <SiteMenu {...siteMenuProps} />}
+      {noMenu ? null : <SiteMenu menu={menuItems} />}
     </Toolbar>
   )
 }