[PWA-1] fix: pwa app sidebar redirection (#5416)

* fix: pwa app sidebar redirection * chore: pwa app sidebar improvement
makeplane · Aug 28, 2024 · 3ee1477 · 3ee1477
1 parent 59697d3
commit 3ee1477
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/...core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/...core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -1,6 +1,9 @@
 "use client";
 import React, { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
+import { useAppTheme } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   projectId: string | null;
@@ -10,8 +13,11 @@ type Props = {
   isSidebarCollapsed: boolean;
 };
 
-export const FavoriteItemTitle: FC<Props> = (props) => {
+export const FavoriteItemTitle: FC<Props> = observer((props) => {
   const { projectId, href, title, icon, isSidebarCollapsed } = props;
+  // store hooks
+  const { toggleSidebar } = useAppTheme();
+  const { isMobile } = usePlatformOS();
 
   const linkClass = "flex items-center gap-1.5 truncate w-full";
   const collapsedClass =
@@ -22,6 +28,7 @@ export const FavoriteItemTitle: FC<Props> = (props) => {
       const projectItem = document.getElementById(`${projectId}`);
       projectItem?.scrollIntoView({ behavior: "smooth" });
     }
+    if (isMobile) toggleSidebar();
   };
 
   return (
@@ -30,4 +37,4 @@ export const FavoriteItemTitle: FC<Props> = (props) => {
       {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
     </Link>
   );
-};
+});
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -8,7 +8,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
 import {
   PenSquare,
@@ -35,6 +35,7 @@ import {
   DropIndicator,
   DragHandle,
   Intake,
+  ControlLink,
 } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
@@ -126,7 +127,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
   const projectRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
-  // router params
+  // router
+  const router = useRouter();
   const { workspaceSlug, projectId: URLProjectId } = useParams();
   // pathname
   const pathname = usePathname();
@@ -281,11 +283,16 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     else setIsProjectListOpen(false);
   }, [URLProjectId]);
 
+  const handleItemClick = () => {
+    if (!isProjectListOpen && !isMobile) router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
+    setIsProjectListOpen((prev) => !prev);
+  };
+
   return (
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={() => setLeaveProjectModal(false)} />
-      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={isProjectListOpen}>
+      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={isProjectListOpen} as="div">
         <div
           id={`sidebar-${projectId}-${projectListType}`}
           className={cn("relative", {
@@ -328,22 +335,19 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
               </Tooltip>
             )}
             {isSidebarCollapsed ? (
-              <Link
+              <ControlLink
                 href={`/${workspaceSlug}/projects/${project.id}/issues`}
                 className={cn("flex-grow flex items-center gap-1.5 truncate text-left select-none", {
                   "justify-center": isSidebarCollapsed,
                 })}
+                onClick={handleItemClick}
               >
-                <Disclosure.Button
-                  as="button"
-                  className="size-8 aspect-square flex-shrink-0 grid place-items-center"
-                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                >
+                <Disclosure.Button as="button" className="size-8 aspect-square flex-shrink-0 grid place-items-center">
                   <div className="size-4 grid place-items-center flex-shrink-0">
                     <Logo logo={project.logo_props} size={16} />
                   </div>
                 </Disclosure.Button>
-              </Link>
+              </ControlLink>
             ) : (
               <>
                 <Tooltip
@@ -352,21 +356,24 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   disabled={!isSidebarCollapsed}
                   isMobile={isMobile}
                 >
-                  <Link href={`/${workspaceSlug}/projects/${project.id}/issues`} className="flex-grow flex truncate">
+                  <ControlLink
+                    href={`/${workspaceSlug}/projects/${project.id}/issues`}
+                    className="flex-grow flex truncate"
+                    onClick={handleItemClick}
+                  >
                     <Disclosure.Button
                       as="button"
                       type="button"
                       className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {
                         "justify-center": isSidebarCollapsed,
                       })}
-                      onClick={() => setIsProjectListOpen(!isProjectListOpen)}
                     >
                       <div className="size-4 grid place-items-center flex-shrink-0">
                         <Logo logo={project.logo_props} size={16} />
                       </div>
                       <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{project.name}</p>
                     </Disclosure.Button>
-                  </Link>
+                  </ControlLink>
                 </Tooltip>
                 <CustomMenu
                   customButton={