@xyo-network/react-appbar 2.35.0-rc.7 → 2.35.0

package/dist/esm/components/SiteMenu/MenuIcon.d.ts

@@ -0,0 +1,8 @@
+import { TypographyExProps } from '@xyo-network/react-shared';
+import { ReactNode } from 'react';
+import { SiteMenuListItemBase } from './lib';
+export interface MenuIconProps extends SiteMenuListItemBase, TypographyExProps {
+    icon?: ReactNode;
+}
+export declare const MenuIcon: React.FC<MenuIconProps>;
+//# sourceMappingURL=MenuIcon.d.ts.map

package/dist/esm/components/SiteMenu/MenuIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,aAAc,SAAQ,oBAAoB,EAAE,iBAAiB;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM5C,CAAA"}

package/dist/esm/components/SiteMenu/MenuIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+export const MenuIcon = ({ iconOnly, icon, ...props }) => {
+    return (_jsx(Typography, { mr: iconOnly ? 0 : 1, display: "flex", variant: "caption", ...props, children: icon }));
+};
+//# sourceMappingURL=MenuIcon.js.map

package/dist/esm/components/SiteMenu/MenuIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuIcon.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAU1C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChF,OAAO,CACL,KAAC,UAAU,IAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,KAAK,KAAK,YACzE,IAAI,GACM,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuItems.d.ts

@@ -2,7 +2,8 @@ import { ListItemProps, ListItemTextProps } from '@mui/material';
 import { ListItemButtonExProps } from '@xyo-network/react-shared';
 import { ReactNode } from 'react';
 import { To } from 'react-router-dom';
-export interface SiteMenuListItemProps extends ListItemProps {
+import { SiteMenuListItemBase } from './lib';
+export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemProps {
     primary: ListItemTextProps['primary'];
     to?: To;
     icon?: ReactNode;

package/dist/esm/components/SiteMenu/MenuItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItems.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,aAAa,EAAgB,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACtG,OAAO,EAAoB,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAErC,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACrC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;CACjD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAU5D,CAAA"}
+{"version":3,"file":"MenuItems.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAErC,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAM5C,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,EAAE,aAAa;IAChF,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACrC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;CACjD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAU5D,CAAA"}

package/dist/esm/components/SiteMenu/MenuItems.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ListItem, ListItemIcon, ListItemText } from '@mui/material';
-import { ListItemButtonEx } from '@xyo-network/react-shared';
-export const SiteMenuListItem = ({ style, children, primary, to, icon, onButtonClick, ...props }) => {
-    return (_jsxs(ListItem, { style: { display: 'block', ...style }, ...props, children: [_jsxs(ListItemButtonEx, { to: to, onClick: onButtonClick, children: [_jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { primary: primary })] }), children] }));
+import { MenuIcon } from './MenuIcon';
+import { MenuListItem } from './MenuListItem';
+import { MenuListItemButtonEx } from './MenuListItemButtonEx';
+import { MenuListItemText } from './MenuListItemText';
+export const SiteMenuListItem = ({ style, children, iconOnly, icon, primary, onButtonClick, ...props }) => {
+    return (_jsxs(MenuListItem, { style: style, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, children: [_jsx(MenuIcon, { icon: icon, iconOnly: iconOnly }), _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly })] }), children] }));
 };
 //# sourceMappingURL=MenuItems.js.map

package/dist/esm/components/SiteMenu/MenuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAiB,YAAY,EAAqB,MAAM,eAAe,CAAA;AACtG,OAAO,EAAE,gBAAgB,EAAyB,MAAM,2BAA2B,CAAA;AAWnF,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnI,OAAO,CACL,MAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aACxD,MAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,aAC9C,KAAC,YAAY,cAAE,IAAI,GAAgB,EACnC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,IACjB,EAClB,QAAQ,IACA,CACZ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AASrD,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzI,OAAO,CACL,MAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,aACvD,MAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,aAC9D,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC5C,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,IACrC,EACtB,QAAQ,IACI,CAChB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ListItemProps } from '@mui/material';
+import { SiteMenuListItemBase } from './lib';
+export interface MenuListItemProps extends SiteMenuListItemBase, ListItemProps {
+}
+export declare const MenuListItem: React.FC<MenuListItemProps>;
+//# sourceMappingURL=MenuListItem.d.ts.map

