Fix (NotificationsList): made the Notifications sidebar responsive

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";
@@ -18,12 +17,18 @@ type StatelessSidebarProps =
       shrinkable: true;
       shrinked: boolean;
       setShrinked: (state: boolean) => void;
+      notificationsListOpen: boolean;
+      setNotificationsListOpenCB: (state: boolean) => void;
+      unreadNotificationsCount: number;
       setOpenCB?: undefined;
     }
   | {
       shrinkable?: false;
       shrinked?: false;
       setShrinked?: undefined;
+      notificationsListOpen: boolean;
+      setNotificationsListOpenCB: (state: boolean) => void;
+      unreadNotificationsCount: number;
       setOpenCB: (open: boolean) => void;
     };
 
@@ -47,6 +52,9 @@ const StatelessSidebar = ({
   shrinkable = false,
   shrinked = false,
   setShrinked,
+  notificationsListOpen,
+  setNotificationsListOpenCB,
+  unreadNotificationsCount,
   setOpenCB,
 }: StatelessSidebarProps) => {
   const activeLink = useActiveLink();
@@ -139,7 +147,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_url}
@@ -169,7 +182,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"
   );
@@ -186,16 +209,28 @@ export const DesktopSidebar = () => {
       shrinked={shrinked}
       setShrinked={setShrinked}
       shrinkable
+      notificationsListOpen={notificationsListOpen}
+      setNotificationsListOpenCB={setNotificationsListOpenCB}
+      unreadNotificationsCount={unreadNotificationsCount}
     />
   );
 };
 
 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}>
@@ -224,7 +259,12 @@ export const MobileSidebar = ({ open, setOpen }: MobileSidebarProps) => {
                 leaveTo="-translate-x-full"
               >
                 <Dialog.Panel className="pointer-events-auto w-screen max-w-fit">
-                  <StatelessSidebar setOpenCB={setOpen} />
+                  <StatelessSidebar
+                    notificationsListOpen={notificationsListOpen}
+                    setNotificationsListOpenCB={setNotificationsListOpenCB}
+                    unreadNotificationsCount={unreadNotificationsCount}
+                    setOpenCB={setOpen}
+                  />
                 </Dialog.Panel>
               </Transition.Child>
             </div>

src/Components/Facility/TriageForm.tsx

@@ -1,13 +1,4 @@
-
-import {
-  Button,
-  Card,
-  CardContent,
-  InputLabel,
-  Modal,
-} from "@material-ui/core";
-
-
+import { Card, CardContent, InputLabel, Modal } from "@material-ui/core";
 
 import loadable from "@loadable/component";
 import moment from "moment";