aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/layout4/page.tsx

@@ -1,125 +1,125 @@
-import { Layout, theme, ConfigProvider } from "antd";
-import React, { useEffect, useRef, useState, useMemo } from "react";
-import DocumentTitle from "react-document-title";
-import { useSessionStorageState } from "ahooks";
-import { generate } from "@ant-design/colors";
-import Header from "./header";
-import Sider from "./sider";
-import Main from "./main";
-import { useVarCssColor } from "../hooks/useVarCssColor";
-import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
-import { MenuType } from "../layout2/type/layout-type";
-import Units from '../units';
-import { useLocale } from "../locale/useLocale";
-import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
-import { getMenuConfig, routeNavigationThemeHome } from "../layout2/page";
-import homePng from "./imgs/home.png";
-import { ThemeConfig } from "../tmpl/interface";
-import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
-import { KeepAliveTabContext } from '../layout2/tabs/tabs-context';
-import "./css/main.less";
-
-const { useToken } = theme;
-
-type PagePropsType = {
-  children?: React.ReactNode;
-  logo?: string;
-};
-
-const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
-  const { logo } = props;
-  const [systemName, setSystemName] = useState("");
-  const [systemLogo, setSystemLogo] = useState("");
-  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
-  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
-  const [menu, setMenu] = useState<MenuType[]>([]);
-  const pageRef = useRef<HTMLDivElement>(undefined); // page ref
-  //清空缓存
-  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
-  const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { getSiderCollapsed, compactTheme } = useLocale();
-  const { token: { colorPrimary } } = useToken();
-  const { pathname } = useLocation();
-  const navigate = useNavigate();
-  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
-
-  const getThemeConfigAndMenuConfig = async () => {
-    const tConfig = await Units.getThemeConfig();
-    const menuConfig = await getMenuConfig("v4");
-    setSystemName(tConfig?.programName || menuConfig?.systemName);
-    setSystemLogo(tConfig?.programIcon || homePng);
-    setMenu(menuConfig?.menu);
-    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
-    setThemeConfig(tConfig);
-    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab, "v4");
-    setCustomHome(temCustomHome);
-  };
-
-  useEffect(() => {
-    getThemeConfigAndMenuConfig();
-    useVarCssColor(generate(colorPrimary));
-    localStorage.setItem("version", "v4");
-    window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
-  }, []);
-
-  const keepAliveContextValue = useMemo(
-    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
-    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
-  );
-
-  return (
-    <DocumentTitle title={documentTitle || ""}>
-      <div
-        ref={pageRef}
-        className="v4-main"
-      >
-        <ConfigProvider
-          getPopupContainer={() => pageRef.current}
-          theme={{
-            algorithm: compactTheme ? [theme.darkAlgorithm, theme.compactAlgorithm] : [theme.darkAlgorithm],
-            token: {
-              colorBgBase: "#001325",
-              colorBorderSecondary: "#17375e",
-              colorPrimary: "#00D2FF",
-              colorLink: "#00D2FF",
-              colorTextPlaceholder: "rgba(255,255,255,0.4)",
-              colorTextDisabled: "rgba(255,255,255,0.4)"
-            },
-            components: {
-              Tabs: {
-                cardPadding: "4px 12px"
-              },
-              Button: {
-                colorPrimary: "#00d0ffe0"
-              }
-            }
-          }}
-          table={{ className: "v4-antd-table" }}
-          drawer={{ className: "v4-antd-drawer" }}
-          modal={{ className: "v4-antd-modal" }}
-          card={{ className: "v4-antd-card" }}
-        >
-          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
-            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-              <Header themeConfig={themeConfig} logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu} customHome={customHome} />
-              <Layout>
-                <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
-                <Main menuList={menu}>{props.children}</Main>
-              </Layout>
-            </Layout>
-          </KeepAliveTabContext.Provider>
-        </ConfigProvider>
-      </div>
-    </DocumentTitle >
-  );
-};
-
-const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
-  return (
-    <LayoutProvider>
-      <Page {...props}>{props.children}</Page>
-    </LayoutProvider>
-  );
-};
-
-export default ContextPage;
+import { Layout, theme, ConfigProvider } from "antd";
+import React, { useEffect, useRef, useState, useMemo } from "react";
+import DocumentTitle from "react-document-title";
+import { useSessionStorageState } from "ahooks";
+import { generate } from "@ant-design/colors";
+import Header from "./header";
+import Sider from "./sider";
+import Main from "./main";
+import { useVarCssColor } from "../hooks/useVarCssColor";
+import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
+import { MenuType } from "../layout2/type/layout-type";
+import Units from '../units';
+import { useLocale } from "../locale/useLocale";
+import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
+import { getMenuConfig, routeNavigationThemeHome } from "../layout2/page";
+import homePng from "./imgs/home.png";
+import { ThemeConfig } from "../tmpl/interface";
+import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
+import { KeepAliveTabContext } from '../layout2/tabs/tabs-context';
+import "./css/main.less";
+
+const { useToken } = theme;
+
+type PagePropsType = {
+  children?: React.ReactNode;
+  logo?: string;
+};
+
+const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
+  const { logo } = props;
+  const [systemName, setSystemName] = useState("");
+  const [systemLogo, setSystemLogo] = useState("");
+  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
+  const [menu, setMenu] = useState<MenuType[]>([]);
+  const pageRef = useRef<HTMLDivElement>(undefined); // page ref
+  //清空缓存
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
+  const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { getSiderCollapsed, compactTheme } = useLocale();
+  const { token: { colorPrimary } } = useToken();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
+
+  const getThemeConfigAndMenuConfig = async () => {
+    const tConfig = await Units.getThemeConfig();
+    const menuConfig = await getMenuConfig("v4");
+    setSystemName(tConfig?.programName || menuConfig?.systemName);
+    setSystemLogo(tConfig?.programIcon || homePng);
+    setMenu(menuConfig?.menu);
+    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+    setThemeConfig(tConfig);
+    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab, "v4");
+    setCustomHome(temCustomHome);
+  };
+
+  useEffect(() => {
+    getThemeConfigAndMenuConfig();
+    useVarCssColor(generate(colorPrimary));
+    localStorage.setItem("version", "v4");
+    window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
+  }, []);
+
+  const keepAliveContextValue = useMemo(
+    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
+    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
+  );
+
+  return (
+    <DocumentTitle title={documentTitle || ""}>
+      <div
+        ref={pageRef}
+        className="v4-main"
+      >
+        <ConfigProvider
+          getPopupContainer={() => pageRef.current}
+          theme={{
+            algorithm: compactTheme ? [theme.darkAlgorithm, theme.compactAlgorithm] : [theme.darkAlgorithm],
+            token: {
+              colorBgBase: "#001325",
+              colorBorderSecondary: "#17375e",
+              colorPrimary: "#00D2FF",
+              colorLink: "#00D2FF",
+              colorTextPlaceholder: "rgba(255,255,255,0.4)",
+              colorTextDisabled: "rgba(255,255,255,0.4)"
+            },
+            components: {
+              Tabs: {
+                cardPadding: "4px 12px"
+              },
+              Button: {
+                colorPrimary: "#00d0ffe0"
+              }
+            }
+          }}
+          table={{ className: "v4-antd-table" }}
+          drawer={{ className: "v4-antd-drawer" }}
+          modal={{ className: "v4-antd-modal" }}
+          card={{ className: "v4-antd-card" }}
+        >
+          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
+              <Header themeConfig={themeConfig} logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu} customHome={customHome} />
+              <Layout>
+                <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+                <Main menuList={menu}>{props.children}</Main>
+              </Layout>
+            </Layout>
+          </KeepAliveTabContext.Provider>
+        </ConfigProvider>
+      </div>
+    </DocumentTitle >
+  );
+};
+
+const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
+  return (
+    <LayoutProvider>
+      <Page {...props}>{props.children}</Page>
+    </LayoutProvider>
+  );
+};
+
+export default ContextPage;

