@xyo-network/react-appbar 2.35.12 → 2.35.13

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

@@ -1 +1 @@
-{"version":3,"file":"CollapseToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqBrD,CAAA"}
+{"version":3,"file":"CollapseToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAK7D,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoBrD,CAAA"}

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';
-import KeyboardDoubleArrowRightRounded from '@mui/icons-material/KeyboardDoubleArrowRightRounded';
 import { IconButton } from '@mui/material';
 import { FlexRow } from '@xylabs/react-flexbox';
+import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc';
 import { useCollapsible } from '../../contexts';
 export const CollapseToggleFlex = (props) => {
     const { collapse, setCollapse, setCollapseEnd } = useCollapsible();
@@ -12,7 +11,6 @@ export const CollapseToggleFlex = (props) => {
     };
     return (_jsx(FlexRow, { mt: 2, py: 2, ...props, children: _jsx(IconButton, { onClick: handleCollapseToggle, sx: {
                 flexDirection: 'column',
-                ml: 1,
-            }, children: !collapse ? _jsx(KeyboardDoubleArrowLeftRoundedIcon, {}) : _jsx(KeyboardDoubleArrowRightRounded, {}) }) }));
+            }, children: !collapse ? _jsx(VscArrowSmallLeft, {}) : _jsx(VscArrowSmallRight, {}) }) }));
 };
 //# sourceMappingURL=CollapseToggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CollapseToggle.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,MAAM,oDAAoD,CAAA;AACnG,OAAO,+BAA+B,MAAM,qDAAqD,CAAA;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAElE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,WAAW,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACxB,cAAc,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,CAAC,CAAA;IAED,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,KAAM,KAAK,YAC9B,KAAC,UAAU,IACT,OAAO,EAAE,oBAAoB,EAC7B,EAAE,EAAE;gBACF,aAAa,EAAE,QAAQ;gBACvB,EAAE,EAAE,CAAC;aACN,YAEA,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,kCAAkC,KAAG,CAAC,CAAC,CAAC,KAAC,+BAA+B,KAAG,GAC9E,GACL,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CollapseToggle.js","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAElE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,WAAW,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACxB,cAAc,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,CAAC,CAAA;IAED,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,KAAM,KAAK,YAC9B,KAAC,UAAU,IACT,OAAO,EAAE,oBAAoB,EAC7B,EAAE,EAAE;gBACF,aAAa,EAAE,QAAQ;aACxB,YAEA,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC,CAAC,KAAC,kBAAkB,KAAG,GAChD,GACL,CACX,CAAA;AACH,CAAC,CAAA"}

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":"AAeA,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEnD,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAoC9C,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,qBAAqB,EAyBjD,CAAA"}

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VscAccount, VscAdd, VscDashboard, VscGlobe, VscGraph, VscGraphLine, VscJson, VscServer, VscSettingsGear, VscSymbolMethod, VscSymbolNamespace, VscTable, } from 'react-icons/vsc';
+export const menuDataTop = [
+    {
+        icon: _jsx(VscGlobe, { fontSize: "body1" }),
+        primary: 'Explore',
+        to: '',
+        tooltip: 'View global archivist data on a world map.',
+    },
+    {
+        icon: _jsx(VscSymbolMethod, { fontSize: "body1" }),
+        primary: 'Blocks',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscSymbolNamespace, { fontSize: "body1" }),
+        primary: 'Payloads',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscGraph, { fontSize: "body1" }),
+        primary: 'Queries',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscServer, { fontSize: "body1" }),
+        primary: 'Archives',
+        subNavListItems: [
+            { icon: _jsx(VscDashboard, { fontSize: "body2" }), primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.' },
+            { icon: _jsx(VscAdd, { fontSize: "body2" }), primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.' },
+            { icon: _jsx(VscTable, { fontSize: "body2" }), primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.' },
+        ],
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+];
+export const menuDataBottom = [
+    {
+        icon: _jsx(VscGraphLine, { fontSize: "body1" }),
+        primary: 'Statistics',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscJson, { fontSize: "body1" }),
+        primary: 'Schema',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscAccount, { fontSize: "body1" }),
+        primary: 'Account',
+        to: '',
+        tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+    },
+    {
+        icon: _jsx(VscSettingsGear, { fontSize: "body1" }),
+        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,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,SAAS,EACT,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,QAAQ,GACT,MAAM,iBAAiB,CAAA;AAIxB,MAAM,CAAC,MAAM,WAAW,GAA4B;IAClD;QACE,IAAI,EAAE,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG;QACnC,OAAO,EAAE,SAAS;QAClB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,4CAA4C;KACtD;IACD;QACE,IAAI,EAAE,KAAC,eAAe,IAAC,QAAQ,EAAC,OAAO,GAAG;QAC1C,OAAO,EAAE,QAAQ;QACjB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,kBAAkB,IAAC,QAAQ,EAAC,OAAO,GAAG;QAC7C,OAAO,EAAE,UAAU;QACnB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG;QACnC,OAAO,EAAE,SAAS;QAClB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,SAAS,IAAC,QAAQ,EAAC,OAAO,GAAG;QACpC,OAAO,EAAE,UAAU;QACnB,eAAe,EAAE;YACf,EAAE,IAAI,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAC,OAAO,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,6CAA6C,EAAE;YACjI,EAAE,IAAI,EAAE,KAAC,MAAM,IAAC,QAAQ,EAAC,OAAO,GAAG,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,uCAAuC,EAAE;YAC1H,EAAE,IAAI,EAAE,KAAC,QAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,+CAA+C,EAAE;SACpI;QACD,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAA4B;IACrD;QACE,IAAI,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAC,OAAO,GAAG;QACvC,OAAO,EAAE,YAAY;QACrB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,OAAO,IAAC,QAAQ,EAAC,OAAO,GAAG;QAClC,OAAO,EAAE,QAAQ;QACjB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,UAAU,IAAC,QAAQ,EAAC,OAAO,GAAG;QACrC,OAAO,EAAE,SAAS;QAClB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;IACD;QACE,IAAI,EAAE,KAAC,eAAe,IAAC,QAAQ,EAAC,OAAO,GAAG;QAC1C,OAAO,EAAE,UAAU;QACnB,EAAE,EAAE,EAAE;QACN,OAAO,EAAE,6EAA6E;KACvF;CACF,CAAA"}

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

@@ -1,6 +1,6 @@
-import { TypographyExProps } from '@xyo-network/react-shared';
+import { TypographyProps } from '@mui/material';
 import { ReactNode } from 'react';
-export interface MenuIconProps extends TypographyExProps {
+export interface MenuIconProps extends TypographyProps {
     icon?: ReactNode;
 }
 export declare const MenuIcon: React.FC<MenuIconProps>;

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

@@ -1 +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,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM5C,CAAA"}
+{"version":3,"file":"MenuIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD,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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MenuIcon.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAQ1C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtE,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,KAAK,KAAK,YACnD,IAAI,GACM,CACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MenuIcon.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAO3D,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtE,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,KAAK,KAAK,YACjC,IAAI,GACM,CACd,CAAA;AACH,CAAC,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;
+    subNavOpen?: 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;AAGrC,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,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;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,CA8D5D,CAAA"}

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

@@ -1,10 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse, IconButton, List, Tooltip, useTheme } from '@mui/material';
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox';
+import { useState } from 'react';
+import { VscChevronDown, VscInfo } from 'react-icons/vsc';
+import { useCollapsible } from '../../contexts';
 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, 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 { collapse } = useCollapsible();
+    const [openSubNav, setOpenSubNav] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    return (_jsxs(MenuListItem, { disableGutters: true, style: { whiteSpace: 'nowrap', ...style }, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemButtonEx, { iconOnly: iconOnly, onClick: onButtonClick, collapseEnd: collapseEnd, dense: dense, to: to, sx: { justifyContent: 'space-between' }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsxs(FlexRow, { children: [_jsx(MenuIcon, { icon: icon, paddingRight: theme.spacing(1), color: hovered ? 'primary' : 'inherit' }), _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly })] }), _jsxs(FlexRow, { children: [subNavListItems ? (_jsx(IconButton, { onClick: () => setOpenSubNav(!openSubNav), sx: { marginRight: theme.spacing(1) }, children: _jsx(VscChevronDown, { fontSize: "16px" }) })) : null, tooltip ? (_jsx(Tooltip, { title: tooltip, placement: "right", children: _jsx("div", { children: _jsx(FlexCol, { justifyContent: "center", children: _jsx(VscInfo, { color: "grey" }) }) }) })) : null] })] }), subNavListItems ? (_jsx(Collapse, { in: collapse == true ? false : openSubNav, children: _jsx(List, { children: subNavListItems.map((item, index) => {
+                        return _jsx(SiteMenuListItem, { sx: { pl: theme.spacing(1) }, ...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/dist/esm/components/SiteMenu/MenuSection.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ListProps } from '@mui/material';
+import { SiteMenuListItemProps } from './MenuItems';
+export interface MenuSectionProps extends ListProps {
+    title: string;
+    listItems: SiteMenuListItemProps[];
+    showTitle?: boolean;
+}
+export declare const MenuSection: React.FC<MenuSectionProps>;
+//# sourceMappingURL=MenuSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSection.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAiB,MAAM,eAAe,CAAA;AAE9D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAErE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,qBAAqB,EAAE,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAWlD,CAAA"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { List, ListSubheader } from '@mui/material';
+import { SiteMenuListItem } from './MenuItems';
+export const MenuSection = ({ title, listItems, showTitle = true, ...props }) => {
+    return (_jsxs(List, { ...props, children: [showTitle ? _jsx(ListSubheader, { children: title }) : null, listItems.map((item, index) => (_jsx(_Fragment, { children: _jsx(SiteMenuListItem, { ...item }, index) })))] }));
+};
+//# sourceMappingURL=MenuSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSection.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,eAAe,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAyB,MAAM,aAAa,CAAA;AAQrE,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1G,OAAO,CACL,MAAC,IAAI,OAAK,KAAK,aACZ,SAAS,CAAC,CAAC,CAAC,KAAC,aAAa,cAAE,KAAK,GAAiB,CAAC,CAAC,CAAC,IAAI,EACzD,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,4BACE,KAAC,gBAAgB,OAAiB,IAAI,IAAf,KAAK,CAA+B,GAC1D,CACJ,CAAC,IACG,CACR,CAAA;AACH,CAAC,CAAA"}

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

@@ -1,4 +1,5 @@
 export * from './hooks';
 export * from './Menu';
 export * from './MenuItems';
+export * from './MenuSection';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA"}

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

@@ -1,4 +1,5 @@
 export * from './hooks';
 export * from './Menu';
 export * from './MenuItems';
+export * from './MenuSection';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,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.35.13",
+    "@xyo-network/react-archive": "^2.35.13",
+    "@xyo-network/react-auth-sets": "^2.35.13",
+    "@xyo-network/react-network": "^2.35.13",
+    "@xyo-network/react-shared": "^2.35.13",
     "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.35.13"
 }

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 { 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 { MenuSection } from '../SiteMenu'
 import { CollapseToggleFlex } from './CollapseToggle'
 import { CollapsibleDrawer } from './CollapsibleDrawer'
+import { menuDataBottom, menuDataTop } from './ExampleMenuData'
 
 const CollapseProviderDecorator: DecoratorFn = (Story, args) => {
   return (
@@ -28,35 +28,27 @@ 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 { collapse, setCollapseEnd } = useCollapsible()
   const theme = useTheme()
   return (
     <>
       <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 />} />
+          <MenuSection title="Explore & Create" listItems={menuDataTop} showTitle={!collapse} />
+          <MenuSection title="Settings & Analytics" listItems={menuDataBottom} showTitle={!collapse} />
           <FlexGrowCol />
           <CollapseToggleFlex justifyContent="start" />
         </CollapsibleDrawer>
-        <Divider orientation="vertical" flexItem />
       </FlexGrowCol>
     </>
   )
 }
 
 const Default = Template.bind({})
-Default.args = {}
+Default.args = {
+  collapsedSize: '40px',
+}
 
 export { Default }
 

package/src/components/CollapsibleDrawer/CollapseToggle.tsx

@@ -1,7 +1,6 @@
-import KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded'
-import KeyboardDoubleArrowRightRounded from '@mui/icons-material/KeyboardDoubleArrowRightRounded'
 import { IconButton } from '@mui/material'
 import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'
 
 import { useCollapsible } from '../../contexts'
 
@@ -19,10 +18,9 @@ export const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {
         onClick={handleCollapseToggle}
         sx={{
           flexDirection: 'column',
-          ml: 1,
         }}
       >
-        {!collapse ? <KeyboardDoubleArrowLeftRoundedIcon /> : <KeyboardDoubleArrowRightRounded />}
+        {!collapse ? <VscArrowSmallLeft /> : <VscArrowSmallRight />}
       </IconButton>
     </FlexRow>
   )

package/src/components/CollapsibleDrawer/ExampleMenuData.tsx

@@ -0,0 +1,81 @@
+import {
+  VscAccount,
+  VscAdd,
+  VscDashboard,
+  VscGlobe,
+  VscGraph,
+  VscGraphLine,
+  VscJson,
+  VscServer,
+  VscSettingsGear,
+  VscSymbolMethod,
+  VscSymbolNamespace,
+  VscTable,
+} from 'react-icons/vsc'
+
+import { SiteMenuListItemProps } from '../SiteMenu'
+
+export const menuDataTop: SiteMenuListItemProps[] = [
+  {
+    icon: <VscGlobe fontSize="body1" />,
+    primary: 'Explore',
+    to: '',
+    tooltip: 'View global archivist data on a world map.',
+  },
+  {
+    icon: <VscSymbolMethod fontSize="body1" />,
+    primary: 'Blocks',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscSymbolNamespace fontSize="body1" />,
+    primary: 'Payloads',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscGraph fontSize="body1" />,
+    primary: 'Queries',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscServer fontSize="body1" />,
+    primary: 'Archives',
+    subNavListItems: [
+      { icon: <VscDashboard fontSize="body2" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.' },
+      { icon: <VscAdd fontSize="body2" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.' },
+      { icon: <VscTable fontSize="body2" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.' },
+    ],
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+]
+
+export const menuDataBottom: SiteMenuListItemProps[] = [
+  {
+    icon: <VscGraphLine fontSize="body1" />,
+    primary: 'Statistics',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscJson fontSize="body1" />,
+    primary: 'Schema',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscAccount fontSize="body1" />,
+    primary: 'Account',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+  {
+    icon: <VscSettingsGear fontSize="body1" />,
+    primary: 'Settings',
+    to: '',
+    tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
+  },
+]

package/src/components/SiteMenu/MenuIcon.tsx

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

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 }