package/dist/esm/components/SiteMenu/MenuListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAA;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,aAAa;CAAG;AAEjF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAUpD,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItem } from '@mui/material';
+export const MenuListItem = ({ children, style, iconOnly, ...props }) => {
+    const listItemStyles = {
+        display: iconOnly ? 'inline-flex' : 'block',
+        width: iconOnly ? 'auto' : '100%',
+    };
+    return (_jsx(ListItem, { style: { ...listItemStyles, ...style }, ...props, children: children }));
+};
+//# sourceMappingURL=MenuListItem.js.map

package/dist/esm/components/SiteMenu/MenuListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListItem.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,eAAe,CAAA;AAMvD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnG,MAAM,cAAc,GAAG;QACrB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;QAC3C,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;KAClC,CAAA;IACD,OAAO,CACL,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,YACxD,QAAQ,GACA,CACZ,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemButtonEx.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ListItemButtonExProps } from '@xyo-network/react-shared';
+import { SiteMenuListItemBase } from './lib';
+export interface MenuListItemButtonExProps extends SiteMenuListItemBase, ListItemButtonExProps {
+}
+export declare const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps>;
+//# sourceMappingURL=MenuListItemButtonEx.d.ts.map

package/dist/esm/components/SiteMenu/MenuListItemButtonEx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListItemButtonEx.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,yBAA0B,SAAQ,oBAAoB,EAAE,qBAAqB;CAAG;AAEjG,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAOpE,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemButtonEx.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItemButtonEx } from '@xyo-network/react-shared';
+export const MenuListItemButtonEx = ({ iconOnly, sx, children, ...props }) => {
+    const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex' } : {};
+    return (_jsx(ListItemButtonEx, { sx: { ...listItemButtonSx, ...sx }, ...props, children: children }));
+};
+//# sourceMappingURL=MenuListItemButtonEx.js.map

package/dist/esm/components/SiteMenu/MenuListItemButtonEx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListItemButtonEx.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,2BAA2B,CAAA;AAMnF,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChH,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACxF,OAAO,CACL,KAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,YAC5D,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemText.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ListItemTextProps } from '@mui/material';
+import { SiteMenuListItemBase } from './lib';
+export interface MenuListItemTextProps extends SiteMenuListItemBase, ListItemTextProps {
+}
+export declare const MenuListItemText: React.FC<MenuListItemTextProps>;
+//# sourceMappingURL=MenuListItemText.d.ts.map

package/dist/esm/components/SiteMenu/MenuListItemText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListItemText.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,EAAE,iBAAiB;CAAG;AAEzF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAG5D,CAAA"}

package/dist/esm/components/SiteMenu/MenuListItemText.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItemText } from '@mui/material';
+export const MenuListItemText = ({ iconOnly, sx, ...props }) => {
+    const listItemTextSxProps = iconOnly ? { visibility: 'hidden', width: 0, ...sx } : {};
+    return _jsx(ListItemText, { sx: { ...listItemTextSxProps, ...sx }, ...props });
+};
+//# sourceMappingURL=MenuListItemText.js.map

package/dist/esm/components/SiteMenu/MenuListItemText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuListItemText.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAqB,MAAM,eAAe,CAAA;AAM/D,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,mBAAmB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACrF,OAAO,KAAC,YAAY,IAAC,EAAE,EAAE,EAAE,GAAG,mBAAmB,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,GAAI,CAAA;AAC3E,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/lib/SiteMenuListItemBase.d.ts

@@ -0,0 +1,4 @@
+export interface SiteMenuListItemBase {
+    iconOnly?: boolean;
+}
+//# sourceMappingURL=SiteMenuListItemBase.d.ts.map

package/dist/esm/components/SiteMenu/lib/SiteMenuListItemBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteMenuListItemBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/lib/SiteMenuListItemBase.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/esm/components/SiteMenu/lib/SiteMenuListItemBase.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SiteMenuListItemBase.js.map

package/dist/esm/components/SiteMenu/lib/SiteMenuListItemBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteMenuListItemBase.js","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/lib/SiteMenuListItemBase.tsx"],"names":[],"mappings":""}

package/dist/esm/components/SiteMenu/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SiteMenuListItemBase';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/SiteMenu/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/dist/esm/components/SiteMenu/lib/index.js

@@ -0,0 +1,2 @@
+export * from './SiteMenuListItemBase';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/SiteMenu/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/package.json

