@xyo-network/react-appbar 2.35.12 → 2.36.0

package/dist/esm/components/CollapsibleDrawer/ExampleMenuData.d.ts

@@ -0,0 +1,4 @@
+import { SiteMenuListItemProps } from '../SiteMenu';
+export declare const menuDataTop: SiteMenuListItemProps[];
+export declare const menuDataBottom: SiteMenuListItemProps[];
+//# sourceMappingURL=ExampleMenuData.d.ts.map

package/dist/esm/components/CollapsibleDrawer/ExampleMenuData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleMenuData.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/ExampleMenuData.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEnD,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAgC9C,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyBjD,CAAA"}

package/dist/esm/components/CollapsibleDrawer/ExampleMenuData.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VscAccount, VscGlobe, VscGraph, VscGraphLine, VscJson, VscServer, VscSettingsGear, VscSymbolMethod, VscSymbolNamespace, } from 'react-icons/vsc';
+export const menuDataTop = [
+    {
+        icon: _jsx(VscGlobe, {}),
+        primary: 'Explore',
+        subNavListItems: [{ primary: 'Explore', to: '', tooltip: 'View global archivist data on a world map.' }],
+        to: '',
+        tooltip: 'View global archivist data on a world map.',
+    },
+    {
+        icon: _jsx(VscSymbolMethod, {}),
+        primary: 'Blocks',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscSymbolNamespace, {}),
+        primary: 'Payloads',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscGraph, {}),
+        primary: 'Queries',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscServer, {}),
+        primary: 'Archives',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+];
+export const menuDataBottom = [
+    {
+        icon: _jsx(VscGraphLine, {}),
+        primary: 'Statistics',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscJson, {}),
+        primary: 'Schema',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscAccount, {}),
+        primary: 'Account',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscSettingsGear, {}),
+        primary: 'Settings',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+];
+//# sourceMappingURL=ExampleMenuData.js.map

package/dist/esm/components/CollapsibleDrawer/ExampleMenuData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleMenuData.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/ExampleMenuData.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,SAAS,EACT,eAAe,EACf,eAAe,EACf,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AAIxB,MAAM,CAAC,MAAM,WAAW,GAA4B;IAClD;QACE,IAAI,EAAE,KAAC,QAAQ,KAAG;QAClB,OAAO,EAAE,SAAS;QAClB,eAAe,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,4CAA4C,EAAE,CAAC;QACxG,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,4CAA4C;KACtD;IACD;QACE,IAAI,EAAE,KAAC,eAAe,KAAG;QACzB,OAAO,EAAE,QAAQ;QACjB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,kBAAkB,KAAG;QAC5B,OAAO,EAAE,UAAU;QACnB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,QAAQ,KAAG;QAClB,OAAO,EAAE,SAAS;QAClB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,SAAS,KAAG;QACnB,OAAO,EAAE,UAAU;QACnB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAA4B;IACrD;QACE,IAAI,EAAE,KAAC,YAAY,KAAG;QACtB,OAAO,EAAE,YAAY;QACrB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,OAAO,KAAG;QACjB,OAAO,EAAE,QAAQ;QACjB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,UAAU,KAAG;QACpB,OAAO,EAAE,SAAS;QAClB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,eAAe,KAAG;QACzB,OAAO,EAAE,UAAU;QACnB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;CACF,CAAA"}

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

@@ -6,8 +6,20 @@ import { SiteMenuListItemBase } from './lib';
 export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemProps {
     primary: ListItemTextProps['primary'];
     to?: To;
+    href?: string;
     icon?: ReactNode;
     onButtonClick?: ListItemButtonExProps['onClick'];
+    subNavListItems?: SubNavListItemProps[];
+    tooltip?: string;
+    small?: boolean;
+}
+export interface SubNavListItemProps {
+    primary: ListItemTextProps['primary'];
+    to?: To;
+    href?: string;
+    icon?: ReactNode;
+    onButtonClick?: ListItemButtonExProps['onClick'];
+    tooltip?: string;
 }
 export declare const SiteMenuListItem: React.FC<SiteMenuListItemProps>;
 //# sourceMappingURL=MenuItems.d.ts.map

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,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,CAqB5D,CAAA"}
+{"version":3,"file":"MenuItems.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,aAAa,EAAE,iBAAiB,EAAqB,MAAM,eAAe,CAAA;AAE/G,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAE3C,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,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;IAChD,eAAe,CAAC,EAAE,mBAAmB,EAAE,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACrC,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;IAChD,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqE5D,CAAA"}

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