package/src/aldehyde/layout4/sider.tsx

@@ -1,201 +1,201 @@
-import { ConfigProvider, Layout, Menu, MenuProps, Space, Tooltip, theme } from "antd";
-import React, { useEffect, useRef, useState } from "react";
-import { NavLink, useParams, useSearchParams } from "react-router-dom";
-import {
-  getLeftMostRouteInfo,
-  getTargetMenuItemIdRouteList,
-  handlePropsMenuToAntdMenu,
-} from "../layout2/util/menu-util";
-import { useLayoutContext } from "../layout2/layout-context";
-import { MenuType } from "../layout2/type/layout-type";
-import { useLocale } from "../locale/useLocale";
-import IconFont from "../layout2/components/icon-font";
-import { UserInfo, ThemeConfig } from "../tmpl/interface";
-import Units from "../units";
-import "./css/sider.less"
-
-type SiderPropsType = {
-  menuList: MenuType[];
-  collapsed: boolean;
-  themeConfig?: ThemeConfig;
-};
-
-type MenuItem = Required<MenuProps>["items"][number];
-type SecoundFloorMenuList = MenuType[][];
-
-/**
- * @param menuList 自定义的menu
- * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
- * @desc 获取第二层级 menu 与其下标映射的数组
- */
-const getSecoundFloorMenuList = (
-  menuList: MenuType[]
-): SecoundFloorMenuList => {
-  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
-    length: menuList.length,
-  }).map(() => Array.from({ length: 0 }));
-
-  for (let i = 0; i < menuList.length; i++) {
-    const menuItem = menuList[i];
-    Array.isArray(menuItem.children) &&
-      (secoundFloorMenuList[i] = menuItem.children);
-  }
-  return secoundFloorMenuList;
-};
-
-const { useToken } = theme;
-
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
-  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { translate, getLocale } = useLocale();
-  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  const [orgName, setOrgName] = useState<string>(""); // 组织名称
-  // menu select
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [openKeys, setOpenKeys] = useState([]);
-  const { sourceId } = useParams();
-  const [search] = useSearchParams();
-  const menuId: string = search.get("menuId");
-  const { token: { colorPrimary } } = useToken();
-
-  const initUserConfig = async () => {
-    let userInfo: UserInfo = await Units.getCurrentUserInfo();
-    if (!userInfo) {
-      userInfo = await Units.getUserInfo();
-    }
-    setOrgName(userInfo?.orgName);
-  };
-
-  useEffect(() => {
-    initUserConfig();
-  }, [])
-
-  useEffect(() => {
-    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
-  }, [menuList]);
-
-  // menu
-  const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
-    const locale = getLocale();
-    return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
-      const { disabled, label, children, icon } = menuItem;
-      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
-      if (disabled)
-        return (
-          <div
-            style={{
-              color: "inherit",
-              width: "100%",
-              height: "100%",
-              display: "block",
-            }}
-          >
-            {translate("${" + label + "}")}
-          </div>
-        );
-      const { path, target } = getLeftMostRouteInfo(menuItem);
-      if (Array.isArray(children) && !children.length) {
-        const navLink = <NavLink
-          to={`/${path}`}
-          target={target}
-          style={{
-            color: "inherit",
-            width: "100%",
-            height: "100%",
-            display: "block",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-          }}
-        >
-          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-        </NavLink>;
-        return (locale === "zh" ? navLink :
-          <Tooltip title={translate("${" + label + "}")}>
-            {navLink}
-          </Tooltip>
-        );
-      }
-      return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
-    });
-  };
-
-  useEffect(() => {
-    if (!menuList.length) {
-      setMenu([]);
-      return;
-    }
-    const targetId =
-      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
-    if (!targetId) return;
-    const curSiderMenuList =
-      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
-    if (curSiderMenuList) {
-      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
-      const temIds = getTargetMenuItemIdRouteList(curSiderMenuList, targetId);
-      setTimeout(() => {
-        setSelectedKeys(temIds);
-        setOpenKeys(temIds);
-      }, 10);
-    }
-  }, [sourceId, menuId, menuList, getLocale()]);
-
-  // default select keys
-  useEffect(() => {
-    if (sourceId === undefined) {
-      if (secoundFloorMenuList.current[0] !== undefined) {
-        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
-        setSelectedKeys([]);
-        setOpenKeys([]);
-      }
-      setDocumentTitle("");
-    } else {
-      const documentTitle =
-        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
-      setDocumentTitle(translate("${" + documentTitle + "}"));
-    }
-  }, [menuList, sourceId, getLocale()]);
-
-  return (
-    <Layout.Sider
-      collapsed={collapsed}
-      collapsedWidth={0}
-      width={200}
-      className="v4-layout-sider"
-    >
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBg: "transparent",
-              itemColor: "#ffffffd9",
-              itemSelectedColor: colorPrimary,
-              fontSize: 14,
-              subMenuItemBg: "transparent",
-              subMenuItemSelectedColor: "#ffffffd9",
-              iconSize: 16
-            },
-          },
-        }}
-      >
-        {orgName ? <div className="sider-orgName">{orgName}</div> : ""}
-        <div className="sider-menu" style={{ height: orgName ? "calc(100% - 48px)" : "100%" }}>
-          <Menu
-            mode="inline"
-            items={menu}
-            selectedKeys={selectedKeys}
-            openKeys={openKeys}
-            inlineCollapsed={false}
-            style={{
-              userSelect: "none",
-              borderInlineEnd: "none"
-            }}
-            onOpenChange={(val) => setOpenKeys([...val])}
-          />
-        </div>
-      </ConfigProvider>
-    </Layout.Sider>
-  );
-};
-
-export default Sider;
+import { ConfigProvider, Layout, Menu, MenuProps, Space, Tooltip, theme } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import {
+  getLeftMostRouteInfo,
+  getTargetMenuItemIdRouteList,
+  handlePropsMenuToAntdMenu,
+} from "../layout2/util/menu-util";
+import { useLayoutContext } from "../layout2/layout-context";
+import { MenuType } from "../layout2/type/layout-type";
+import { useLocale } from "../locale/useLocale";
+import IconFont from "../layout2/components/icon-font";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
+import Units from "../units";
+import "./css/sider.less"
+
+type SiderPropsType = {
+  menuList: MenuType[];
+  collapsed: boolean;
+  themeConfig?: ThemeConfig;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+type SecoundFloorMenuList = MenuType[][];
+
+/**
+ * @param menuList 自定义的menu
+ * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
+ * @desc 获取第二层级 menu 与其下标映射的数组
+ */
+const getSecoundFloorMenuList = (
+  menuList: MenuType[]
+): SecoundFloorMenuList => {
+  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
+    length: menuList.length,
+  }).map(() => Array.from({ length: 0 }));
+
+  for (let i = 0; i < menuList.length; i++) {
+    const menuItem = menuList[i];
+    Array.isArray(menuItem.children) &&
+      (secoundFloorMenuList[i] = menuItem.children);
+  }
+  return secoundFloorMenuList;
+};
+
+const { useToken } = theme;
+
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { translate, getLocale } = useLocale();
+  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const [orgName, setOrgName] = useState<string>(""); // 组织名称
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [openKeys, setOpenKeys] = useState([]);
+  const { sourceId } = useParams();
+  const [search] = useSearchParams();
+  const menuId: string = search.get("menuId");
+  const { token: { colorPrimary } } = useToken();
+
+  const initUserConfig = async () => {
+    let userInfo: UserInfo = await Units.getCurrentUserInfo();
+    if (!userInfo) {
+      userInfo = await Units.getUserInfo();
+    }
+    setOrgName(userInfo?.orgName);
+  };
+
+  useEffect(() => {
+    initUserConfig();
+  }, [])
+
+  useEffect(() => {
+    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
+  }, [menuList]);
+
+  // menu
+  const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    const locale = getLocale();
+    return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
+      const { disabled, label, children, icon } = menuItem;
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
+      if (disabled)
+        return (
+          <div
+            style={{
+              color: "inherit",
+              width: "100%",
+              height: "100%",
+              display: "block",
+            }}
+          >
+            {translate("${" + label + "}")}
+          </div>
+        );
+      const { path, target } = getLeftMostRouteInfo(menuItem);
+      if (Array.isArray(children) && !children.length) {
+        const navLink = <NavLink
+          to={`/${path}`}
+          target={target}
+          style={{
+            color: "inherit",
+            width: "100%",
+            height: "100%",
+            display: "block",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+          }}
+        >
+          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+        </NavLink>;
+        return (locale === "zh" ? navLink :
+          <Tooltip title={translate("${" + label + "}")}>
+            {navLink}
+          </Tooltip>
+        );
+      }
+      return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
+    });
+  };
+
+  useEffect(() => {
+    if (!menuList.length) {
+      setMenu([]);
+      return;
+    }
+    const targetId =
+      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
+    if (!targetId) return;
+    const curSiderMenuList =
+      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
+    if (curSiderMenuList) {
+      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
+      const temIds = getTargetMenuItemIdRouteList(curSiderMenuList, targetId);
+      setTimeout(() => {
+        setSelectedKeys(temIds);
+        setOpenKeys(temIds);
+      }, 10);
+    }
+  }, [sourceId, menuId, menuList, getLocale()]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (secoundFloorMenuList.current[0] !== undefined) {
+        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
+        setSelectedKeys([]);
+        setOpenKeys([]);
+      }
+      setDocumentTitle("");
+    } else {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+    }
+  }, [menuList, sourceId, getLocale()]);
+
+  return (
+    <Layout.Sider
+      collapsed={collapsed}
+      collapsedWidth={0}
+      width={200}
+      className="v4-layout-sider"
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              itemColor: "#ffffffd9",
+              itemSelectedColor: colorPrimary,
+              fontSize: 14,
+              subMenuItemBg: "transparent",
+              subMenuItemSelectedColor: "#ffffffd9",
+              iconSize: 16
+            },
+          },
+        }}
+      >
+        {orgName ? <div className="sider-orgName">{orgName}</div> : ""}
+        <div className="sider-menu" style={{ height: orgName ? "calc(100% - 48px)" : "100%" }}>
+          <Menu
+            mode="inline"
+            items={menu}
+            selectedKeys={selectedKeys}
+            openKeys={openKeys}
+            inlineCollapsed={false}
+            style={{
+              userSelect: "none",
+              borderInlineEnd: "none"
+            }}
+            onOpenChange={(val) => setOpenKeys([...val])}
+          />
+        </div>
+      </ConfigProvider>
+    </Layout.Sider>
+  );
+};
+
+export default Sider;