[WEB-1918]: Fix/sidebar collapse issue (#5157)

* fix: sidebar collapsed on smaller screen by default

* fix: linting

* fix: export issue

web/app/[workspaceSlug]/(projects)/sidebar.tsx

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

web/ce/components/projects/settings/useProjectColumns.tsx

@@ -11,7 +11,7 @@ interface RowData {
   role: EUserWorkspaceRoles;
 }
 
-const useProjectColumns = () => {
+export const useProjectColumns = () => {
   // states
   const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
 
@@ -71,5 +71,3 @@ const useProjectColumns = () => {
   ];
   return { columns, workspaceSlug, projectId, removeMemberModal, setRemoveMemberModal };
 };
-
-export default useProjectColumns;

web/ce/components/workspace/settings/useMemberColumns.tsx

@@ -4,7 +4,7 @@ import { AccountTypeColumn, NameColumn, RowData } from "@/components/workspace/s
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 import { useUser } from "@/hooks/store";
 
-const useMemberColumns = () => {
+export const useMemberColumns = () => {
   // states
   const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
 
@@ -65,5 +65,3 @@ const useMemberColumns = () => {
   ];
   return { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal };
 };
-
-export default useMemberColumns;

web/core/components/project/member-list-item.tsx

@@ -11,7 +11,7 @@ import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useMember, useProject, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import useProjectColumns from "@/plane-web/components/projects/settings/useProjectColumns";
+import { useProjectColumns } from "@/plane-web/components/projects/settings/useProjectColumns";
 import { IProjectMemberDetails } from "@/store/member/project-member.store";
 
 type Props = {

web/core/components/workspace/settings/members-list-item.tsx

@@ -12,7 +12,7 @@ import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useMember, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import useMemberColumns from "@/plane-web/components/workspace/settings/useMemberColumns";
+import { useMemberColumns } from "@/plane-web/components/workspace/settings/useMemberColumns";
 
 type Props = {
   memberDetails: (IWorkspaceMember | null)[];