From 03065d2c1dc29b9f4be234c0a84f850416936a25 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 29 Apr 2024 19:38:46 +0530
Subject: [PATCH] [WEB-1094] chore: inbox sidebar mobile responsiveness (#4309)

* chore: inbox sidebar mobile responsiveness

* chore: code refactor
---
 .../inbox/content/inbox-issue-header.tsx           | 10 +++++-----
 .../inbox/content/inbox-issue-mobile-header.tsx    | 12 ++++++------
 web/components/inbox/content/root.tsx              | 10 +++++-----
 web/components/inbox/root.tsx                      | 14 +++++++-------
 web/components/inbox/sidebar/inbox-list-item.tsx   |  6 +++---
 web/components/inbox/sidebar/inbox-list.tsx        |  6 +++---
 web/components/inbox/sidebar/root.tsx              |  6 +++---
 7 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/web/components/inbox/content/inbox-issue-header.tsx b/web/components/inbox/content/inbox-issue-header.tsx
index 4fbc4ccbf..34ac6b5a9 100644
--- a/web/components/inbox/content/inbox-issue-header.tsx
+++ b/web/components/inbox/content/inbox-issue-header.tsx
@@ -39,12 +39,12 @@ type TInboxIssueActionsHeader = {
   projectId: string;
   inboxIssue: IInboxIssueStore | undefined;
   isSubmitting: "submitting" | "submitted" | "saved";
-  toggleMobileSidebar: boolean;
-  setToggleMobileSidebar: (value: boolean) => void;
+  isMobileSidebar: boolean;
+  setIsMobileSidebar: (value: boolean) => void;
 };
 
 export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((props) => {
-  const { workspaceSlug, projectId, inboxIssue, isSubmitting, toggleMobileSidebar, setToggleMobileSidebar } = props;
+  const { workspaceSlug, projectId, inboxIssue, isSubmitting, isMobileSidebar, setIsMobileSidebar } = props;
   // states
   const [isSnoozeDateModalOpen, setIsSnoozeDateModalOpen] = useState(false);
   const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
@@ -340,8 +340,8 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           isAcceptedOrDeclined={isAcceptedOrDeclined}
           handleInboxIssueNavigation={handleInboxIssueNavigation}
           workspaceSlug={workspaceSlug}
-          toggleMobileSidebar={toggleMobileSidebar}
-          setToggleMobileSidebar={setToggleMobileSidebar}
+          isMobileSidebar={isMobileSidebar}
+          setIsMobileSidebar={setIsMobileSidebar}
         />
       </div>
     </>
diff --git a/web/components/inbox/content/inbox-issue-mobile-header.tsx b/web/components/inbox/content/inbox-issue-mobile-header.tsx
index f817657f3..cd26bfccc 100644
--- a/web/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/web/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -38,8 +38,8 @@ type Props = {
   setIsSnoozeDateModalOpen: (value: boolean) => void;
   setSelectDuplicateIssue: (value: boolean) => void;
   handleCopyIssueLink: () => void;
-  toggleMobileSidebar: boolean;
-  setToggleMobileSidebar: (value: boolean) => void;
+  isMobileSidebar: boolean;
+  setIsMobileSidebar: (value: boolean) => void;
 };
 
 export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) => {
@@ -59,8 +59,8 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
     setIsSnoozeDateModalOpen,
     setSelectDuplicateIssue,
     handleCopyIssueLink,
-    toggleMobileSidebar,
-    setToggleMobileSidebar,
+    isMobileSidebar,
+    setIsMobileSidebar,
   } = props;
   const router = useRouter();
   const issue = inboxIssue?.issue;
@@ -71,10 +71,10 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
   return (
     <div className="h-12 relative flex border-custom-border-200 w-full items-center gap-2 px-4">
       <PanelLeft
-        onClick={() => setToggleMobileSidebar(!toggleMobileSidebar)}
+        onClick={() => setIsMobileSidebar(!isMobileSidebar)}
         className={cn(
           "w-4 h-4 flex-shrink-0 mr-2",
-          toggleMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
+          isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
         )}
       />
       <div className="flex items-center gap-2 w-full">
diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx
index b3c97c11a..1ffe35a46 100644
--- a/web/components/inbox/content/root.tsx
+++ b/web/components/inbox/content/root.tsx
@@ -9,12 +9,12 @@ type TInboxContentRoot = {
   workspaceSlug: string;
   projectId: string;
   inboxIssueId: string;
-  toggleMobileSidebar: boolean;
-  setToggleMobileSidebar: (value: boolean) => void;
+  isMobileSidebar: boolean;
+  setIsMobileSidebar: (value: boolean) => void;
 };
 
 export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
-  const { workspaceSlug, projectId, inboxIssueId, toggleMobileSidebar, setToggleMobileSidebar } = props;
+  const { workspaceSlug, projectId, inboxIssueId, isMobileSidebar, setIsMobileSidebar } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // hooks
@@ -45,8 +45,8 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
       <div className="w-full h-full overflow-hidden relative flex flex-col">
         <div className="flex-shrink-0 min-h-[50px] border-b border-custom-border-300">
           <InboxIssueActionsHeader
-            setToggleMobileSidebar={setToggleMobileSidebar}
-            toggleMobileSidebar={toggleMobileSidebar}
+            setIsMobileSidebar={setIsMobileSidebar}
+            isMobileSidebar={isMobileSidebar}
             workspaceSlug={workspaceSlug}
             projectId={projectId}
             inboxIssue={inboxIssue}
diff --git a/web/components/inbox/root.tsx b/web/components/inbox/root.tsx
index 98abc30ac..7d4aff955 100644
--- a/web/components/inbox/root.tsx
+++ b/web/components/inbox/root.tsx
@@ -23,7 +23,7 @@ type TInboxIssueRoot = {
 export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
   const { workspaceSlug, projectId, inboxIssueId, inboxAccessible } = props;
   // states
-  const [toggleMobileSidebar, setToggleMobileSidebar] = useState(false);
+  const [isMobileSidebar, setIsMobileSidebar] = useState(true);
   // hooks
   const { loader, error, fetchInboxIssues } = useProjectInbox();
 
@@ -60,8 +60,8 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
       {!inboxIssueId && (
         <div className="flex lg:hidden items-center px-4 w-full h-12 border-b border-custom-border-200">
           <PanelLeft
-            onClick={() => setToggleMobileSidebar(!toggleMobileSidebar)}
-            className={cn("w-4 h-4 ", toggleMobileSidebar ? "text-custom-primary-100" : " text-custom-text-200")}
+            onClick={() => setIsMobileSidebar(!isMobileSidebar)}
+            className={cn("w-4 h-4 ", isMobileSidebar ? "text-custom-primary-100" : " text-custom-text-200")}
           />
         </div>
       )}
@@ -69,11 +69,11 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
         <div
           className={cn(
             "absolute z-10 top-[50px] lg:!top-0 lg:!relative bg-custom-background-100 flex-shrink-0 w-full lg:w-2/6 bottom-0 transition-all",
-            toggleMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0",
+            isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0"
           )}
         >
           <InboxSidebar
-            setToggleMobileSidebar={setToggleMobileSidebar}
+            setIsMobileSidebar={setIsMobileSidebar}
             workspaceSlug={workspaceSlug.toString()}
             projectId={projectId.toString()}
           />
@@ -81,8 +81,8 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
 
         {inboxIssueId ? (
           <InboxContentRoot
-            setToggleMobileSidebar={setToggleMobileSidebar}
-            toggleMobileSidebar={toggleMobileSidebar}
+            setIsMobileSidebar={setIsMobileSidebar}
+            isMobileSidebar={isMobileSidebar}
             workspaceSlug={workspaceSlug.toString()}
             projectId={projectId.toString()}
             inboxIssueId={inboxIssueId.toString()}
diff --git a/web/components/inbox/sidebar/inbox-list-item.tsx b/web/components/inbox/sidebar/inbox-list-item.tsx
index 89b6a8f8a..21ac42d1e 100644
--- a/web/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/components/inbox/sidebar/inbox-list-item.tsx
@@ -19,11 +19,11 @@ type InboxIssueListItemProps = {
   projectId: string;
   projectIdentifier?: string;
   inboxIssue: IInboxIssueStore;
-  setToggleMobileSidebar: (value: boolean) => void;
+  setIsMobileSidebar: (value: boolean) => void;
 };
 
 export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props) => {
-  const { workspaceSlug, projectId, inboxIssue, projectIdentifier,setToggleMobileSidebar } = props;
+  const { workspaceSlug, projectId, inboxIssue, projectIdentifier, setIsMobileSidebar } = props;
   // router
   const router = useRouter();
   const { inboxIssueId } = router.query;
@@ -35,7 +35,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
 
   const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
     if (inboxIssueId === currentIssueId) event.preventDefault();
-    setToggleMobileSidebar(false);
+    setIsMobileSidebar(false);
   };
 
   if (!issue) return <></>;
diff --git a/web/components/inbox/sidebar/inbox-list.tsx b/web/components/inbox/sidebar/inbox-list.tsx
index a7a19eff1..be435cd77 100644
--- a/web/components/inbox/sidebar/inbox-list.tsx
+++ b/web/components/inbox/sidebar/inbox-list.tsx
@@ -10,18 +10,18 @@ export type InboxIssueListProps = {
   projectId: string;
   projectIdentifier?: string;
   inboxIssues: IInboxIssueStore[];
-  setToggleMobileSidebar: (value: boolean) => void;
+  setIsMobileSidebar: (value: boolean) => void;
 };
 
 export const InboxIssueList: FC<InboxIssueListProps> = observer((props) => {
-  const { workspaceSlug, projectId, projectIdentifier, inboxIssues, setToggleMobileSidebar } = props;
+  const { workspaceSlug, projectId, projectIdentifier, inboxIssues, setIsMobileSidebar } = props;
 
   return (
     <>
       {inboxIssues.map((inboxIssue) => (
         <Fragment key={inboxIssue.id}>
           <InboxIssueListItem
-            setToggleMobileSidebar={setToggleMobileSidebar}
+            setIsMobileSidebar={setIsMobileSidebar}
             workspaceSlug={workspaceSlug}
             projectId={projectId}
             projectIdentifier={projectIdentifier}
diff --git a/web/components/inbox/sidebar/root.tsx b/web/components/inbox/sidebar/root.tsx
index e71728567..9521e6571 100644
--- a/web/components/inbox/sidebar/root.tsx
+++ b/web/components/inbox/sidebar/root.tsx
@@ -19,7 +19,7 @@ import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 type IInboxSidebarProps = {
   workspaceSlug: string;
   projectId: string;
-  setToggleMobileSidebar: (value: boolean) => void;
+  setIsMobileSidebar: (value: boolean) => void;
 };
 
 const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
@@ -34,7 +34,7 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
 ];
 
 export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
-  const { workspaceSlug, projectId, setToggleMobileSidebar } = props;
+  const { workspaceSlug, projectId, setIsMobileSidebar } = props;
   // ref
   const containerRef = useRef<HTMLDivElement>(null);
   const elementRef = useRef<HTMLDivElement>(null);
@@ -110,7 +110,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
           >
             {inboxIssuesArray.length > 0 ? (
               <InboxIssueList
-                setToggleMobileSidebar={setToggleMobileSidebar}
+                setIsMobileSidebar={setIsMobileSidebar}
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 projectIdentifier={currentProjectDetails?.identifier}