@@ -1,10 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse, IconButton, List, Tooltip, useTheme } from '@mui/material';
+import { FlexRow } from '@xylabs/react-flexbox';
+import { useState } from 'react';
+import { VscChevronDown, VscInfo } from 'react-icons/vsc';
 import { MenuIcon } from './MenuIcon';
 import { MenuListItem } from './MenuListItem';
 import { MenuListItemButtonEx } from './MenuListItemButtonEx';
 import { MenuListItemText } from './MenuListItemText';
-export const SiteMenuListItem = ({ style, children, iconOnly, collapseEnd, icon, primary, onButtonClick, to, ...props }) => {
+export const SiteMenuListItem = ({ style, subNavListItems, iconOnly, tooltip, small, collapseEnd, icon, primary, onButtonClick, to, ...props }) => {
     const { dense } = props;
-    return (_jsxs(MenuListItem, { style: { whiteSpace: 'nowrap', ...style }, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, collapseEnd: collapseEnd, dense: dense, to: to, children: [_jsx(MenuIcon, { icon: icon }), _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly })] }), children] }));
+    const theme = useTheme();
+    const [openSubNav, setOpenSubNav] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    return (_jsxs(MenuListItem, { disableGutters: true, style: { whiteSpace: 'nowrap', ...style }, iconOnly: iconOnly, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, collapseEnd: collapseEnd, dense: dense, to: to, sx: { justifyContent: 'space-between' }, children: [_jsxs(FlexRow, { children: [_jsx(MenuIcon, { icon: icon, fontSize: small ? '14px' : '16px', paddingRight: theme.spacing(1), color: hovered ? theme.palette.primary.main : 'inherit' }), _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly, sx: { fontSize: small ? theme.typography.caption.fontSize : '' } })] }), _jsxs(FlexRow, { children: [subNavListItems ? (_jsx(IconButton, { onClick: () => setOpenSubNav(!openSubNav), sx: { marginRight: theme.spacing(1) }, children: _jsx(VscChevronDown, { fontSize: small ? '14px' : '16px' }) })) : null, tooltip ? (_jsx(Tooltip, { title: tooltip, placement: "right", children: _jsx("div", { children: _jsx(VscInfo, { color: "disabled" }) }) })) : null] })] }), subNavListItems && !iconOnly ? (_jsx(Collapse, { in: openSubNav, children: _jsx(List, { children: subNavListItems.map((item, index) => {
+                        return _jsx(SiteMenuListItem, { ...item }, index);
+                    }) }) })) : null] }));
 };
 //# 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":";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,EAChE,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,aAAa,EACb,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,OAAO,CACL,MAAC,YAAY,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,aACpF,MAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC9G,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,EACxB,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,IACrC,EACtB,QAAQ,IACI,CAChB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItemButtonEx } from '@xyo-network/react-shared';
 export const MenuListItemButtonEx = ({ iconOnly, collapseEnd, sx, children, ...props }) => {
-    const { dense } = props;
+    const dense = props;
     const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0 } : {};
     // wait till collapseEnds to remove the spacing between items
     const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };

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

@@ -1 +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,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7H,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACrG,6DAA6D;IAC7D,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAA;IACrE,6EAA6E;IAC7E,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAA;IACxD,OAAO,CACL,KAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,YACxF,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA"}
+{"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,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7H,MAAM,KAAK,GAAG,KAAK,CAAA;IACnB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IACrG,6DAA6D;IAC7D,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAA;IACrE,6EAA6E;IAC7E,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAA;IACxD,OAAO,CACL,KAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,YACxF,QAAQ,GACQ,CACpB,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -16,11 +16,11 @@
     "@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.12",
-    "@xyo-network/react-archive": "^2.35.12",
-    "@xyo-network/react-auth-sets": "^2.35.12",
-    "@xyo-network/react-network": "^2.35.12",
-    "@xyo-network/react-shared": "^2.35.12",
+    "@xyo-network/react-app-settings": "^2.36.0",
+    "@xyo-network/react-archive": "^2.36.0",
+    "@xyo-network/react-auth-sets": "^2.36.0",
+    "@xyo-network/react-network": "^2.36.0",
+    "@xyo-network/react-shared": "^2.36.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -31,6 +31,7 @@
     "@xyo-network/payload": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0"
   },
   "description": "Common React library for all XYO projects that use React",
@@ -76,5 +77,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.35.12"
+  "version": "2.36.0"
 }

package/src/components/CollapsibleDrawer/CollapseDrawer.stories.tsx

@@ -1,12 +1,12 @@
-import PublicRoundedIcon from '@mui/icons-material/PublicRounded'
-import { Divider, List, useTheme } from '@mui/material'
+import { Divider, List, ListSubheader, useTheme } from '@mui/material'
 import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
 
 import { CollapsibleProvider, useCollapsible } from '../../contexts'
