UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-06-26 18:27:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(frontend): fix menu accessibility visibility issue

Browse Source
This commit is contained in:
AselPeiris 2025-01-12 03:00:18 +05:30
parent c6f208955a
commit 60ca208846
1 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/layout/VerticalMenu.tsx
View File

@ -1,11 +1,12 @@
/* /*
* Copyright © 2024 Hexastack. All rights reserved. * Copyright © 2025 Hexastack. All rights reserved.
* *
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/ */
import { import {
faAlignLeft, faAlignLeft,
faAsterisk, faAsterisk,
@ -39,7 +40,6 @@ import { Sidebar } from "@/app-components/menus/Sidebar";
import { useAuth } from "@/hooks/useAuth"; import { useAuth } from "@/hooks/useAuth";
import { useConfig } from "@/hooks/useConfig"; import { useConfig } from "@/hooks/useConfig";
import { useHasPermission } from "@/hooks/useHasPermission"; import { useHasPermission } from "@/hooks/useHasPermission";
import { useTranslate } from "@/hooks/useTranslate";
import { EntityType } from "@/services/types"; import { EntityType } from "@/services/types";
import { PermissionAction } from "@/types/permission.types"; import { PermissionAction } from "@/types/permission.types";
import { getLayout } from "@/utils/laylout"; import { getLayout } from "@/utils/laylout";
@ -206,7 +206,6 @@ const getMenuItems = (ssoEnabled: boolean): MenuItem[] => [
}, },
}, },
// { // {
// text: 'menu.broadcast', // text: 'menu.broadcast',
// href: "/subscribers/broadcast", // href: "/subscribers/broadcast",
@ -287,25 +286,46 @@ export const VerticalMenu: FC<VerticalMenuProps> = ({
onToggleOut, onToggleOut,
}) => { }) => {
const { ssoEnabled } = useConfig(); const { ssoEnabled } = useConfig();
const { t } = useTranslate();
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
const router = useRouter(); const router = useRouter();
const hasPermission = useHasPermission(); const hasPermission = useHasPermission();
const menuItems = getMenuItems(ssoEnabled); const menuItems = getMenuItems(ssoEnabled);
// Filter menu item to which user is allowed access // Filter menu item to which user is allowed access
const availableMenuItems = useMemo(() => { const generateValidMenuItems = useMemo(() => {
return menuItems.filter(({ requires: requiredPermissions }) => { return (menuItems: MenuItem[]): MenuItem[] => {
return ( const validMenuItems = menuItems
!requiredPermissions || .map((menuItem: MenuItem) => {
if (menuItem && !menuItem.submenuItems) {
const requiredPermissions = menuItem.requires!;
if (
requiredPermissions &&
Object.entries(requiredPermissions).every((permission) => { Object.entries(requiredPermissions).every((permission) => {
const entityType = permission[0] as EntityType; const entityType = permission[0] as EntityType;
const actions = permission[1]; const actions = permission[1];
return actions.every((action) => hasPermission(entityType, action)); return actions.every((action) =>
}) hasPermission(entityType, action),
); );
}); })
}, [t, hasPermission]); ) {
return menuItem;
}
} else if (menuItem.submenuItems) {
menuItem.submenuItems = generateValidMenuItems(
menuItem.submenuItems,
);
return menuItem;
}
})
.filter((menuItem) => menuItem !== undefined)
.filter((menuItem) => menuItem?.submenuItems?.length !== 0);
return validMenuItems;
};
}, [menuItems, hasPermission]);
const availableMenuItems = generateValidMenuItems(menuItems);
const hasTemporaryDrawer = const hasTemporaryDrawer =
getLayout(router.pathname.slice(1)) === "full_width"; getLayout(router.pathname.slice(1)) === "full_width";