@@ -10,17 +10,17 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/react-appbar": "^2.14.19",
-    "@xylabs/react-button": "^2.14.19",
-    "@xylabs/react-common": "^2.14.19",
-    "@xylabs/react-flexbox": "^2.14.19",
-    "@xylabs/react-link": "^2.14.19",
-    "@xylabs/react-shared": "^2.14.19",
-    "@xyo-network/react-app-settings": "^2.35.0-rc.7",
-    "@xyo-network/react-archive": "^2.35.0-rc.7",
-    "@xyo-network/react-auth-sets": "^2.35.0-rc.7",
-    "@xyo-network/react-network": "^2.35.0-rc.7",
-    "@xyo-network/react-shared": "^2.35.0-rc.7",
+    "@xylabs/react-appbar": "^2.14.20",
+    "@xylabs/react-button": "^2.14.20",
+    "@xylabs/react-common": "^2.14.20",
+    "@xylabs/react-flexbox": "^2.14.20",
+    "@xylabs/react-link": "^2.14.20",
+    "@xylabs/react-shared": "^2.14.20",
+    "@xyo-network/react-app-settings": "^2.35.0",
+    "@xyo-network/react-archive": "^2.35.0",
+    "@xyo-network/react-auth-sets": "^2.35.0",
+    "@xyo-network/react-network": "^2.35.0",
+    "@xyo-network/react-shared": "^2.35.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -76,6 +76,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.35.0-rc.7",
-  "stableVersion": "2.34.2"
+  "version": "2.35.0"
 }

package/src/components/AppBar/Application.stories.tsx

@@ -4,6 +4,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
 import { ArchiveProvider, ArchivesProvider } from '@xyo-network/react-archive'
 import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
+import { AuthProvider } from '@xyo-network/react-auth'
+import { AuthSetsProvider } from '@xyo-network/react-auth-sets'
 import { NetworkMemoryProvider } from '@xyo-network/react-network'
 import { WalletAccountSelect, WalletProvider } from '@xyo-network/react-wallet'
 import { XyoWalletBase } from '@xyo-network/wallet'
