add-tooltip-expand-signout-profile

ohcnetwork · Oct 9, 2024 · 203782a · 203782a
1 parent 13a4814
commit 203782a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 54 deletions.
diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx
@@ -123,6 +123,7 @@ const StatelessSidebar = ({
           <ToggleShrink
             shrinked={shrinked}
             toggle={() => setShrinked && setShrinked(!shrinked)}
+            handleOverflow={handleOverflow}
           />
         </div>
       )}
@@ -142,6 +143,7 @@ const StatelessSidebar = ({
             <ToggleShrink
               shrinked={shrinked}
               toggle={() => setShrinked && setShrinked(!shrinked)}
+              handleOverflow={handleOverflow}
             />
           </div>
         )}
@@ -188,7 +190,7 @@ const StatelessSidebar = ({
         </div>
         <div className="hidden md:block md:flex-1" />
 
-        <SidebarUserCard shrinked={shrinked} />
+        <SidebarUserCard shrinked={shrinked} handleOverflow={handleOverflow} />
       </div>
     </nav>
   );
@@ -230,20 +232,45 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
 interface ToggleShrinkProps {
   shrinked: boolean;
   toggle: () => void;
+  handleOverflow: (value: boolean) => void;
 }
 
-const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => (
-  <div
-    className={`flex h-5 w-5 cursor-pointer items-center justify-center self-end rounded bg-gray-300 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
-      shrinked ? "mx-auto" : "mr-4"
-    } transition-all duration-200 ease-in-out`}
-    onClick={toggle}
-  >
-    <CareIcon
-      icon="l-angle-up"
-      className={`text-3xl ${
-        shrinked ? "rotate-90" : "-rotate-90"
-      } transition-all delay-150 duration-300 ease-out`}
-    />
-  </div>
-);
+interface ToggleShrinkProps {
+  shrinked: boolean;
+  toggle: () => void;
+  handleOverflow: (value: boolean) => void;
+}
+
+const ToggleShrink: React.FC<ToggleShrinkProps> = ({
+  shrinked,
+  toggle,
+  handleOverflow,
+}) => {
+  const Item = shrinked ? ShrinkedSidebarItem : SidebarItem;
+
+  return (
+    <div
+      className={`flex h-5 w-5 cursor-pointer items-center justify-center self-end rounded bg-gray-300 p-2 py-2 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
+        shrinked ? "mx-auto" : "mr-4"
+      } transition-all duration-200 ease-in-out`}
+    >
+      <Item
+        text={shrinked ? "Expand" : ""}
+        icon={
+          <CareIcon
+            icon="l-angle-up"
+            className={`text-3xl ${
+              shrinked ? "rotate-90" : "-rotate-90"
+            } transition-all delay-150 duration-300 ease-out`}
+          />
+        }
+        do={() => {
+          toggle();
+
+          handleOverflow(!shrinked);
+        }}
+        handleOverflow={handleOverflow}
+      />
+    </div>
+  );
+};
diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx
@@ -1,62 +1,54 @@
 import React from "react";
-import { Link } from "raviger";
+
 import { useTranslation } from "react-i18next";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { formatName, formatDisplayName } from "../../../Utils/utils";
 import useAuthUser, { useAuthContext } from "../../../Common/hooks/useAuthUser";
 import { Avatar } from "@/Components/Common/Avatar";
+import { ShrinkedSidebarItem, SidebarItem } from "./SidebarItem";
 
 interface SidebarUserCardProps {
   shrinked: boolean;
+  handleOverflow: (value: boolean) => void;
 }
 
-const SidebarUserCard: React.FC<SidebarUserCardProps> = ({ shrinked }) => {
+const SidebarUserCard: React.FC<SidebarUserCardProps> = ({
+  shrinked,
+  handleOverflow,
+}) => {
   const { t } = useTranslation();
   const user = useAuthUser();
   const { signOut } = useAuthContext();
+  const Item = shrinked ? ShrinkedSidebarItem : SidebarItem;
 
   return (
     <div className="my-2 flex flex-col">
-      <Link
-        href="/user/profile"
-        className="tooltip relative ml-1 mr-2 h-10 flex-1 cursor-pointer rounded-lg font-normal text-gray-900 transition-all duration-200 ease-in-out hover:bg-gray-200 md:flex-none"
-      >
-        <div
-          id="user-profile-name"
-          className={`flex h-full items-center justify-start transition-all duration-200 ease-in-out ${shrinked ? "pl-2" : "pl-5 pr-4"}`}
-        >
-          <div className="flex-none text-lg">
-            <Avatar name={formatDisplayName(user)} className="w-6" />
-          </div>
-          {!shrinked && (
-            <span className="flex w-full grow items-center pl-4 text-sm tracking-wide">
-              {formatName(user)}
-            </span>
-          )}
-        </div>
-      </Link>
       <div
-        onClick={signOut}
-        className="tooltip relative ml-1 mr-2 mt-4 h-10 flex-1 cursor-pointer rounded-lg font-normal text-gray-900 transition-all duration-200 ease-in-out hover:bg-gray-200 md:mt-0 md:flex-none"
+        className={`flex flex-col py-3 transition-all duration-300 ease-in-out${shrinked ? "w-14" : "w-60"}`}
       >
-        <div
-          id="sign-out-button"
-          className={`flex h-full items-center justify-start transition-all duration-200 ease-in-out ${shrinked ? "pl-2" : "pl-5 pr-4"}`}
-        >
-          <div className="flex-none text-lg">
-            <CareIcon
-              icon="l-sign-out-alt"
-              className="text-2xl text-gray-900"
+        <Item
+          text={t(formatName(user))}
+          to="/user/profile"
+          icon={
+            <Avatar
+              name={formatDisplayName(user)}
+              className="w-6 text-gray-900"
             />
-          </div>
-
-          {!shrinked && (
-            <div className="flex w-full items-center pl-4 text-sm tracking-wide text-gray-900">
-              {t("sign_out")}
-            </div>
-          )}
-        </div>
+          }
+          selected={false}
+          handleOverflow={handleOverflow}
+        />
       </div>
+      <Item
+        text={t("sign_out")}
+        to="#"
+        icon={
+          <CareIcon icon="l-sign-out-alt" className="text-2xl text-gray-900" />
+        }
+        selected={false}
+        do={signOut}
+        handleOverflow={handleOverflow}
+      />
     </div>
   );
 };