fix: gantt sidebar links (#3940)

Author: aaryan610

web/components/cycles/gantt-chart/blocks.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // hooks
@@ -33,12 +34,12 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
           cycleStatus === "current"
             ? "#09a953"
             : cycleStatus === "upcoming"
-              ? "#f7ae59"
-              : cycleStatus === "completed"
-                ? "#3f76ff"
-                : cycleStatus === "draft"
-                  ? "rgb(var(--color-text-200))"
-                  : "",
+            ? "#f7ae59"
+            : cycleStatus === "completed"
+            ? "#3f76ff"
+            : cycleStatus === "draft"
+            ? "rgb(var(--color-text-200))"
+            : "",
       }}
       onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`)}
     >
@@ -63,8 +64,6 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
 
 export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { cycleId } = props;
-  // router
-  const router = useRouter();
   // store hooks
   const {
     router: { workspaceSlug },
@@ -76,25 +75,25 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
 
   return (
-    <div
+    <Link
       className="relative flex h-full w-full items-center gap-2"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`)}
+      href={`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
     >
       <ContrastIcon
         className="h-5 w-5 flex-shrink-0"
         color={`${
           cycleStatus === "current"
             ? "#09a953"
             : cycleStatus === "upcoming"
-              ? "#f7ae59"
-              : cycleStatus === "completed"
-                ? "#3f76ff"
-                : cycleStatus === "draft"
-                  ? "rgb(var(--color-text-200))"
-                  : ""
+            ? "#f7ae59"
+            : cycleStatus === "completed"
+            ? "#3f76ff"
+            : cycleStatus === "draft"
+            ? "rgb(var(--color-text-200))"
+            : ""
         }`}
       />
       <h6 className="flex-grow truncate text-sm font-medium">{cycleDetails?.name}</h6>
-    </div>
+    </Link>
   );
 });

web/components/gantt-chart/chart/views/month.tsx

@@ -19,7 +19,7 @@ export const MonthChartView: FC<any> = observer(() => {
       {monthBlocks?.map((block, rootIndex) => (
         <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
           <div
-            className="w-full sticky top-0 z-[5] bg-custom-background-100"
+            className="w-full sticky top-0 z-[5] bg-custom-background-100 flex-shrink-0"
             style={{
               height: `${HEADER_HEIGHT}px`,
             }}
@@ -55,7 +55,7 @@ export const MonthChartView: FC<any> = observer(() => {
               ))}
             </div>
           </div>
-          <div className="h-full w-full flex divide-x divide-custom-border-100/50">
+          <div className="h-full w-full flex-grow flex divide-x divide-custom-border-100/50">
             {block?.children?.map((monthDay, index) => (
               <div
                 key={`column-${rootIndex}-${index}`}

web/components/modules/gantt-chart/blocks.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // hooks
@@ -54,8 +55,6 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
 
 export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { moduleId } = props;
-  // router
-  const router = useRouter();
   // store hooks
   const {
     router: { workspaceSlug },
@@ -65,14 +64,12 @@ export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const moduleDetails = getModuleById(moduleId);
 
   return (
-    <div
+    <Link
       className="relative flex h-full w-full items-center gap-2"
-      onClick={() =>
-        router.push(`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`)
-      }
+      href={`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
     >
       <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
       <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
-    </div>
+    </Link>
   );
 });