thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: sidebar collapse state not working (#2452)

Browse Source
This commit is contained in:
Aaryan Khandelwal
2023-10-17 12:18:36 +05:30
committed by GitHub
parent 8cd13e94d5
commit fc99615875
3 changed files with 32 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/components/workspace/help-section.tsx
View File

@@ -51,27 +51,25 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
const isCollapsed = themeStore.sidebarCollapsed || false;
return (
<>
<div
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
themeStore?.sidebarCollapsed ? "flex-col" : ""
isCollapsed ? "flex-col" : ""
}`}
>
{!themeStore?.sidebarCollapsed && (
{!isCollapsed && (
<div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
Free Plan
</div>
)}
<div
className={`flex items-center gap-1 ${
themeStore?.sidebarCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"
}`}
>
<div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"}`}>
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
themeStore?.sidebarCollapsed ? "w-full" : ""
isCollapsed ? "w-full" : ""
}`}
onClick={() => {
const e = new KeyboardEvent("keydown", {
@@ -85,7 +83,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<button
type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
themeStore?.sidebarCollapsed ? "w-full" : ""
isCollapsed ? "w-full" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
>
@@ -94,18 +92,18 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<button
type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
onClick={() => themeStore.setSidebarCollapsed(!isCollapsed)}
>
<MoveLeft className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
themeStore?.sidebarCollapsed ? "w-full" : ""
isCollapsed ? "w-full" : ""
}`}
onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
onClick={() => themeStore.setSidebarCollapsed(!isCollapsed)}
>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${themeStore?.sidebarCollapsed ? "rotate-180" : ""}`} />
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
</button>
</div>
@@ -121,7 +119,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
>
<div
className={`absolute bottom-2 min-w-[10rem] ${
themeStore?.sidebarCollapsed ? "left-full" : "-left-[75px]"
isCollapsed ? "left-full" : "-left-[75px]"
} rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
ref={helpOptionsRef}
>