Care UI Slideover, upgrades Notifications List and Mobile Sidebar

src/CAREUI/interactive/SlideOver.tsx

@@ -0,0 +1,118 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+import { classNames } from "../../Utils/utils";
+import CareIcon from "../icons/CareIcon";
+
+export type SlideFromEdges = "left" | "top" | "right" | "bottom";
+
+export type SlideOverProps = {
+  open: boolean;
+  setOpen: (state: boolean) => void;
+  children: React.ReactNode;
+  slideFrom?: SlideFromEdges;
+  dialogClass?: string;
+  title?: string;
+  onlyChild?: boolean;
+  onCloseClick?: () => void;
+};
+
+export default function SlideOver({
+  open,
+  setOpen,
+  children,
+  slideFrom = "right",
+  dialogClass,
+  title,
+  onlyChild = false,
+  onCloseClick,
+}: SlideOverProps) {
+  const directionClasses = {
+    left: {
+      stick: "left-0 top-0 h-full",
+      animateStart: "-translate-x-20",
+      animateEnd: "translate-x-0",
+      proportions: " cui-slideover-x",
+    },
+    right: {
+      stick: "right-0 top-0 h-full",
+      animateStart: "translate-x-20",
+      animateEnd: "-translate-x-0",
+      proportions: "cui-slideover-x",
+    },
+    top: {
+      stick: "top-0 left-0 w-full",
+      animateStart: "-translate-y-20",
+      animateEnd: "translate-y-0",
+      proportions: "cui-slideover-y",
+    },
+    bottom: {
+      stick: "bottom-0 left-0 w-full",
+      animateStart: "translate-y-20",
+      animateEnd: "-translate-y-0",
+      proportions: "cui-slideover-y",
+    },
+  };
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-in-out duration-500"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in-out duration-500"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black/75 backdrop-blur-sm transition-all" />
+        </Transition.Child>
+        <Transition.Child
+          as={Fragment}
+          enter="transition-all"
+          enterFrom={directionClasses[slideFrom].animateStart + " opacity-0"}
+          enterTo={directionClasses[slideFrom].animateEnd + " opacity-100"}
+          leave="transition-all"
+          leaveFrom={directionClasses[slideFrom].animateEnd + " opacity-100"}
+          leaveTo={directionClasses[slideFrom].animateStart + " opacity-0"}
+        >
+          <Dialog.Panel
+            className={classNames(
+              "fixed pointer-events-auto",
+              directionClasses[slideFrom].stick,
+              !onlyChild && "md:p-2"
+            )}
+          >
+            {onlyChild ? (
+              children
+            ) : (
+              <div
+                className={classNames(
+                  "bg-white md:rounded-xl flex flex-col",
+                  directionClasses[slideFrom].proportions,
+                  dialogClass
+                )}
+              >
+                <div className="flex items-center p-2 gap-2 pt-4">
+                  <button
+                    className="w-8 h-8 rounded-lg flex justify-center items-center text-2xl hover:bg-black/20"
+                    onClick={() => {
+                      setOpen(false);
+                      onCloseClick && onCloseClick();
+                    }}
+                  >
+                    <CareIcon className="care-l-arrow-left" />
+                  </button>
+                  <div>
+                    <h1 className="text-xl font-black">{title}</h1>
+                  </div>
+                </div>
+                <div className="overflow-auto flex-1 p-4">{children}</div>
+              </div>
+            )}
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition.Root>
+  );
+}

src/Components/Common/Sidebar/Sidebar.tsx

@@ -1,11 +1,11 @@
-import { Fragment, useEffect, useRef, useState } from "react";
+import { 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";
 import useConfig from "../../../Common/hooks/useConfig";
+import SlideOver from "../../../CAREUI/interactive/SlideOver";
 
 export const SIDEBAR_SHRINK_PREFERENCE_KEY = "sidebarShrinkPreference";
 
@@ -18,13 +18,13 @@ type StatelessSidebarProps =
       shrinkable: true;
       shrinked: boolean;
       setShrinked: (state: boolean) => void;
-      setOpenCB?: undefined;
+      onItemClick?: undefined;
     }
   | {
       shrinkable?: false;
       shrinked?: false;
       setShrinked?: undefined;
-      setOpenCB: (open: boolean) => void;
+      onItemClick: (open: boolean) => void;
     };
 
 const NavItems = [
@@ -47,7 +47,7 @@ const StatelessSidebar = ({
   shrinkable = false,
   shrinked = false,
   setShrinked,
-  setOpenCB,
+  onItemClick,
 }: StatelessSidebarProps) => {
   const activeLink = useActiveLink();
   const Item = shrinked ? ShrinkedSidebarItem : SidebarItem;
@@ -134,12 +134,15 @@ const StatelessSidebar = ({
                 {...i}
                 icon={<CareIcon className={`${i.icon} h-5`} />}
                 selected={i.to === activeLink}
-                do={() => setOpenCB && setOpenCB(false)}
+                do={() => onItemClick && onItemClick(false)}
               />
             );
           })}
 
-          <NotificationItem shrinked={shrinked} />
+          <NotificationItem
+            shrinked={shrinked}
+            onClickCB={() => onItemClick && onItemClick(false)}
+          />
           <Item
             text="Dashboard"
             to={dashboard_url}
@@ -195,43 +198,11 @@ interface MobileSidebarProps {
   setOpen: (state: boolean) => void;
 }
 
-export const MobileSidebar = ({ open, setOpen }: MobileSidebarProps) => {
+export const MobileSidebar = (props: MobileSidebarProps) => {
   return (
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={setOpen}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-in-out duration-500"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in-out duration-500"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black/75 backdrop-blur-sm transition-all" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 overflow-hidden">
-          <div className="absolute inset-0 overflow-hidden">
-            <div className="pointer-events-none fixed inset-y-0 left-0 flex max-w-full pr-10">
-              <Transition.Child
-                as={Fragment}
-                enter="transform transition ease-out duration-200"
-                enterFrom="-translate-x-full"
-                enterTo="translate-x-0"
-                leave="transform transition ease-in duration-200"
-                leaveFrom="translate-x-0"
-                leaveTo="-translate-x-full"
-              >
-                <Dialog.Panel className="pointer-events-auto w-screen max-w-fit">
-                  <StatelessSidebar setOpenCB={setOpen} />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <SlideOver {...props} slideFrom="left" onlyChild>
+      <StatelessSidebar onItemClick={props.setOpen} />
+    </SlideOver>
   );
 };