@xyo-network/react-appbar 2.36.0 → 2.36.1

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.map

@@ -1 +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"}
+{"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

@@ -1,59 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { VscAccount, VscGlobe, VscGraph, VscGraphLine, VscJson, VscServer, VscSettingsGear, VscSymbolMethod, VscSymbolNamespace, } from 'react-icons/vsc';
+import { VscAccount, VscAdd, VscDashboard, VscGlobe, VscGraph, VscGraphLine, VscJson, VscServer, VscSettingsGear, VscSymbolMethod, VscSymbolNamespace, VscTable, } from 'react-icons/vsc';
 export const menuDataTop = [
     {
-        icon: _jsx(VscGlobe, {}),
+        icon: _jsx(VscGlobe, { fontSize: "body1" }),
         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, {}),
+        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, {}),
+        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, {}),
+        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, {}),
+        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, {}),
+        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, {}),
+        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, {}),
+        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, {}),
+        icon: _jsx(VscSettingsGear, { fontSize: "body1" }),
         primary: 'Settings',
         to: '',
         tooltip: 'The most recent blocks seen in the in temp archive on your current network.',

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

@@ -1 +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"}
+{"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

@@ -11,7 +11,7 @@ export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemPro
     onButtonClick?: ListItemButtonExProps['onClick'];
     subNavListItems?: SubNavListItemProps[];
     tooltip?: string;
-    small?: boolean;
+    subNavOpen?: boolean;
 }
 export interface SubNavListItemProps {
     primary: ListItemTextProps['primary'];

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,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"}
+{"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,19 +1,21 @@
 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 { 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, subNavListItems, iconOnly, tooltip, small, collapseEnd, icon, primary, onButtonClick, to, ...props }) => {
+export const SiteMenuListItem = ({ style, subNavListItems, iconOnly, tooltip, collapseEnd, icon, primary, onButtonClick, to, ...props }) => {
     const { dense } = props;
     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, 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);
+    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":"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"}
+{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"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"}

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.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",
+    "@xyo-network/react-app-settings": "^2.36.1",
+    "@xyo-network/react-archive": "^2.36.1",
+    "@xyo-network/react-auth-sets": "^2.36.1",
+    "@xyo-network/react-network": "^2.36.1",
+    "@xyo-network/react-shared": "^2.36.1",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -77,5 +77,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.36.0"
+  "version": "2.36.1"
 }

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

@@ -1,9 +1,9 @@
-import { Divider, List, ListSubheader, 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 } from '../SiteMenu'
+import { MenuSection } from '../SiteMenu'
 import { CollapseToggleFlex } from './CollapseToggle'
 import { CollapsibleDrawer } from './CollapsibleDrawer'
 import { menuDataBottom, menuDataTop } from './ExampleMenuData'
@@ -29,30 +29,17 @@ const StorybookEntry = {
 } as ComponentMeta<typeof CollapsibleDrawer>
 
 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}>
-          <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>
+          <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>
     </>
   )

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

