1 files changed, 23 insertions, 4 deletions
diff --git a/front/src/components/layout/Sidebar.tsx b/front/src/components/layout/Sidebar.tsx
index d237fb5..c267e2f 100644
--- a/front/src/components/layout/Sidebar.tsx
+++ b/front/src/components/layout/Sidebar.tsx
@@ -7,10 +7,22 @@ import { ThemeSwitcher } from "@/styles/ThemeSwitcher";
 
 function SlidingMenu() {
   const [_, navigate] = useLocation();
-  const { api } = useLocalState((s) => ({ api: s.api }));
+  const { api, unreadNotifications, setModal } = useLocalState((s) => ({ 
+    api: s.api,
+    unreadNotifications: s.unreadNotifications,
+    setModal: s.setModal
+  }));
+  
   function goto(to: string) {
     navigate(to);
   }
+  
+  function openNotifications() {
+    // We'll create this component next
+    import("../NotificationCenter").then(({ default: NotificationCenter }) => {
+      setModal(<NotificationCenter />);
+    });
+  }
   return (
     <div id="left-menu">
       <div id="logo">
@@ -22,9 +34,16 @@ function SlidingMenu() {
         <Icon name="home" size={20} />
         <div>Home</div>
       </div>
-      <div className="opt" role="link" onClick={() => goto(`/hark`)}>
-        <Icon name="bell" size={20} />
-        <div>Activity</div>
+      <div className="opt notification-item" role="link" onClick={openNotifications}>
+        <div className="notification-icon-wrapper">
+          <Icon name="bell" size={20} />
+          {unreadNotifications > 0 && (
+            <span className="notification-badge">
+              {unreadNotifications > 99 ? "99+" : unreadNotifications}
+            </span>
+          )}
+        </div>
+        <div>Notifications</div>
       </div>
       <hr />