}>
-
-
-
-
-
- )}
- {page.name && }
-
- );
- }
- case "title": {
- return (
-
- {page.name}
-
- );
- }
- default:
- return null;
- }
- })}
-
- );
- })}
-
-
-
-
-
-
-
-
-
-
+
+
);
};
const mapState = (state: AppState) => ({
sidebarOpen: state.system.sidebarOpen,
operatorMode: state.system.operatorMode,
- distributedSetup: state.system.distributedSetup,
features: state.console.session.features,
});
const connector = connect(mapState, {
userLoggedIn,
setMenuOpen,
- resetSession,
});
export default connector(withStyles(styles)(Menu));
diff --git a/portal-ui/src/screens/Console/Menu/MenuItem.tsx b/portal-ui/src/screens/Console/Menu/MenuItem.tsx
new file mode 100644
index 000000000..5d4f03097
--- /dev/null
+++ b/portal-ui/src/screens/Console/Menu/MenuItem.tsx
@@ -0,0 +1,62 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React, { Suspense } from "react";
+import { ListItem, ListItemIcon, ListItemText, Tooltip } from "@mui/material";
+import {
+ menuItemContainerStyles,
+ menuItemIconStyles,
+ menuItemTextStyles,
+} from "./MenuStyleUtils";
+
+const MenuItem = ({
+ page,
+ stateClsName = "",
+}: {
+ page: any;
+ stateClsName?: string;
+}) => {
+ return (
+
+ {page.icon && (
+
+
+ ...}>
+
+
+
+
+ )}
+ {page.name && (
+
+ )}
+
+ );
+};
+
+export default MenuItem;
diff --git a/portal-ui/src/screens/Console/Menu/MenuList.tsx b/portal-ui/src/screens/Console/Menu/MenuList.tsx
new file mode 100644
index 000000000..824948cac
--- /dev/null
+++ b/portal-ui/src/screens/Console/Menu/MenuList.tsx
@@ -0,0 +1,114 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React from "react";
+import MenuItem from "./MenuItem";
+import { Box } from "@mui/material";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import LogoutIcon from "../../../icons/LogoutIcon";
+import ListItemText from "@mui/material/ListItemText";
+import List from "@mui/material/List";
+import { IMenuItem } from "./types";
+import {
+ menuItemContainerStyles,
+ menuItemIconStyles,
+ menuItemTextStyles,
+} from "./MenuStyleUtils";
+
+const MenuList = ({
+ menuItems,
+ onLogoutClick,
+ isOpen,
+}: {
+ menuItems: IMenuItem[];
+ isOpen: boolean;
+ onLogoutClick: () => void;
+}) => {
+ const stateClsName = isOpen ? "wide" : "mini";
+
+ return (
+
+
+
+ {(menuItems || []).map((page: IMenuItem) => {
+ switch (page.type) {
+ case "item": {
+ return (
+
+ );
+ }
+ default:
+ return null;
+ }
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MenuList;
diff --git a/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx b/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx
new file mode 100644
index 000000000..09253d480
--- /dev/null
+++ b/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx
@@ -0,0 +1,61 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+export const menuItemContainerStyles: any = {
+ paddingLeft: 0,
+ paddingBottom: "18px",
+ "&.active div:nth-of-type(1)": {
+ border: "2px solid #ffffff",
+ },
+ "&:hover": {
+ background: "none",
+ "& div:nth-of-type(1)": {
+ background: "#073052",
+ "& svg": {
+ fill: "#ffffff",
+ },
+ },
+ },
+};
+export const menuItemIconStyles: any = {
+ width: 37,
+ minWidth: 37,
+ height: 37,
+ background: "#00274D",
+ border: "2px solid #002148",
+ display: "flex",
+ alignItems: "center",
+ borderRadius: "50%",
+ justifyContent: "center",
+
+ "& svg": {
+ width: 16,
+ height: 16,
+ fill: "#8399AB",
+ },
+};
+
+export const menuItemTextStyles: any = {
+ color: "#BCC7D1",
+ fontSize: "14px",
+ marginLeft: "11px",
+ "& span": {
+ fontSize: "14px",
+ },
+ "&.mini": {
+ display: "none",
+ },
+};
diff --git a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx
new file mode 100644
index 000000000..6e26f683f
--- /dev/null
+++ b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx
@@ -0,0 +1,115 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import React, { Suspense } from "react";
+import OperatorLogo from "../../../icons/OperatorLogo";
+import ConsoleLogo from "../../../icons/ConsoleLogo";
+import { VersionIcon } from "../../../icons";
+import { Box, IconButton } from "@mui/material";
+import { ChevronLeft } from "@mui/icons-material";
+import MenuIcon from "@mui/icons-material/Menu";
+
+type MenuToggleProps = {
+ isOpen: boolean;
+ isOperatorMode: boolean;
+ onToggle: (nextState: boolean) => void;
+};
+const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => {
+ const stateClsName = isOpen ? "wide" : "mini";
+
+ return (
+
+ {isOpen ? (
+
+ {isOperatorMode ? : }
+
+ ) : (
+
+ ...
}>
+
+
+
+ )}
+
+ {
+ if (isOpen) {
+ onToggle(false);
+ } else {
+ onToggle(true);
+ }
+ }}
+ size="small"
+ >
+ {isOpen ? : }
+
+
+ );
+};
+
+export default MenuToggle;
diff --git a/portal-ui/src/screens/Console/Menu/utils.ts b/portal-ui/src/screens/Console/Menu/utils.ts
deleted file mode 100644
index e43485cba..000000000
--- a/portal-ui/src/screens/Console/Menu/utils.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see .
-
-export const menuGroups = [
- { label: "", group: "common", collapsible: false },
- { label: "User", group: "User", collapsible: true },
- { label: "Admin", group: "Admin", collapsible: true },
- { label: "Tools", group: "Tools", collapsible: true },
- { label: "Operator", group: "Operator", collapsible: false },
- { label: "", group: "License", collapsible: false },
-];