Create NotificationCountBadge

apps/app/src/components/Sidebar/SidebarNav/NotificationCountBadge.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { useSWRxInAppNotificationStatus } from '~/stores/in-app-notification';
+
+export const NotificationCountBadge: React.FC = () => {
+  const { data: inAppNotificationStatus } = useSWRxInAppNotificationStatus();
+  return (
+    <>
+      { inAppNotificationStatus }
+      <span className="material-symbols-outlined">notifications</span>
+    </>
+  );
+};

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.tsx

@@ -3,6 +3,8 @@ import { FC, memo, useCallback } from 'react';
 import { SidebarContentsType, SidebarMode } from '~/interfaces/ui';
 import { useCollapsedContentsOpened, useCurrentSidebarContents, useSidebarMode } from '~/stores/ui';
 
+import { NotificationCountBadge } from './NotificationCountBadge';
+
 import styles from './PrimaryItems.module.scss';
 
 /**
@@ -71,7 +73,10 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
       onClick={itemClickedHandler}
       onMouseEnter={mouseEnteredHandler}
     >
-      <span className="material-symbols-outlined">{iconName}</span>
+      { contents === SidebarContentsType.NOTIFICATION
+        ? <NotificationCountBadge />
+        : <span className="material-symbols-outlined">{iconName}</span>
+      }
     </button>
   );
 };