From 14ad28e90b879fddb08c7dd239953a9c28ef2c14 Mon Sep 17 00:00:00 2001
From: naman114 <namangogia2001@gmail.com>
Date: Mon, 26 Dec 2022 04:26:56 +0530
Subject: [PATCH 1/3] fix: responsiveness

---
 .../Notifications/NotificationsList.tsx       | 60 ++++++++-----------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index d5323ff9049..fe21a62c0e8 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -396,40 +396,32 @@ export default function NotificationsList({
         <div className="bg-white h-full">
           <div className="w-full bg-gray-100 border-b sticky top-0 z-30 px-4 pb-1 lg:px-8">
             <div className="flex flex-col pt-4 py-2">
-              <div className="grid grid-cols-3">
-                <div>
-                  <button
-                    onClick={(_) => {
-                      setReload(!reload);
-                      setData([]);
-                      setUnreadCount(0);
-                      setOffset(0);
-                    }}
-                    className="inline-flex items-center font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
-                  >
-                    <i className="fa-fw fas fa-sync cursor-pointer mr-2" />{" "}
-                    Reload
-                  </button>
-                </div>
-                <div>
-                  <button
-                    onClick={(_) => setShowNotifications(false)}
-                    className="inline-flex items-center font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
-                  >
-                    <i className="fa-fw fas fa-times cursor-pointer mr-2" />{" "}
-                    Close
-                  </button>
-                </div>
-                <div>
-                  <button
-                    onClick={handleSubscribeClick}
-                    className="inline-flex items-center font-semibold p-2 md:py-1 bg-white active:bg-gray-300 border rounded text-xs shrink-0"
-                    disabled={isSubscribing}
-                  >
-                    {isSubscribing && <Spinner />}
-                    {getButtonText()}
-                  </button>
-                </div>
+              <div className="gap-2 grid grid-cols-1 sm:grid-cols-3">
+                <button
+                  onClick={(_) => {
+                    setReload(!reload);
+                    setData([]);
+                    setUnreadCount(0);
+                    setOffset(0);
+                  }}
+                  className="inline-flex items-center font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
+                >
+                  <i className="fa-fw fas fa-sync cursor-pointer mr-2" /> Reload
+                </button>
+                <button
+                  onClick={(_) => setShowNotifications(false)}
+                  className="inline-flex items-center font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
+                >
+                  <i className="fa-fw fas fa-times cursor-pointer mr-2" /> Close
+                </button>
+                <button
+                  onClick={handleSubscribeClick}
+                  className="inline-flex items-center font-semibold p-2 md:py-1 bg-white active:bg-gray-300 border rounded text-xs shrink-0"
+                  disabled={isSubscribing}
+                >
+                  {isSubscribing && <Spinner />}
+                  {getButtonText()}
+                </button>
               </div>
               <div className="flex justify-between items-center">
                 <div className="font-bold text-xl mt-4">Notifications</div>

From d251e33dee96f36f6e84abd2d1d441084ecbfc32 Mon Sep 17 00:00:00 2001
From: naman114 <namangogia2001@gmail.com>
Date: Fri, 30 Dec 2022 08:07:34 +0530
Subject: [PATCH 2/3] Fix (NotificationsList): made the Notifications sidebar
 responsive

---
 .../Notifications/NotificationsList.tsx       | 82 +++++++++++--------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index fe21a62c0e8..925dc9f7748 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -396,46 +396,60 @@ export default function NotificationsList({
         <div className="bg-white h-full">
           <div className="w-full bg-gray-100 border-b sticky top-0 z-30 px-4 pb-1 lg:px-8">
             <div className="flex flex-col pt-4 py-2">
-              <div className="gap-2 grid grid-cols-1 sm:grid-cols-3">
-                <button
-                  onClick={(_) => {
-                    setReload(!reload);
-                    setData([]);
-                    setUnreadCount(0);
-                    setOffset(0);
-                  }}
-                  className="inline-flex items-center font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
-                >
-                  <i className="fa-fw fas fa-sync cursor-pointer mr-2" /> Reload
-                </button>
-                <button
-                  onClick={(_) => setShowNotifications(false)}
-                  className="inline-flex items-center font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
-                >
-                  <i className="fa-fw fas fa-times cursor-pointer mr-2" /> Close
-                </button>
-                <button
-                  onClick={handleSubscribeClick}
-                  className="inline-flex items-center font-semibold p-2 md:py-1 bg-white active:bg-gray-300 border rounded text-xs shrink-0"
-                  disabled={isSubscribing}
-                >
-                  {isSubscribing && <Spinner />}
-                  {getButtonText()}
-                </button>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-1">
+                <div className="justify-self-start">
+                  <button
+                    onClick={(_) => {
+                      setReload(!reload);
+                      setData([]);
+                      setUnreadCount(0);
+                      setOffset(0);
+                    }}
+                    className="font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
+                  >
+                    <i className="fa-fw fas fa-sync cursor-pointer mr-2" />{" "}
+                    Reload
+                  </button>
+                </div>
+                <div className="justify-self-end sm:justify-self-start">
+                  <button
+                    onClick={(_) => setShowNotifications(false)}
+                    className="font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
+                  >
+                    <i className="fa-fw fas fa-times cursor-pointer mr-2" />{" "}
+                    Close
+                  </button>
+                </div>
+                <div className="justify-self-start">
+                  <button
+                    onClick={handleSubscribeClick}
+                    className="inline-flex items-center font-semibold p-2 md:py-1 bg-white active:bg-gray-300 border rounded text-xs shrink-0"
+                    disabled={isSubscribing}
+                  >
+                    {isSubscribing && <Spinner />}
+                    {getButtonText()}
+                  </button>
+                </div>
               </div>
-              <div className="flex justify-between items-center">
+
+              <div className="flex gap-1 justify-between items-baseline">
                 <div className="font-bold text-xl mt-4">Notifications</div>
                 <button
-                  className="inline-flex items-center font-semibold mt-4 p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs flex-shrink-0"
+                  className="font-semibold mt-2 p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs flex-shrink-0"
                   disabled={isMarkingAllAsRead}
                   onClick={handleMarkAllAsRead}
                 >
-                  {isMarkingAllAsRead ? (
-                    <Spinner />
-                  ) : (
-                    <i className="fa-solid fa-check-double mr-2 text-primary-500" />
-                  )}
-                  Mark All as Read
+                  <div className="flex items-center">
+                    {isMarkingAllAsRead ? (
+                      <Spinner />
+                    ) : (
+                      <i className="fa-solid fa-check-double mr-2 text-primary-500" />
+                    )}
+                    <div className="flex flex-col sm:flex-row">
+                      <p>Mark All</p>
+                      <p>&nbsp;as Read</p>
+                    </div>
+                  </div>
                 </button>
               </div>
             </div>

From 9204c5a31fdd87ba68ef4153729461cdfa8169e9 Mon Sep 17 00:00:00 2001
From: naman114 <namangogia2001@gmail.com>
Date: Tue, 3 Jan 2023 03:00:00 +0530
Subject: [PATCH 3/3] feat: made notification bar open from right edge

---
 src/Components/Common/Sidebar/Sidebar.tsx     |  49 ++++-
 .../Notifications/NotificationsList.tsx       | 207 ++++++++----------
 src/Router/AppRouter.tsx                      |  23 +-
 3 files changed, 162 insertions(+), 117 deletions(-)

diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx
index baf88eeac57..c9ac444bdde 100644
--- a/src/Components/Common/Sidebar/Sidebar.tsx
+++ b/src/Components/Common/Sidebar/Sidebar.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useEffect, useRef, useState } from "react";
 import { SidebarItem, ShrinkedSidebarItem } from "./SidebarItem";
 import SidebarUserCard from "./SidebarUserCard";
-import NotificationItem from "../../Notifications/NotificationsList";
 import { Dialog, Transition } from "@headlessui/react";
 import useActiveLink from "../../../Common/hooks/useActiveLink";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
@@ -19,11 +18,17 @@ type StatelessSidebarProps =
       shrinkable: true;
       shrinked: boolean;
       setShrinked: (state: boolean) => void;
+      notificationsListOpen: boolean;
+      setNotificationsListOpenCB: (state: boolean) => void;
+      unreadNotificationsCount: number;
     }
   | {
       shrinkable?: false;
       shrinked?: false;
       setShrinked?: undefined;
+      notificationsListOpen: boolean;
+      setNotificationsListOpenCB: (state: boolean) => void;
+      unreadNotificationsCount: number;
     };
 
 const NavItems = [
@@ -46,6 +51,9 @@ const StatelessSidebar = ({
   shrinkable = false,
   shrinked = false,
   setShrinked,
+  notificationsListOpen,
+  setNotificationsListOpenCB,
+  unreadNotificationsCount,
 }: StatelessSidebarProps) => {
   const activeLink = useActiveLink();
   const Item = shrinked ? ShrinkedSidebarItem : SidebarItem;
@@ -135,7 +143,12 @@ const StatelessSidebar = ({
             );
           })}
 
-          <NotificationItem shrinked={shrinked} />
+          <Item
+            text="Notifications"
+            do={() => setNotificationsListOpenCB(!notificationsListOpen)}
+            icon={<CareIcon className="care-l-bell text-lg" />}
+            badgeCount={unreadNotificationsCount}
+          />
           <Item
             text="Dashboard"
             to={DASHBOARD}
@@ -165,7 +178,17 @@ const StatelessSidebar = ({
   );
 };
 
-export const DesktopSidebar = () => {
+interface DesktopSidebarProps {
+  notificationsListOpen: boolean;
+  setNotificationsListOpenCB: (state: boolean) => void;
+  unreadNotificationsCount: number;
+}
+
+export const DesktopSidebar = ({
+  notificationsListOpen,
+  setNotificationsListOpenCB,
+  unreadNotificationsCount,
+}: DesktopSidebarProps) => {
   const [shrinked, setShrinked] = useState(
     () => localStorage.getItem(SIDEBAR_SHRINK_PREFERENCE_KEY) === "true"
   );
@@ -182,6 +205,9 @@ export const DesktopSidebar = () => {
       shrinked={shrinked}
       setShrinked={setShrinked}
       shrinkable
+      notificationsListOpen={notificationsListOpen}
+      setNotificationsListOpenCB={setNotificationsListOpenCB}
+      unreadNotificationsCount={unreadNotificationsCount}
     />
   );
 };
@@ -189,9 +215,18 @@ export const DesktopSidebar = () => {
 interface MobileSidebarProps {
   open: boolean;
   setOpen: (state: boolean) => void;
+  notificationsListOpen: boolean;
+  setNotificationsListOpenCB: (state: boolean) => void;
+  unreadNotificationsCount: number;
 }
 
-export const MobileSidebar = ({ open, setOpen }: MobileSidebarProps) => {
+export const MobileSidebar = ({
+  open,
+  setOpen,
+  notificationsListOpen,
+  setNotificationsListOpenCB,
+  unreadNotificationsCount,
+}: MobileSidebarProps) => {
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={setOpen}>
@@ -220,7 +255,11 @@ export const MobileSidebar = ({ open, setOpen }: MobileSidebarProps) => {
                 leaveTo="-translate-x-full"
               >
                 <Dialog.Panel className="pointer-events-auto w-screen max-w-fit">
-                  <StatelessSidebar />
+                  <StatelessSidebar
+                    notificationsListOpen={notificationsListOpen}
+                    setNotificationsListOpenCB={setNotificationsListOpenCB}
+                    unreadNotificationsCount={unreadNotificationsCount}
+                  />
                 </Dialog.Panel>
               </Transition.Child>
             </div>
diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx
index 925dc9f7748..249349ea731 100644
--- a/src/Components/Notifications/NotificationsList.tsx
+++ b/src/Components/Notifications/NotificationsList.tsx
@@ -1,5 +1,5 @@
-import { navigate } from "raviger";
 import React, { useEffect, useState } from "react";
+import { navigate } from "raviger";
 import { useDispatch } from "react-redux";
 import {
   getNotifications,
@@ -16,27 +16,22 @@ import Spinner from "../Common/Spinner";
 import { NOTIFICATION_EVENTS } from "../../Common/constants";
 import { Error } from "../../Utils/Notifications.js";
 import { classNames } from "../../Utils/utils";
-import CareIcon from "../../CAREUI/icons/CareIcon";
 
 import * as Sentry from "@sentry/browser";
 import { formatDate } from "../../Utils/utils";
-import {
-  ShrinkedSidebarItem,
-  SidebarItem,
-} from "../Common/Sidebar/SidebarItem";
 
 const RESULT_LIMIT = 14;
 
 interface NotificationTileProps {
   notification: any;
   onClickCB?: () => void;
-  setShowNotifications: (show: boolean) => void;
+  setNotificationsListOpenCB: (show: boolean) => void;
 }
 
 const NotificationTile = ({
   notification,
   onClickCB,
-  setShowNotifications,
+  setNotificationsListOpenCB,
 }: NotificationTileProps) => {
   const dispatch: any = useDispatch();
   const [result, setResult] = useState(notification);
@@ -82,7 +77,7 @@ const NotificationTile = ({
         handleMarkAsRead();
         navigate(resultUrl(result.event, result.caused_objects));
         onClickCB && onClickCB();
-        setShowNotifications(false);
+        setNotificationsListOpenCB(false);
       }}
       className={classNames(
         "relative py-5 px-4 lg:px-8 hover:bg-gray-200 focus:bg-gray-200 transition ease-in-out duration-150 cursor-pointer",
@@ -132,13 +127,17 @@ const NotificationTile = ({
 };
 
 interface NotificationsListProps {
-  shrinked: boolean;
   onClickCB?: () => void;
+  notificationsListOpen: boolean;
+  setNotificationsListOpenCB: (state: boolean) => void;
+  setUnreadNotificationsCountCB: (count: number) => void;
 }
 
 export default function NotificationsList({
-  shrinked,
   onClickCB,
+  notificationsListOpen,
+  setNotificationsListOpenCB,
+  setUnreadNotificationsCountCB,
 }: NotificationsListProps) {
   const rootState: any = useSelector((rootState) => rootState);
   const { currentUser } = rootState;
@@ -148,10 +147,8 @@ export default function NotificationsList({
   const [isLoading, setIsLoading] = useState(false);
   const [offset, setOffset] = useState(0);
   const [totalCount, setTotalCount] = useState(0);
-  const [showNotifications, setShowNotifications] = useState(false);
   const [reload, setReload] = useState(false);
   const [eventFilter, setEventFilter] = useState("");
-  const [unreadCount, setUnreadCount] = useState(0);
   const [isMarkingAllAsRead, setIsMarkingAllAsRead] = useState(false);
   const [isSubscribed, setIsSubscribed] = useState("");
   const [isSubscribing, setIsSubscribing] = useState(false);
@@ -159,12 +156,13 @@ export default function NotificationsList({
   useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
       if (event.key === "Escape") {
-        setShowNotifications(false);
+        setNotificationsListOpenCB(false);
       }
     }
-    if (showNotifications) document.addEventListener("keydown", handleKeyDown);
+    if (notificationsListOpen)
+      document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [showNotifications]);
+  }, [notificationsListOpen]);
 
   const intialSubscriptionState = async () => {
     try {
@@ -318,7 +316,7 @@ export default function NotificationsList({
       .then((res: any) => {
         if (res && res.data) {
           setData(res.data.results);
-          setUnreadCount(
+          setUnreadNotificationsCountCB(
             res.data.results?.reduce(
               (acc: number, result: any) => acc + (result.read_at ? 0 : 1),
               0
@@ -333,7 +331,14 @@ export default function NotificationsList({
         setOffset((prev) => prev - RESULT_LIMIT);
       });
     intialSubscriptionState();
-  }, [dispatch, reload, showNotifications, offset, eventFilter, isSubscribed]);
+  }, [
+    dispatch,
+    reload,
+    notificationsListOpen,
+    offset,
+    eventFilter,
+    isSubscribed,
+  ]);
 
   if (!offset && isLoading) {
     manageResults = (
@@ -349,7 +354,7 @@ export default function NotificationsList({
             key={result.id}
             notification={result}
             onClickCB={onClickCB}
-            setShowNotifications={setShowNotifications}
+            setNotificationsListOpenCB={setNotificationsListOpenCB}
           />
         ))}
         {isLoading && (
@@ -382,104 +387,86 @@ export default function NotificationsList({
     );
   }
 
-  const Item = shrinked ? ShrinkedSidebarItem : SidebarItem;
-
   return (
-    <>
-      <Item
-        text="Notifications"
-        do={() => setShowNotifications(!showNotifications)}
-        icon={<CareIcon className="care-l-bell text-lg" />}
-        badgeCount={unreadCount}
-      />
-      <SlideOver show={showNotifications} setShow={setShowNotifications}>
-        <div className="bg-white h-full">
-          <div className="w-full bg-gray-100 border-b sticky top-0 z-30 px-4 pb-1 lg:px-8">
-            <div className="flex flex-col pt-4 py-2">
-              <div className="grid grid-cols-2 sm:grid-cols-3 gap-1">
-                <div className="justify-self-start">
-                  <button
-                    onClick={(_) => {
-                      setReload(!reload);
-                      setData([]);
-                      setUnreadCount(0);
-                      setOffset(0);
-                    }}
-                    className="font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
-                  >
-                    <i className="fa-fw fas fa-sync cursor-pointer mr-2" />{" "}
-                    Reload
-                  </button>
-                </div>
-                <div className="justify-self-end sm:justify-self-start">
-                  <button
-                    onClick={(_) => setShowNotifications(false)}
-                    className="font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
-                  >
-                    <i className="fa-fw fas fa-times cursor-pointer mr-2" />{" "}
-                    Close
-                  </button>
-                </div>
-                <div className="justify-self-start">
-                  <button
-                    onClick={handleSubscribeClick}
-                    className="inline-flex items-center font-semibold p-2 md:py-1 bg-white active:bg-gray-300 border rounded text-xs shrink-0"
-                    disabled={isSubscribing}
-                  >
-                    {isSubscribing && <Spinner />}
-                    {getButtonText()}
-                  </button>
-                </div>
-              </div>
+    <SlideOver
+      show={notificationsListOpen}
+      setShow={setNotificationsListOpenCB}
+    >
+      <div className="bg-white h-full">
+        <div className="w-full bg-gray-100 border-b sticky top-0 z-30 px-4 pb-1 lg:px-8">
+          <div className="flex flex-col pt-4 py-2">
+            <div className="grid grid-cols-3">
+              <button
+                onClick={(_) => {
+                  setReload(!reload);
+                  setData([]);
+                  setUnreadNotificationsCountCB(0);
+                  setOffset(0);
+                }}
+                className="w-fit font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
+              >
+                <i className="fa-fw fas fa-sync cursor-pointer mr-2" /> Reload
+              </button>
+
+              <button
+                onClick={(_) => setNotificationsListOpenCB(false)}
+                className="w-fit font-semibold p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs shrink-0"
+              >
+                <i className="fa-fw fas fa-times cursor-pointer mr-2" /> Close
+              </button>
 
-              <div className="flex gap-1 justify-between items-baseline">
-                <div className="font-bold text-xl mt-4">Notifications</div>
-                <button
-                  className="font-semibold mt-2 p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs flex-shrink-0"
-                  disabled={isMarkingAllAsRead}
-                  onClick={handleMarkAllAsRead}
-                >
-                  <div className="flex items-center">
-                    {isMarkingAllAsRead ? (
-                      <Spinner />
-                    ) : (
-                      <i className="fa-solid fa-check-double mr-2 text-primary-500" />
-                    )}
-                    <div className="flex flex-col sm:flex-row">
-                      <p>Mark All</p>
-                      <p>&nbsp;as Read</p>
-                    </div>
-                  </div>
-                </button>
-              </div>
+              <button
+                onClick={handleSubscribeClick}
+                className="inline-flex items-center w-fit font-semibold p-2 md:py-1 bg-white active:bg-gray-300 border rounded text-xs shrink-0"
+                disabled={isSubscribing}
+              >
+                {isSubscribing && <Spinner />}
+                {getButtonText()}
+              </button>
             </div>
 
-            <div>
-              <div className="w-2/3">
-                <span className="text-sm font-semibold">
-                  Filter by category
-                </span>
-                <SelectField
-                  name="event_filter"
-                  variant="outlined"
-                  margin="dense"
-                  value={eventFilter}
-                  options={[
-                    { id: "", text: "Show All" },
-                    ...NOTIFICATION_EVENTS.map((i) => {
-                      if (i.id === "MESSAGE") return { ...i, text: "Notices" };
-                      return i;
-                    }),
-                  ]}
-                  onChange={(e: any) => setEventFilter(e.target.value)}
-                />
-              </div>
+            <div className="flex gap-1 justify-between items-baseline">
+              <div className="font-bold text-xl mt-4">Notifications</div>
+              <button
+                className="font-semibold mt-2 p-2 md:py-1 bg-white hover:bg-gray-300 border rounded text-xs flex-shrink-0"
+                disabled={isMarkingAllAsRead}
+                onClick={handleMarkAllAsRead}
+              >
+                <div className="flex items-center">
+                  {isMarkingAllAsRead ? (
+                    <Spinner />
+                  ) : (
+                    <i className="fa-solid fa-check-double mr-2 text-primary-500" />
+                  )}
+                  <p>Mark All as Read</p>
+                </div>
+              </button>
             </div>
           </div>
 
-          <div>{manageResults}</div>
+          <div>
+            <div className="w-2/3">
+              <span className="text-sm font-semibold">Filter by category</span>
+              <SelectField
+                name="event_filter"
+                variant="outlined"
+                margin="dense"
+                value={eventFilter}
+                options={[
+                  { id: "", text: "Show All" },
+                  ...NOTIFICATION_EVENTS.map((i) => {
+                    if (i.id === "MESSAGE") return { ...i, text: "Notices" };
+                    return i;
+                  }),
+                ]}
+                onChange={(e: any) => setEventFilter(e.target.value)}
+              />
+            </div>
+          </div>
         </div>
-      </SlideOver>
-    </>
+
+        <div>{manageResults}</div>
+      </div>
+    </SlideOver>
   );
 }
diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx
index 7ec7b298bc1..f52f26c7bc0 100644
--- a/src/Router/AppRouter.tsx
+++ b/src/Router/AppRouter.tsx
@@ -68,6 +68,7 @@ import {
 } from "../Components/Common/Sidebar/Sidebar";
 import { BLACKLISTED_PATHS } from "../Common/constants";
 import { UpdateFacilityMiddleware } from "../Components/Facility/UpdateFacilityMiddleware";
+import NotificationsList from "../Components/Notifications/NotificationsList";
 
 const logoBlack = process.env.REACT_APP_BLACK_LOGO;
 
@@ -401,6 +402,8 @@ export default function AppRouter() {
   const pages = useRoutes(routes) || <Error404 />;
   const path = usePath();
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [notificationsListOpen, setNotificationsListOpen] = useState(false);
+  const [unreadNotificationsCount, setUnreadNotificationsCount] = useState(0);
 
   useEffect(() => {
     setSidebarOpen(false);
@@ -420,13 +423,29 @@ export default function AppRouter() {
     <div className="absolute inset-0 h-screen flex overflow-hidden bg-gray-100">
       <>
         <div className="block md:hidden">
-          <MobileSidebar open={sidebarOpen} setOpen={setSidebarOpen} />{" "}
+          <MobileSidebar
+            open={sidebarOpen}
+            setOpen={setSidebarOpen}
+            notificationsListOpen={notificationsListOpen}
+            setNotificationsListOpenCB={setNotificationsListOpen}
+            unreadNotificationsCount={unreadNotificationsCount}
+          />{" "}
         </div>
         <div className="md:block hidden">
-          <DesktopSidebar />
+          <DesktopSidebar
+            notificationsListOpen={notificationsListOpen}
+            setNotificationsListOpenCB={setNotificationsListOpen}
+            unreadNotificationsCount={unreadNotificationsCount}
+          />
         </div>
       </>
 
+      <NotificationsList
+        notificationsListOpen={notificationsListOpen}
+        setNotificationsListOpenCB={setNotificationsListOpen}
+        setUnreadNotificationsCountCB={setUnreadNotificationsCount}
+      />
+
       <div className="flex flex-col w-full flex-1 overflow-hidden">
         <div className="flex md:hidden relative z-10 shrink-0 h-16 bg-white shadow">
           <button