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 (
);
};
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 (
);
};
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"];
};