@@ -27,28 +29,32 @@ const StorybookEntry = {
 
 const Template: ComponentStory<typeof ApplicationAppBar> = (args) => (
   <WalletProvider defaultWallet={new XyoWalletBase('test me')}>
-    <BrowserRouter>
-      <ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
-        <NetworkMemoryProvider>
-          <ArchivesProvider>
-            <ArchiveProvider>
-              <ApplicationAppBar
-                systemToolbar={
-                  <SystemToolbar
-                    menuItems={
-                      <List>
-                        <SiteMenuListItem primary="Hello" />
-                      </List>
+    <AuthProvider authState={{}}>
+      <AuthSetsProvider>
+        <BrowserRouter>
+          <ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
+            <NetworkMemoryProvider>
+              <ArchivesProvider>
+                <ArchiveProvider>
+                  <ApplicationAppBar
+                    systemToolbar={
+                      <SystemToolbar
+                        menuItems={
+                          <List>
+                            <SiteMenuListItem primary="Hello" />
+                          </List>
+                        }
+                      />
                     }
-                  />
-                }
-                {...args}
-              ></ApplicationAppBar>
-            </ArchiveProvider>
-          </ArchivesProvider>
-        </NetworkMemoryProvider>
-      </ArchivistApiProvider>
-    </BrowserRouter>
+                    {...args}
+                  ></ApplicationAppBar>
+                </ArchiveProvider>
+              </ArchivesProvider>
+            </NetworkMemoryProvider>
+          </ArchivistApiProvider>
+        </BrowserRouter>
+      </AuthSetsProvider>
+    </AuthProvider>
   </WalletProvider>
 )
 

package/src/components/SiteMenu/MenuIcon.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@mui/material'
+import { TypographyExProps } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+
+import { SiteMenuListItemBase } from './lib'
+
+export interface MenuIconProps extends SiteMenuListItemBase, TypographyExProps {
+  icon?: ReactNode
+}
+
+export const MenuIcon: React.FC<MenuIconProps> = ({ iconOnly, icon, ...props }) => {
+  return (
+    <Typography mr={iconOnly ? 0 : 1} display="flex" variant="caption" {...props}>
+      {icon}
+    </Typography>
+  )
+}

package/src/components/SiteMenu/MenuItem.stories.tsx

@@ -1,3 +1,4 @@
+import PublicRoundedIcon from '@mui/icons-material/PublicRounded'
 import { List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 
@@ -24,12 +25,18 @@ const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
 
 const Default = Template.bind({})
 Default.args = {
+  icon: <PublicRoundedIcon />,
   primary: 'Test',
 }
 
 const WithChildren = Template.bind({})
 WithChildren.args = {
-  children: <SiteMenuListItem primary="Test Child" />,
+  children: (
+    <List>
+      <SiteMenuListItem primary="Test Child" />
+    </List>
+  ),
+  icon: <PublicRoundedIcon />,
   primary: 'Test',
 }
 

package/src/components/SiteMenu/MenuItems.tsx

@@ -1,23 +1,29 @@
-import { ListItem, ListItemIcon, ListItemProps, ListItemText, ListItemTextProps } from '@mui/material'
-import { ListItemButtonEx, ListItemButtonExProps } from '@xyo-network/react-shared'
+import { ListItemProps, ListItemTextProps } from '@mui/material'
+import { ListItemButtonExProps } from '@xyo-network/react-shared'
 import { ReactNode } from 'react'
 import { To } from 'react-router-dom'
 
-export interface SiteMenuListItemProps extends ListItemProps {
+import { SiteMenuListItemBase } from './lib'
+import { MenuIcon } from './MenuIcon'
+import { MenuListItem } from './MenuListItem'
+import { MenuListItemButtonEx } from './MenuListItemButtonEx'
+import { MenuListItemText } from './MenuListItemText'
+
+export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemProps {
   primary: ListItemTextProps['primary']
   to?: To
   icon?: ReactNode
   onButtonClick?: ListItemButtonExProps['onClick']
 }
 
-export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({ style, children, primary, to, icon, onButtonClick, ...props }) => {
+export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({ style, children, iconOnly, icon, primary, onButtonClick, ...props }) => {
   return (
-    <ListItem style={{ display: 'block', ...style }} {...props}>
-      <ListItemButtonEx to={to} onClick={onButtonClick}>
-        <ListItemIcon>{icon}</ListItemIcon>
-        <ListItemText primary={primary} />
-      </ListItemButtonEx>
+    <MenuListItem style={style} iconOnly={iconOnly} {...props}>
+      <MenuListItemButtonEx iconOnly={iconOnly} onClick={onButtonClick}>
+        <MenuIcon icon={icon} iconOnly={iconOnly} />
+        <MenuListItemText primary={primary} iconOnly={iconOnly} />
+      </MenuListItemButtonEx>
       {children}
-    </ListItem>
+    </MenuListItem>
   )
 }

package/src/components/SiteMenu/MenuListItem.tsx

@@ -0,0 +1,17 @@
+import { ListItem, ListItemProps } from '@mui/material'
+
+import { SiteMenuListItemBase } from './lib'
+
+export interface MenuListItemProps extends SiteMenuListItemBase, ListItemProps {}
+
+export const MenuListItem: React.FC<MenuListItemProps> = ({ children, style, iconOnly, ...props }) => {
+  const listItemStyles = {
+    display: iconOnly ? 'inline-flex' : 'block',
+    width: iconOnly ? 'auto' : '100%',
+  }
+  return (
+    <ListItem style={{ ...listItemStyles, ...style }} {...props}>
+      {children}
+    </ListItem>
+  )
+}

package/src/components/SiteMenu/MenuListItemButtonEx.tsx

@@ -0,0 +1,14 @@
+import { ListItemButtonEx, ListItemButtonExProps } from '@xyo-network/react-shared'
+
+import { SiteMenuListItemBase } from './lib'
+
+export interface MenuListItemButtonExProps extends SiteMenuListItemBase, ListItemButtonExProps {}
+
+export const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps> = ({ iconOnly, sx, children, ...props }) => {
+  const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex' } : {}
+  return (
+    <ListItemButtonEx sx={{ ...listItemButtonSx, ...sx }} {...props}>
+      {children}
+    </ListItemButtonEx>
+  )
+}

package/src/components/SiteMenu/MenuListItemText.tsx

@@ -0,0 +1,10 @@
+import { ListItemText, ListItemTextProps } from '@mui/material'
+
+import { SiteMenuListItemBase } from './lib'
+
+export interface MenuListItemTextProps extends SiteMenuListItemBase, ListItemTextProps {}
+
+export const MenuListItemText: React.FC<MenuListItemTextProps> = ({ iconOnly, sx, ...props }) => {
+  const listItemTextSxProps = iconOnly ? { visibility: 'hidden', width: 0, ...sx } : {}
+  return <ListItemText sx={{ ...listItemTextSxProps, ...sx }} {...props} />
+}

package/src/components/SiteMenu/lib/SiteMenuListItemBase.tsx

@@ -0,0 +1,3 @@
+export interface SiteMenuListItemBase {
+  iconOnly?: boolean
+}

package/src/components/SiteMenu/lib/index.ts

@@ -0,0 +1 @@
+export * from './SiteMenuListItemBase'