diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index 6af3c2511..7ddffb338 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -117,6 +117,33 @@ const SidebarLinks: SidebarLinkProps[] = [
},
];
+const PendingRequestsBadge = ({
+ requests,
+ hasPermission,
+}: {
+ requests: RequestCountResponse | undefined;
+ hasPermission: (
+ permission: Permission | Permission[],
+ options?: { type: 'and' | 'or' }
+ ) => boolean;
+}) => {
+ if (
+ !hasPermission([Permission.MANAGE_REQUESTS, Permission.ADMIN], {
+ type: 'or',
+ }) ||
+ !requests ||
+ requests.pending === 0
+ ) {
+ return null;
+ }
+
+ return (
+
+ {requests.pending}
+
+ );
+};
+
const Sidebar = ({ open, setClosed }: SidebarProps) => {
const navRef = useRef(null);
const router = useRouter();
@@ -210,15 +237,12 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
{intl.formatMessage(
menuMessages[sidebarLink.messagesKey]
)}
- {sidebarLink.messagesKey === 'requests' &&
- requests &&
- requests.pending > 0 && (
-
-
- {requests.pending}
-
-
- )}
+ {sidebarLink.messagesKey === 'requests' && (
+
+ )}
);
})}
@@ -280,15 +304,12 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
{intl.formatMessage(
menuMessages[sidebarLink.messagesKey]
)}
- {sidebarLink.messagesKey === 'requests' &&
- requests &&
- requests.pending > 0 && (
-
-
- {requests.pending}
-
-
- )}
+ {sidebarLink.messagesKey === 'requests' && (
+
+ )}
);
})}