@xyo-network/react-appbar 2.36.2 → 2.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/SiteMenu/MenuItems.d.ts +4 -3
- package/dist/cjs/components/SiteMenu/MenuItems.d.ts.map +1 -1
- package/dist/cjs/components/SiteMenu/MenuItems.js +9 -3
- package/dist/cjs/components/SiteMenu/MenuItems.js.map +1 -1
- package/dist/cjs/components/SiteMenu/MenuListItemEx.d.ts +7 -0
- package/dist/cjs/components/SiteMenu/MenuListItemEx.d.ts.map +1 -0
- package/dist/cjs/components/SiteMenu/{MenuListItemButtonEx.js → MenuListItemEx.js} +6 -6
- package/dist/cjs/components/SiteMenu/MenuListItemEx.js.map +1 -0
- package/dist/cjs/components/SiteMenu/MenuSection.d.ts +2 -2
- package/dist/cjs/components/SiteMenu/MenuSection.d.ts.map +1 -1
- package/dist/cjs/components/SiteMenu/MenuSection.js +2 -1
- package/dist/cjs/components/SiteMenu/MenuSection.js.map +1 -1
- package/dist/docs.json +20387 -2001
- package/dist/esm/components/SiteMenu/MenuItems.d.ts +4 -3
- package/dist/esm/components/SiteMenu/MenuItems.d.ts.map +1 -1
- package/dist/esm/components/SiteMenu/MenuItems.js +9 -3
- package/dist/esm/components/SiteMenu/MenuItems.js.map +1 -1
- package/dist/esm/components/SiteMenu/MenuListItemEx.d.ts +7 -0
- package/dist/esm/components/SiteMenu/MenuListItemEx.d.ts.map +1 -0
- package/dist/esm/components/SiteMenu/{MenuListItemButtonEx.js → MenuListItemEx.js} +4 -4
- package/dist/esm/components/SiteMenu/MenuListItemEx.js.map +1 -0
- package/dist/esm/components/SiteMenu/MenuSection.d.ts +2 -2
- package/dist/esm/components/SiteMenu/MenuSection.d.ts.map +1 -1
- package/dist/esm/components/SiteMenu/MenuSection.js +3 -2
- package/dist/esm/components/SiteMenu/MenuSection.js.map +1 -1
- package/package.json +6 -6
- package/src/components/CollapsibleDrawer/CollapseDrawer.stories.tsx +2 -2
- package/src/components/SiteMenu/MenuItems.tsx +24 -20
- package/src/components/SiteMenu/{MenuListItemButtonEx.tsx → MenuListItemEx.tsx} +5 -5
- package/src/components/SiteMenu/MenuSection.tsx +9 -5
- package/dist/cjs/components/SiteMenu/MenuListItemButtonEx.d.ts +0 -7
- package/dist/cjs/components/SiteMenu/MenuListItemButtonEx.d.ts.map +0 -1
- package/dist/cjs/components/SiteMenu/MenuListItemButtonEx.js.map +0 -1
- package/dist/esm/components/SiteMenu/MenuListItemButtonEx.d.ts +0 -7
- package/dist/esm/components/SiteMenu/MenuListItemButtonEx.d.ts.map +0 -1
- package/dist/esm/components/SiteMenu/MenuListItemButtonEx.js.map +0 -1
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ListItemProps, ListItemTextProps } from '@mui/material';
|
2
|
-
import {
|
2
|
+
import { LinkExProps } from '@xylabs/react-link';
|
3
3
|
import { ReactNode } from 'react';
|
4
4
|
import { To } from 'react-router-dom';
|
5
5
|
import { SiteMenuListItemBase } from './lib';
|
@@ -8,17 +8,18 @@ export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemPro
|
|
8
8
|
to?: To;
|
9
9
|
href?: string;
|
10
10
|
icon?: ReactNode;
|
11
|
-
onButtonClick?:
|
11
|
+
onButtonClick?: LinkExProps['onClick'];
|
12
12
|
subNavListItems?: SubNavListItemProps[];
|
13
13
|
tooltip?: string;
|
14
14
|
subNavOpen?: boolean;
|
15
|
+
iconOnly?: boolean;
|
15
16
|
}
|
16
17
|
export interface SubNavListItemProps {
|
17
18
|
primary: ListItemTextProps['primary'];
|
18
19
|
to?: To;
|
19
20
|
href?: string;
|
20
21
|
icon?: ReactNode;
|
21
|
-
onButtonClick?:
|
22
|
+
onButtonClick?: LinkExProps['onClick'];
|
22
23
|
tooltip?: string;
|
23
24
|
}
|
24
25
|
export declare const SiteMenuListItem: React.FC<SiteMenuListItemProps>;
|
@@ -1 +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,
|
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,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACxD,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,WAAW,CAAC,SAAS,CAAC,CAAA;IACtC,eAAe,CAAC,EAAE,mBAAmB,EAAE,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;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,WAAW,CAAC,SAAS,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiE5D,CAAA"}
|
@@ -1,20 +1,26 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { Collapse, IconButton, List, Tooltip, useTheme } from '@mui/material';
|
3
3
|
import { FlexCol, FlexRow } from '@xylabs/react-flexbox';
|
4
|
+
import { LinkEx } from '@xylabs/react-link';
|
4
5
|
import { useState } from 'react';
|
5
6
|
import { VscChevronDown, VscInfo } from 'react-icons/vsc';
|
6
7
|
import { useCollapsible } from '../../contexts';
|
7
8
|
import { MenuIcon } from './MenuIcon';
|
8
9
|
import { MenuListItem } from './MenuListItem';
|
9
|
-
import {
|
10
|
+
import { MenuListItemEx } from './MenuListItemEx';
|
10
11
|
import { MenuListItemText } from './MenuListItemText';
|
11
|
-
export const SiteMenuListItem = ({ style, subNavListItems, iconOnly, tooltip,
|
12
|
+
export const SiteMenuListItem = ({ style, subNavListItems, iconOnly, tooltip, icon, primary, onButtonClick, to, ...props }) => {
|
12
13
|
const { dense } = props;
|
13
14
|
const theme = useTheme();
|
14
15
|
const { collapse } = useCollapsible();
|
15
16
|
const [openSubNav, setOpenSubNav] = useState(false);
|
16
17
|
const [hovered, setHovered] = useState(false);
|
17
|
-
return (_jsxs(MenuListItem, { disableGutters: true, style: { whiteSpace: 'nowrap', ...style }, iconOnly: iconOnly, ...props, children: [_jsxs(
|
18
|
+
return (_jsxs(MenuListItem, { disableGutters: true, style: { whiteSpace: 'nowrap', ...style }, iconOnly: iconOnly, ...props, children: [_jsxs(MenuListItemEx, { iconOnly: iconOnly, onClick: onButtonClick, dense: dense, sx: { justifyContent: 'space-between' }, children: [_jsxs(FlexRow, { children: [_jsx(MenuIcon, { icon: icon, paddingRight: theme.spacing(1), color: hovered ? 'secondary' : 'inherit' }), _jsx(LinkEx, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), color: "inherit", to: to, sx: {
|
19
|
+
'& :hover': {
|
20
|
+
cursor: 'pointer',
|
21
|
+
textDecoration: 'underline',
|
22
|
+
},
|
23
|
+
}, children: _jsx(MenuListItemText, { primary: primary, iconOnly: iconOnly }) })] }), _jsxs(FlexRow, { style: { marginLeft: theme.spacing(1) }, children: [subNavListItems ? (_jsx(IconButton, { onClick: () => setOpenSubNav(!openSubNav), sx: { marginRight: theme.spacing(0.5) }, 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) => {
|
18
24
|
return _jsx(SiteMenuListItem, { sx: { pl: theme.spacing(1) }, ...item }, index);
|
19
25
|
}) }) })) : null] }));
|
20
26
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAoC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;
|
1
|
+
{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuItems.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { ListItemProps } from '@mui/material';
|
3
|
+
import { SiteMenuListItemBase } from './lib';
|
4
|
+
export interface ListItemExProps extends SiteMenuListItemBase, ListItemProps {
|
5
|
+
}
|
6
|
+
export declare const MenuListItemEx: React.FC<ListItemExProps>;
|
7
|
+
//# sourceMappingURL=MenuListItemEx.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuListItemEx.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAA;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,EAAE,aAAa;CAAG;AAE/E,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYpD,CAAA"}
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import {
|
3
|
-
export const
|
2
|
+
import { ListItem } from '@mui/material';
|
3
|
+
export const MenuListItemEx = ({ iconOnly, collapseEnd, sx, children, ...props }) => {
|
4
4
|
const dense = props;
|
5
5
|
const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0 } : {};
|
6
6
|
// wait till collapseEnds to remove the spacing between items
|
7
7
|
const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 };
|
8
8
|
// adjusts to the paddingY value which does NOT scale along the theme.spacing
|
9
9
|
const paddingSx = dense ? { px: '8px' } : { px: '12px' };
|
10
|
-
return (_jsx(
|
10
|
+
return (_jsx(ListItem, { sx: { ...listItemButtonSx, ...spacingSx, ...paddingSx, ...sx }, ...props, children: children }));
|
11
11
|
};
|
12
|
-
//# sourceMappingURL=
|
12
|
+
//# sourceMappingURL=MenuListItemEx.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuListItemEx.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,eAAe,CAAA;AAMvD,MAAM,CAAC,MAAM,cAAc,GAA8B,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7G,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,QAAQ,IAAC,EAAE,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,EAAE,KAAM,KAAK,YAChF,QAAQ,GACA,CACZ,CAAA;AACH,CAAC,CAAA"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import {
|
2
|
+
import { FlexBoxProps } from '@xylabs/react-flexbox';
|
3
3
|
import { SiteMenuListItemProps } from './MenuItems';
|
4
|
-
export interface MenuSectionProps extends
|
4
|
+
export interface MenuSectionProps extends FlexBoxProps {
|
5
5
|
title: string;
|
6
6
|
listItems: SiteMenuListItemProps[];
|
7
7
|
showTitle?: boolean;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuSection.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";
|
1
|
+
{"version":3,"file":"MenuSection.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAErE,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,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,CAclD,CAAA"}
|
@@ -1,7 +1,8 @@
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import {
|
2
|
+
import { Collapse, ListSubheader } from '@mui/material';
|
3
|
+
import { FlexCol } from '@xylabs/react-flexbox';
|
3
4
|
import { SiteMenuListItem } from './MenuItems';
|
4
5
|
export const MenuSection = ({ title, listItems, showTitle = true, ...props }) => {
|
5
|
-
return (_jsxs(
|
6
|
+
return (_jsxs(FlexCol, { alignItems: "stretch", ...props, children: [_jsx(Collapse, { in: showTitle, timeout: 700, children: _jsx(ListSubheader, { children: title }) }), listItems.map((item, index) => (_jsx(_Fragment, { children: _jsx(SiteMenuListItem, { ...item }, index) })))] }));
|
6
7
|
};
|
7
8
|
//# sourceMappingURL=MenuSection.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuSection.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"MenuSection.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,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,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aACrC,KAAC,QAAQ,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YACnC,KAAC,aAAa,cAAE,KAAK,GAAiB,GAC7B,EAEV,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,4BACE,KAAC,gBAAgB,OAAiB,IAAI,IAAf,KAAK,CAA+B,GAC1D,CACJ,CAAC,IACM,CACX,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
@@ -16,11 +16,11 @@
|
|
16
16
|
"@xylabs/react-flexbox": "^2.14.20",
|
17
17
|
"@xylabs/react-link": "^2.14.20",
|
18
18
|
"@xylabs/react-shared": "^2.14.20",
|
19
|
-
"@xyo-network/react-app-settings": "^2.
|
20
|
-
"@xyo-network/react-archive": "^2.
|
21
|
-
"@xyo-network/react-auth-sets": "^2.
|
22
|
-
"@xyo-network/react-network": "^2.
|
23
|
-
"@xyo-network/react-shared": "^2.
|
19
|
+
"@xyo-network/react-app-settings": "^2.37.0",
|
20
|
+
"@xyo-network/react-archive": "^2.37.0",
|
21
|
+
"@xyo-network/react-auth-sets": "^2.37.0",
|
22
|
+
"@xyo-network/react-network": "^2.37.0",
|
23
|
+
"@xyo-network/react-shared": "^2.37.0",
|
24
24
|
"tslib": "^2.4.0"
|
25
25
|
},
|
26
26
|
"peerDependencies": {
|
@@ -77,5 +77,5 @@
|
|
77
77
|
},
|
78
78
|
"sideEffects": false,
|
79
79
|
"types": "dist/esm/index.d.ts",
|
80
|
-
"version": "2.
|
80
|
+
"version": "2.37.0"
|
81
81
|
}
|
@@ -33,11 +33,11 @@ const Template: ComponentStory<typeof CollapsibleDrawer> = (args) => {
|
|
33
33
|
const theme = useTheme()
|
34
34
|
return (
|
35
35
|
<>
|
36
|
-
<FlexGrowCol alignItems="start"
|
36
|
+
<FlexGrowCol alignItems="start">
|
37
37
|
<CollapsibleDrawer in={!collapse} orientation="horizontal" collapsedSize={theme.spacing(5)} onExited={() => setCollapseEnd?.(true)} {...args}>
|
38
38
|
<MenuSection title="Explore & Create" listItems={menuDataTop} showTitle={!collapse} />
|
39
39
|
<MenuSection title="Settings & Analytics" listItems={menuDataBottom} showTitle={!collapse} />
|
40
|
-
<FlexGrowCol />
|
40
|
+
<FlexGrowCol height="100%" />
|
41
41
|
<CollapseToggleFlex justifyContent="start" />
|
42
42
|
</CollapsibleDrawer>
|
43
43
|
</FlexGrowCol>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Collapse, IconButton, List, ListItemProps, ListItemTextProps, Tooltip, useTheme } from '@mui/material'
|
2
2
|
import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
|
3
|
-
import {
|
3
|
+
import { LinkEx, LinkExProps } from '@xylabs/react-link'
|
4
4
|
import { ReactNode, useState } from 'react'
|
5
5
|
import { VscChevronDown, VscInfo } from 'react-icons/vsc'
|
6
6
|
import { To } from 'react-router-dom'
|
@@ -9,7 +9,7 @@ import { useCollapsible } from '../../contexts'
|
|
9
9
|
import { SiteMenuListItemBase } from './lib'
|
10
10
|
import { MenuIcon } from './MenuIcon'
|
11
11
|
import { MenuListItem } from './MenuListItem'
|
12
|
-
import {
|
12
|
+
import { MenuListItemEx } from './MenuListItemEx'
|
13
13
|
import { MenuListItemText } from './MenuListItemText'
|
14
14
|
|
15
15
|
export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemProps {
|
@@ -17,10 +17,11 @@ export interface SiteMenuListItemProps extends SiteMenuListItemBase, ListItemPro
|
|
17
17
|
to?: To
|
18
18
|
href?: string
|
19
19
|
icon?: ReactNode
|
20
|
-
onButtonClick?:
|
20
|
+
onButtonClick?: LinkExProps['onClick']
|
21
21
|
subNavListItems?: SubNavListItemProps[]
|
22
22
|
tooltip?: string
|
23
23
|
subNavOpen?: boolean
|
24
|
+
iconOnly?: boolean
|
24
25
|
}
|
25
26
|
|
26
27
|
export interface SubNavListItemProps {
|
@@ -28,7 +29,7 @@ export interface SubNavListItemProps {
|
|
28
29
|
to?: To
|
29
30
|
href?: string
|
30
31
|
icon?: ReactNode
|
31
|
-
onButtonClick?:
|
32
|
+
onButtonClick?: LinkExProps['onClick']
|
32
33
|
tooltip?: string
|
33
34
|
}
|
34
35
|
|
@@ -37,7 +38,6 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
|
|
37
38
|
subNavListItems,
|
38
39
|
iconOnly,
|
39
40
|
tooltip,
|
40
|
-
collapseEnd,
|
41
41
|
icon,
|
42
42
|
primary,
|
43
43
|
onButtonClick,
|
@@ -51,23 +51,27 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
|
|
51
51
|
const [hovered, setHovered] = useState(false)
|
52
52
|
return (
|
53
53
|
<MenuListItem disableGutters style={{ whiteSpace: 'nowrap', ...style }} iconOnly={iconOnly} {...props}>
|
54
|
-
<
|
55
|
-
iconOnly={iconOnly}
|
56
|
-
onClick={onButtonClick}
|
57
|
-
collapseEnd={collapseEnd}
|
58
|
-
dense={dense}
|
59
|
-
to={to}
|
60
|
-
sx={{ justifyContent: 'space-between' }}
|
61
|
-
onMouseEnter={() => setHovered(true)}
|
62
|
-
onMouseLeave={() => setHovered(false)}
|
63
|
-
>
|
54
|
+
<MenuListItemEx iconOnly={iconOnly} onClick={onButtonClick} dense={dense} sx={{ justifyContent: 'space-between' }}>
|
64
55
|
<FlexRow>
|
65
|
-
<MenuIcon icon={icon} paddingRight={theme.spacing(1)} color={hovered ? '
|
66
|
-
<
|
56
|
+
<MenuIcon icon={icon} paddingRight={theme.spacing(1)} color={hovered ? 'secondary' : 'inherit'} />
|
57
|
+
<LinkEx
|
58
|
+
onMouseEnter={() => setHovered(true)}
|
59
|
+
onMouseLeave={() => setHovered(false)}
|
60
|
+
color="inherit"
|
61
|
+
to={to}
|
62
|
+
sx={{
|
63
|
+
'& :hover': {
|
64
|
+
cursor: 'pointer',
|
65
|
+
textDecoration: 'underline',
|
66
|
+
},
|
67
|
+
}}
|
68
|
+
>
|
69
|
+
<MenuListItemText primary={primary} iconOnly={iconOnly} />
|
70
|
+
</LinkEx>
|
67
71
|
</FlexRow>
|
68
|
-
<FlexRow>
|
72
|
+
<FlexRow style={{ marginLeft: theme.spacing(1) }}>
|
69
73
|
{subNavListItems ? (
|
70
|
-
<IconButton onClick={() => setOpenSubNav(!openSubNav)} sx={{ marginRight: theme.spacing(
|
74
|
+
<IconButton onClick={() => setOpenSubNav(!openSubNav)} sx={{ marginRight: theme.spacing(0.5) }}>
|
71
75
|
<VscChevronDown fontSize="16px" />
|
72
76
|
</IconButton>
|
73
77
|
) : null}
|
@@ -82,7 +86,7 @@ export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({
|
|
82
86
|
</Tooltip>
|
83
87
|
) : null}
|
84
88
|
</FlexRow>
|
85
|
-
</
|
89
|
+
</MenuListItemEx>
|
86
90
|
{subNavListItems ? (
|
87
91
|
<Collapse in={collapse == true ? false : openSubNav}>
|
88
92
|
<List>
|
@@ -1,10 +1,10 @@
|
|
1
|
-
import {
|
1
|
+
import { ListItem, ListItemProps } from '@mui/material'
|
2
2
|
|
3
3
|
import { SiteMenuListItemBase } from './lib'
|
4
4
|
|
5
|
-
export interface
|
5
|
+
export interface ListItemExProps extends SiteMenuListItemBase, ListItemProps {}
|
6
6
|
|
7
|
-
export const
|
7
|
+
export const MenuListItemEx: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, ...props }) => {
|
8
8
|
const dense = props
|
9
9
|
const listItemButtonSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0 } : {}
|
10
10
|
// wait till collapseEnds to remove the spacing between items
|
@@ -12,8 +12,8 @@ export const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps> = ({ icon
|
|
12
12
|
// adjusts to the paddingY value which does NOT scale along the theme.spacing
|
13
13
|
const paddingSx = dense ? { px: '8px' } : { px: '12px' }
|
14
14
|
return (
|
15
|
-
<
|
15
|
+
<ListItem sx={{ ...listItemButtonSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>
|
16
16
|
{children}
|
17
|
-
</
|
17
|
+
</ListItem>
|
18
18
|
)
|
19
19
|
}
|
@@ -1,8 +1,9 @@
|
|
1
|
-
import {
|
1
|
+
import { Collapse, ListSubheader } from '@mui/material'
|
2
|
+
import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
|
2
3
|
|
3
4
|
import { SiteMenuListItem, SiteMenuListItemProps } from './MenuItems'
|
4
5
|
|
5
|
-
export interface MenuSectionProps extends
|
6
|
+
export interface MenuSectionProps extends FlexBoxProps {
|
6
7
|
title: string
|
7
8
|
listItems: SiteMenuListItemProps[]
|
8
9
|
showTitle?: boolean
|
@@ -10,13 +11,16 @@ export interface MenuSectionProps extends ListProps {
|
|
10
11
|
|
11
12
|
export const MenuSection: React.FC<MenuSectionProps> = ({ title, listItems, showTitle = true, ...props }) => {
|
12
13
|
return (
|
13
|
-
<
|
14
|
-
{showTitle
|
14
|
+
<FlexCol alignItems="stretch" {...props}>
|
15
|
+
<Collapse in={showTitle} timeout={700}>
|
16
|
+
<ListSubheader>{title}</ListSubheader>
|
17
|
+
</Collapse>
|
18
|
+
|
15
19
|
{listItems.map((item, index) => (
|
16
20
|
<>
|
17
21
|
<SiteMenuListItem key={index} {...item}></SiteMenuListItem>
|
18
22
|
</>
|
19
23
|
))}
|
20
|
-
</
|
24
|
+
</FlexCol>
|
21
25
|
)
|
22
26
|
}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import { ListItemButtonExProps } from '@xyo-network/react-shared';
|
3
|
-
import { SiteMenuListItemBase } from './lib';
|
4
|
-
export interface MenuListItemButtonExProps extends SiteMenuListItemBase, ListItemButtonExProps {
|
5
|
-
}
|
6
|
-
export declare const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps>;
|
7
|
-
//# sourceMappingURL=MenuListItemButtonEx.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"MenuListItemButtonEx.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,yBAA0B,SAAQ,oBAAoB,EAAE,qBAAqB;CAAG;AAEjG,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAYpE,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"MenuListItemButtonEx.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";;;;;AAAA,4DAAmF;AAM5E,MAAM,oBAAoB,GAAwC,CAAC,EAAiD,EAAE,EAAE;QAArD,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAA/C,6CAAiD,CAAF;IACvH,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,uBAAC,+BAAgB,kBAAC,EAAE,8DAAO,gBAAgB,GAAK,SAAS,GAAK,SAAS,GAAK,EAAE,KAAQ,KAAK,cACxF,QAAQ,IACQ,CACpB,CAAA;AACH,CAAC,CAAA;AAZY,QAAA,oBAAoB,wBAYhC"}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import { ListItemButtonExProps } from '@xyo-network/react-shared';
|
3
|
-
import { SiteMenuListItemBase } from './lib';
|
4
|
-
export interface MenuListItemButtonExProps extends SiteMenuListItemBase, ListItemButtonExProps {
|
5
|
-
}
|
6
|
-
export declare const MenuListItemButtonEx: React.FC<MenuListItemButtonExProps>;
|
7
|
-
//# sourceMappingURL=MenuListItemButtonEx.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"MenuListItemButtonEx.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,WAAW,yBAA0B,SAAQ,oBAAoB,EAAE,qBAAqB;CAAG;AAEjG,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAYpE,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"MenuListItemButtonEx.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/MenuListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,2BAA2B,CAAA;AAMnF,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EAAE,QAAQ,EAAE,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"}
|