[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:
Akshita Goyal 2024-07-18 15:52:48 +05:30 committed by GitHub
parent 2d434f0b9c
commit 78dd15a801
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 15 additions and 9 deletions

View file

@ -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(