-import { SiteMenuListItem, SiteMenuListItemProps } from '../SiteMenu'
+import { SiteMenuListItem } from '../SiteMenu'
 import { CollapseToggleFlex } from './CollapseToggle'
 import { CollapsibleDrawer } from './CollapsibleDrawer'
+import { menuDataBottom, menuDataTop } from './ExampleMenuData'
 
 const CollapseProviderDecorator: DecoratorFn = (Story, args) => {
   return (
@@ -28,16 +28,6 @@ const StorybookEntry = {
   title: 'appbar/CollapseDrawer',
 } as ComponentMeta<typeof CollapsibleDrawer>
 
-const SiteMenuList: React.FC<SiteMenuListItemProps> = (args) => {
-  return (
-    <List>
-      <SiteMenuListItem {...args} />
-      <SiteMenuListItem {...args} />
-      <SiteMenuListItem {...args} />
-    </List>
-  )
-}
-
 const Template: ComponentStory<typeof CollapsibleDrawer> = (args) => {
   const { collapse, setCollapseEnd, collapseEnd } = useCollapsible()
   const theme = useTheme()
@@ -45,7 +35,20 @@ const Template: ComponentStory<typeof CollapsibleDrawer> = (args) => {
     <>
       <FlexGrowCol alignItems="start" height="calc(100vh - 2rem)">
         <CollapsibleDrawer in={!collapse} orientation="horizontal" collapsedSize={theme.spacing(5)} onExited={() => setCollapseEnd?.(true)} {...args}>
-          <SiteMenuList iconOnly={collapse} collapseEnd={collapseEnd} primary="test" icon={<PublicRoundedIcon />} />
+          <List>
+            {collapseEnd ? null : <ListSubheader>Explore & Create</ListSubheader>}
+            {menuDataTop.map((item, index) => (
+              <>
+                <SiteMenuListItem key={index} {...item}></SiteMenuListItem>
+              </>
+            ))}
+            {collapseEnd ? null : <ListSubheader>Settings & Analytics</ListSubheader>}
+            {menuDataBottom.map((item, index) => (
+              <>
+                <SiteMenuListItem key={index} {...item}></SiteMenuListItem>
+              </>
+            ))}
+          </List>
           <FlexGrowCol />
           <CollapseToggleFlex justifyContent="start" />
         </CollapsibleDrawer>
@@ -56,7 +59,9 @@ const Template: ComponentStory<typeof CollapsibleDrawer> = (args) => {
 }
 
 const Default = Template.bind({})
-Default.args = {}
+Default.args = {
+  collapsedSize: '40px',
+}
 
 export { Default }
 

package/src/components/CollapsibleDrawer/ExampleMenuData.tsx

@@ -0,0 +1,74 @@
+import {
+  VscAccount,
+  VscGlobe,
+  VscGraph,
+  VscGraphLine,
+  VscJson,
+  VscServer,
+  VscSettingsGear,
+  VscSymbolMethod,
+  VscSymbolNamespace,
+} from 'react-icons/vsc'
+
+import { SiteMenuListItemProps } from '../SiteMenu'
+
+export const menuDataTop: SiteMenuListItemProps[] = [
+  {
+    icon: <VscGlobe />,
+    primary: 'Explore',
+    subNavListItems: [{ primary: 'Explore', to: '', tooltip: 'View global archivist data on a world map.' }],
+    to: '',
+    tooltip: 'View global archivist data on a world map.',
+  },
+  {
+    icon: <VscSymbolMethod />,
+    primary: 'Blocks',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscSymbolNamespace />,
+    primary: 'Payloads',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscGraph />,
+    primary: 'Queries',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscServer />,
+    primary: 'Archives',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+]
+
+export const menuDataBottom: SiteMenuListItemProps[] = [
+  {
+    icon: <VscGraphLine />,
+    primary: 'Statistics',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscJson />,
+    primary: 'Schema',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscAccount />,
+    primary: 'Account',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscSettingsGear />,
+    primary: 'Settings',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+]

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

@@ -1,6 +1,6 @@
-import PublicRoundedIcon from '@mui/icons-material/PublicRounded'
 import { List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FaGlobeAmericas } from 'react-icons/fa'
 
 import { SiteMenuListItem, SiteMenuListItemProps } from './MenuItems'
 
@@ -31,19 +31,18 @@ const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
 
 const Default = Template.bind({})
 Default.args = {
-  icon: <PublicRoundedIcon />,
-  primary: 'Test',
+  dense: true,
+  icon: <FaGlobeAmericas />,
+  primary: 'Explore',
+  tooltip: 'View global archivist data on a world map.',
 }
 
 const WithChildren = Template.bind({})
 WithChildren.args = {
-  children: (
-    <List>
-      <SiteMenuListItem primary="Test Child" icon={<PublicRoundedIcon />} />
-    </List>
-  ),
-  icon: <PublicRoundedIcon />,
-  primary: 'Test',
+  icon: <FaGlobeAmericas />,
+  primary: 'Explore',
+  subNavListItems: [{ primary: 'Explore', to: '/explore', tooltip: 'View global archivist data on a world map.' }],
+  tooltip: 'View global archivist data on a world map.',
 }
 
 export { Default, WithChildren }

package/src/components/SiteMenu/MenuItems.tsx

@@ -1,6 +1,8 @@
-import { ListItemProps, ListItemTextProps } from '@mui/material'
+import { Collapse, IconButton, List, ListItemProps, ListItemTextProps, Tooltip, useTheme } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
 import { ListItemButtonExProps } from '@xyo-network/react-shared'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
+import { VscChevronDown, VscInfo } from 'react-icons/vsc'
 import { To } from 'react-router-dom'
 
 import { SiteMenuListItemBase } from './lib'
@@ -12,14 +14,29 @@ import { MenuListItemText } from './MenuListItemText'
 export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemProps {
   primary: ListItemTextProps['primary']
   to?: To
+  href?: string
   icon?: ReactNode
   onButtonClick?: ListItemButtonExProps['onClick']
+  subNavListItems?: SubNavListItemProps[]
+  tooltip?: string
+  small?: boolean
+}
+
+export interface SubNavListItemProps {
+  primary: ListItemTextProps['primary']
+  to?: To
+  href?: string
+  icon?: ReactNode
+  onButtonClick?: ListItemButtonExProps['onClick']
+  tooltip?: string
 }
 
 export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
   style,
-  children,
+  subNavListItems,
   iconOnly,
+  tooltip,
+  small,
   collapseEnd,
   icon,
   primary,
@@ -28,13 +45,59 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
   ...props
 }) => {
   const { dense } = props
+  const theme = useTheme()
+  const [openSubNav, setOpenSubNav] = useState(false)
+  const [hovered, setHovered] = useState(false)
   return (
-    <MenuListItem style={{ whiteSpace: 'nowrap', ...style }} iconOnly={iconOnly} {...props}>
-      <MenuListItemButtonEx iconOnly={iconOnly} onClick={onButtonClick} collapseEnd={collapseEnd} dense={dense} to={to}>
-        <MenuIcon icon={icon} />
-        <MenuListItemText primary={primary} iconOnly={iconOnly} />
+    <MenuListItem
+      disableGutters
+      style={{ whiteSpace: 'nowrap', ...style }}
+      iconOnly={iconOnly}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      {...props}
+    >
+      <MenuListItemButtonEx
+        iconOnly={iconOnly}
+        onClick={onButtonClick}
+        collapseEnd={collapseEnd}
+        dense={dense}
+        to={to}
+        sx={{ justifyContent: 'space-between' }}
+      >
+        <FlexRow>
+          <MenuIcon
+            icon={icon}
+            fontSize={small ? '14px' : '16px'}
+            paddingRight={theme.spacing(1)}
+            color={hovered ? theme.palette.primary.main : 'inherit'}
+          />
+          <MenuListItemText primary={primary} iconOnly={iconOnly} sx={{ fontSize: small ? theme.typography.caption.fontSize : '' }} />
+        </FlexRow>
+        <FlexRow>
+          {subNavListItems ? (
+            <IconButton onClick={() => setOpenSubNav(!openSubNav)} sx={{ marginRight: theme.spacing(1) }}>
+              <VscChevronDown fontSize={small ? '14px' : '16px'} />
+            </IconButton>
+          ) : null}
+          {tooltip ? (
+            <Tooltip title={tooltip} placement="right">
+              <div>
+                <VscInfo color="disabled" />
+              </div>
+            </Tooltip>
+          ) : null}
+        </FlexRow>
       </MenuListItemButtonEx>
-      {children}
+      {subNavListItems && !iconOnly ? (
+        <Collapse in={openSubNav}>
+          <List>
+            {subNavListItems.map((item, index) => {
+              return <SiteMenuListItem key={index} {...item} />
+            })}
+          </List>
+        </Collapse>
+      ) : null}
     </MenuListItem>
   )
 }

package/src/components/SiteMenu/MenuListItemButtonEx.tsx

@@ -5,7 +5,7 @@ import { SiteMenuListItemBase } from './lib'
 export interface MenuListItemButtonExProps extends SiteMenuListItemBase, ListItemButtonExProps {}
 
 export const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps> = ({ iconOnly, collapseEnd, sx, children, ...props }) => {
-  const { dense } = props
+  const dense = props
   const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0 } : {}
   // wait till collapseEnds to remove the spacing between items
   const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }