binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: issue detail responsiveness (#3625)

Browse source
This commit is contained in:
Ramesh Kumar Chandra 2024-02-12 17:01:24 +05:30 • committed by GitHub
parent eb0af8de59
commit e29edfc02b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 80 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View file

@ -1,4 +1,4 @@
import React, { ReactElement } from "react";
import React, { ReactElement, useEffect } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
@ -12,7 +12,7 @@ import { Loader } from "@plane/ui";
// types
import { NextPageWithLayout } from "lib/types";
// fetch-keys
import { useIssueDetail } from "hooks/store";
import { useApplication, useIssueDetail } from "hooks/store";
const IssueDetailsPage: NextPageWithLayout = observer(() => {
// router
@ -23,6 +23,7 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
fetchIssue,
issue: { getIssueById },
} = useIssueDetail();
const { theme: themeStore } = useApplication();
const { isLoading } = useSWR(
workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
@ -34,6 +35,21 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
const issue = getIssueById(issueId?.toString() || "") || undefined;
const issueLoader = !issue || isLoading ? true : false;
useEffect(() => {
const handleToggleIssueDetailSidebar = () => {
if (window && window.innerWidth < 768) {
themeStore.toggleIssueDetailSidebar(true);
}
if (window && themeStore.issueDetailSidebarCollapsed && window.innerWidth >= 768) {
themeStore.toggleIssueDetailSidebar(false);
}
};
window.addEventListener("resize", handleToggleIssueDetailSidebar);
handleToggleIssueDetailSidebar();
return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
}, [themeStore]);
return (
<>
{issueLoader ? (