@@ -1,5 +1,7 @@
 import {
   VscAccount,
+  VscAdd,
+  VscDashboard,
   VscGlobe,
   VscGraph,
   VscGraphLine,
@@ -8,39 +10,44 @@ import {
   VscSettingsGear,
   VscSymbolMethod,
   VscSymbolNamespace,
+  VscTable,
 } from 'react-icons/vsc'
 
 import { SiteMenuListItemProps } from '../SiteMenu'
 
 export const menuDataTop: SiteMenuListItemProps[] = [
   {
-    icon: <VscGlobe />,
+    icon: <VscGlobe fontSize="body1" />,
     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 />,
+    icon: <VscSymbolMethod fontSize="body1" />,
     primary: 'Blocks',
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
   },
   {
-    icon: <VscSymbolNamespace />,
+    icon: <VscSymbolNamespace fontSize="body1" />,
     primary: 'Payloads',
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
   },
   {
-    icon: <VscGraph />,
+    icon: <VscGraph fontSize="body1" />,
     primary: 'Queries',
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
   },
   {
-    icon: <VscServer />,
+    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.',
   },
@@ -48,25 +55,25 @@ export const menuDataTop: SiteMenuListItemProps[] = [
 
 export const menuDataBottom: SiteMenuListItemProps[] = [
   {
-    icon: <VscGraphLine />,
+    icon: <VscGraphLine fontSize="body1" />,
     primary: 'Statistics',
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
   },
   {
-    icon: <VscJson />,
+    icon: <VscJson fontSize="body1" />,
     primary: 'Schema',
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
   },
   {
-    icon: <VscAccount />,
+    icon: <VscAccount fontSize="body1" />,
     primary: 'Account',
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',
   },
   {
-    icon: <VscSettingsGear />,
+    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/MenuItems.tsx

@@ -1,10 +1,11 @@
 import { Collapse, IconButton, List, ListItemProps, ListItemTextProps, Tooltip, useTheme } from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { ListItemButtonExProps } from '@xyo-network/react-shared'
 import { ReactNode, useState } from 'react'
 import { VscChevronDown, VscInfo } from 'react-icons/vsc'
 import { To } from 'react-router-dom'
 
+import { useCollapsible } from '../../contexts'
 import { SiteMenuListItemBase } from './lib'
 import { MenuIcon } from './MenuIcon'
 import { MenuListItem } from './MenuListItem'
@@ -19,7 +20,7 @@ export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemPro
   onButtonClick?: ListItemButtonExProps['onClick']
   subNavListItems?: SubNavListItemProps[]
   tooltip?: string
-  small?: boolean
+  subNavOpen?: boolean
 }
 
 export interface SubNavListItemProps {
@@ -36,7 +37,6 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
   subNavListItems,
   iconOnly,
   tooltip,
-  small,
   collapseEnd,
   icon,
   primary,
@@ -46,17 +46,11 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
 }) => {
   const { dense } = props
   const theme = useTheme()
+  const { collapse } = useCollapsible()
   const [openSubNav, setOpenSubNav] = useState(false)
   const [hovered, setHovered] = useState(false)
   return (
-    <MenuListItem
-      disableGutters
-      style={{ whiteSpace: 'nowrap', ...style }}
-      iconOnly={iconOnly}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      {...props}
-    >
+    <MenuListItem disableGutters style={{ whiteSpace: 'nowrap', ...style }} iconOnly={iconOnly} {...props}>
       <MenuListItemButtonEx
         iconOnly={iconOnly}
         onClick={onButtonClick}
@@ -64,36 +58,36 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
         dense={dense}
         to={to}
         sx={{ justifyContent: 'space-between' }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
       >
         <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 : '' }} />
+          <MenuIcon icon={icon} paddingRight={theme.spacing(1)} color={hovered ? 'primary' : 'inherit'} />
+          <MenuListItemText primary={primary} iconOnly={iconOnly} />
         </FlexRow>
         <FlexRow>
           {subNavListItems ? (
             <IconButton onClick={() => setOpenSubNav(!openSubNav)} sx={{ marginRight: theme.spacing(1) }}>
-              <VscChevronDown fontSize={small ? '14px' : '16px'} />
+              <VscChevronDown fontSize="16px" />
             </IconButton>
           ) : null}
           {tooltip ? (
             <Tooltip title={tooltip} placement="right">
+              {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}
               <div>
-                <VscInfo color="disabled" />
+                <FlexCol justifyContent="center">
+                  <VscInfo color="grey" />
+                </FlexCol>
               </div>
             </Tooltip>
           ) : null}
         </FlexRow>
       </MenuListItemButtonEx>
-      {subNavListItems && !iconOnly ? (
-        <Collapse in={openSubNav}>
+      {subNavListItems ? (
+        <Collapse in={collapse == true ? false : openSubNav}>
           <List>
             {subNavListItems.map((item, index) => {
-              return <SiteMenuListItem key={index} {...item} />
+              return <SiteMenuListItem sx={{ pl: theme.spacing(1) }} key={index} {...item} />
             })}
           </List>
         </Collapse>

package/src/components/SiteMenu/MenuSection.tsx

@@ -0,0 +1,22 @@
+import { List, ListProps, ListSubheader } from '@mui/material'
+
+import { SiteMenuListItem, SiteMenuListItemProps } from './MenuItems'
+
+export interface MenuSectionProps extends ListProps {
+  title: string
+  listItems: SiteMenuListItemProps[]
+  showTitle?: boolean
+}
+
+export const MenuSection: React.FC<MenuSectionProps> = ({ title, listItems, showTitle = true, ...props }) => {
+  return (
+    <List {...props}>
+      {showTitle ? <ListSubheader>{title}</ListSubheader> : null}
+      {listItems.map((item, index) => (
+        <>
+          <SiteMenuListItem key={index} {...item}></SiteMenuListItem>
+        </>
+      ))}
+    </List>
+  )
+}

package/src/components/SiteMenu/index.ts

@@ -1,3 +1,4 @@
 export * from './hooks'
 export * from './Menu'
 export * from './MenuItems'
+export * from './MenuSection'