diff --git a/.changeset/short-donkeys-double.md b/.changeset/short-donkeys-double.md new file mode 100644 index 0000000000..0e63f464a5 --- /dev/null +++ b/.changeset/short-donkeys-double.md @@ -0,0 +1,16 @@ +--- +"@comet/admin": minor +--- + +Add `MenuItemGroup` component to group menu items + +**Example:** + +```tsx + + } to="/menu-item-1" /> + } to="/menu-item-2" /> + } to="/menu-item-3" /> + { /* Some more menu items... */ } + +``` \ No newline at end of file diff --git a/demo/admin/src/common/MasterMenu.tsx b/demo/admin/src/common/MasterMenu.tsx index a588e2d180..c4199016d5 100644 --- a/demo/admin/src/common/MasterMenu.tsx +++ b/demo/admin/src/common/MasterMenu.tsx @@ -1,5 +1,6 @@ -import { Menu, MenuCollapsibleItem, MenuContext, MenuItemRouterLink, useWindowSize } from "@comet/admin"; +import { Menu, MenuCollapsibleItem, MenuContext, MenuItemGroup, MenuItemRouterLink, useWindowSize } from "@comet/admin"; import { Assets, Dashboard, Data, PageTree, Snips, Wrench } from "@comet/admin-icons"; +import { useContentScope } from "@comet/cms-admin"; import * as React from "react"; import { useIntl } from "react-intl"; import { useRouteMatch } from "react-router"; @@ -11,7 +12,7 @@ const MasterMenu: React.FC = () => { const windowSize = useWindowSize(); const intl = useIntl(); const match = useRouteMatch(); - + const { scope } = useContentScope(); const useTemporaryMenu: boolean = windowSize.width < permanentMenuMinWidth; // Open menu when changing to permanent variant and close when changing to temporary variant. @@ -23,71 +24,84 @@ const MasterMenu: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [location]); + const sectionScopeTitle = `${scope?.domain.charAt(0).toUpperCase() + scope?.domain.slice(1)} - ${scope?.language?.toUpperCase()}`; + return ( - } - to={`${match.url}/dashboard`} - /> - }> + } + to={`${match.url}/dashboard`} /> - - + }> + + + - }> - - - } - to={`${match.url}/assets`} - /> - }> - - - }> + } + > + + + + }> + + + }> + } /> + } /> + } /> + } /> + + + } + to={`${match.url}/assets`} /> + }> + + + + } /> } /> - - } - /> - }> - } /> - } /> - } /> - } /> - - } - /> + ); }; diff --git a/packages/admin/admin-stories/src/admin/mui/Menu.tsx b/packages/admin/admin-stories/src/admin/mui/Menu.tsx index 40d9919280..71273bc7a0 100644 --- a/packages/admin/admin-stories/src/admin/mui/Menu.tsx +++ b/packages/admin/admin-stories/src/admin/mui/Menu.tsx @@ -8,6 +8,7 @@ import { Menu, MenuCollapsibleItem, MenuItemAnchorLink, + MenuItemGroup, MenuItemRouterLink, useWindowSize, } from "@comet/admin"; @@ -26,24 +27,28 @@ const AppMenu: React.FC = () => { return ( - } to="/dashboard" /> - } to="/settings" /> - }> - - - - }> - - - - } - secondaryAction={} - /> + + } to="/dashboard" /> + }> + + + + }> + + + + + + } to="/settings" /> + } + secondaryAction={} + /> + ); }; diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index 7fa4f7306e..490edb809c 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -105,6 +105,7 @@ export { MenuCollapsibleItem, MenuCollapsibleItemClassKey, MenuCollapsibleItemPr export { IMenuContext, IWithMenu, MenuContext, withMenu } from "./mui/menu/Context"; export { MenuItem, MenuItemClassKey, MenuItemProps } from "./mui/menu/Item"; export { MenuItemAnchorLink } from "./mui/menu/ItemAnchorLink"; +export { MenuItemGroup, MenuItemGroupClassKey, MenuItemGroupProps } from "./mui/menu/ItemGroup"; export { MenuItemRouterLink, MenuItemRouterLinkProps } from "./mui/menu/ItemRouterLink"; export { Menu, MenuProps } from "./mui/menu/Menu"; export { MenuClassKey, styles } from "./mui/menu/Menu.styles"; diff --git a/packages/admin/admin/src/mui/menu/ItemGroup.tsx b/packages/admin/admin/src/mui/menu/ItemGroup.tsx new file mode 100644 index 0000000000..6c41d587af --- /dev/null +++ b/packages/admin/admin/src/mui/menu/ItemGroup.tsx @@ -0,0 +1,51 @@ +import { Box, ComponentsOverrides, Theme, Typography } from "@mui/material"; +import { createStyles, WithStyles, withStyles } from "@mui/styles"; +import * as React from "react"; + +export type MenuItemGroupClassKey = "root" | "title"; + +const styles = (theme: Theme) => + createStyles({ + root: { marginTop: theme.spacing(8) }, + title: { + fontWeight: theme.typography.fontWeightBold, + fontSize: 14, + lineHeight: "20px", + borderBottom: `1px solid ${theme.palette.grey[50]}`, + padding: theme.spacing(2, 4), + }, + }); + +export interface MenuItemGroupProps { + title?: React.ReactNode; +} + +const ItemGroup: React.FC & MenuItemGroupProps>> = ({ title, children, classes }) => { + return ( + + + {title} + + {children} + + ); +}; + +export const MenuItemGroup = withStyles(styles, { name: "CometAdminMenuItemGroup" })(ItemGroup); + +declare module "@mui/material/styles" { + interface ComponentsPropsList { + CometAdminMenuItemGroup: MenuItemGroupProps; + } + + interface ComponentNameToClassKey { + CometAdminMenuItemGroup: MenuItemGroupClassKey; + } + + interface Components { + CometAdminMenuItemGroup?: { + defaultProps?: ComponentsPropsList["CometAdminMenuItemGroup"]; + styleOverrides?: ComponentsOverrides["CometAdminMenuItemGroup"]; + }; + } +} diff --git a/packages/admin/admin/src/mui/menu/Menu.tsx b/packages/admin/admin/src/mui/menu/Menu.tsx index ed220ee34d..b505dc390f 100644 --- a/packages/admin/admin/src/mui/menu/Menu.tsx +++ b/packages/admin/admin/src/mui/menu/Menu.tsx @@ -112,7 +112,7 @@ declare module "@mui/material/styles" { } interface Components { - CometAdminenu?: { + CometAdminMenu?: { defaultProps?: ComponentsPropsList["CometAdminMenu"]; styleOverrides?: ComponentsOverrides["CometAdminMenu"]; };