[WEB-1918]: Fix/sidebar collapse issue (#5157)
* fix: sidebar collapsed on smaller screen by default * fix: linting * fix: export issue
This commit is contained in:
parent
2d434f0b9c
commit
78dd15a801
5 changed files with 15 additions and 9 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { FC, useRef } from "react";
|
||||
import { FC, useEffect, useRef } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
// components
|
||||
import {
|
||||
|
|
@ -15,6 +15,7 @@ import { cn } from "@/helpers/common.helper";
|
|||
import { useAppTheme } from "@/hooks/store";
|
||||
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
|
||||
// plane web components
|
||||
import useSize from "@/hooks/use-window-size";
|
||||
import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
|
||||
|
||||
export interface IAppSidebar {}
|
||||
|
|
@ -22,6 +23,7 @@ export interface IAppSidebar {}
|
|||
export const AppSidebar: FC<IAppSidebar> = observer(() => {
|
||||
// store hooks
|
||||
const { toggleSidebar, sidebarCollapsed } = useAppTheme();
|
||||
const windowSize = useSize();
|
||||
// refs
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
|
@ -33,6 +35,14 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
|
|||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (windowSize[0] < 768) {
|
||||
!sidebarCollapsed && toggleSidebar();
|
||||
} else {
|
||||
sidebarCollapsed && toggleSidebar();
|
||||
}
|
||||
}, [windowSize, sidebarCollapsed]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue