Move into PrimaryItems & apply styles

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

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

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -42,6 +42,15 @@
       }
     }
   }
+
+  .notification-count-badge :global {
+    position: absolute;
+    left: calc(100% - 21px);
+    margin: -2px;
+    font-size: 8px;
+    font-weight: bold;
+    color: white;
+  }
 }
 
 // == Colors

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

@@ -1,10 +1,9 @@
 import { FC, memo, useCallback } from 'react';
 
 import { SidebarContentsType, SidebarMode } from '~/interfaces/ui';
+import { useSWRxInAppNotificationStatus } from '~/stores/in-app-notification';
 import { useCollapsedContentsOpened, useCurrentSidebarContents, useSidebarMode } from '~/stores/ui';
 
-import { NotificationIconWithCountBadge } from './NotificationIconWithCountBadge';
-
 import styles from './PrimaryItems.module.scss';
 
 /**
@@ -20,6 +19,16 @@ const useIndicator = (sidebarMode: SidebarMode, isSelected: boolean): string =>
   return isSelected ? 'active' : '';
 };
 
+const NotificationIconWithCountBadge = (): JSX.Element => {
+  const { data: inAppNotificationStatus } = useSWRxInAppNotificationStatus();
+
+  return (
+    <div className="position-relative">
+      <span className="badge rounded-pill bg-primary notification-count-badge">{inAppNotificationStatus}</span>
+      <span className="material-symbols-outlined">notifications</span>
+    </div>
+  );
+};
 
 type PrimaryItemProps = {
   contents: SidebarContentsType,