chore: app sidebar state (#3644)

* chore: app sidebar state fix * chore: app sidebar state fix
makeplane · Feb 13, 2024 · 06496ff · 06496ff
1 parent 247937d
commit 06496ff
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -8,7 +8,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
   return (
     <div
       className="w-7 h-7 flex-shrink-0 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
-      onClick={() => themStore.toggleSidebar()}
+      onClick={() => themStore.toggleMobileSidebar()}
     >
       <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
     </div>

diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from "react";
+import { FC, useRef } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import {
@@ -12,43 +12,27 @@ import { ProjectSidebarList } from "components/project";
 import { useApplication } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
-export interface IAppSidebar { }
+export interface IAppSidebar {}
 
 export const AppSidebar: FC<IAppSidebar> = observer(() => {
   // store hooks
   const { theme: themStore } = useApplication();
   const ref = useRef<HTMLDivElement>(null);
 
   useOutsideClickDetector(ref, () => {
-    if (themStore.sidebarCollapsed === false) {
+    if (themStore.mobileSidebarCollapsed === false) {
       if (window.innerWidth < 768) {
-        themStore.toggleSidebar();
+        themStore.toggleMobileSidebar();
       }
     }
   });
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth <= 768) {
-        themStore.toggleSidebar(true);
-      }
-      if (window.innerWidth > 768) {
-        themStore.toggleSidebar(false);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [themStore]);
-
   return (
     <div
       className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
         fixed md:relative
-        ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
-        sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
+        ${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
         md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
         lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
       `}

diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
@@ -6,12 +6,14 @@ import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
 export interface IThemeStore {
   // observables
   theme: string | null;
+  mobileSidebarCollapsed: boolean | undefined;
   sidebarCollapsed: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined;
   issueDetailSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: boolean) => void;
+  toggleMobileSidebar: (collapsed?: boolean) => void;
   setTheme: (theme: any) => void;
   toggleProfileSidebar: (collapsed?: boolean) => void;
   toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
@@ -20,6 +22,7 @@ export interface IThemeStore {
 
 export class ThemeStore implements IThemeStore {
   // observables
+  mobileSidebarCollapsed: boolean | undefined = true;
   sidebarCollapsed: boolean | undefined = undefined;
   theme: string | null = null;
   profileSidebarCollapsed: boolean | undefined = undefined;
@@ -31,13 +34,15 @@ export class ThemeStore implements IThemeStore {
   constructor(_rootStore: any | null = null) {
     makeObservable(this, {
       // observable
+      mobileSidebarCollapsed: observable.ref,
       sidebarCollapsed: observable.ref,
       theme: observable.ref,
       profileSidebarCollapsed: observable.ref,
       workspaceAnalyticsSidebarCollapsed: observable.ref,
       issueDetailSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
+      toggleMobileSidebar: action,
       setTheme: action,
       toggleProfileSidebar: action,
       toggleWorkspaceAnalyticsSidebar: action,
@@ -61,6 +66,19 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
   };
 
+  /**
+   * Toggle mobile sidebar collapsed state
+   * @param collapsed
+   */
+  toggleMobileSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.mobileSidebarCollapsed = !this.mobileSidebarCollapsed;
+    } else {
+      this.mobileSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("mobile_sidebar_collapsed", this.mobileSidebarCollapsed.toString());
+  };
+
   /**
    * Toggle the profile sidebar collapsed state
    * @param collapsed
@@ -88,13 +106,13 @@ export class ThemeStore implements IThemeStore {
   };
 
   toggleIssueDetailSidebar = (collapsed?: boolean) => {
-    if(collapsed === undefined) {
+    if (collapsed === undefined) {
       this.issueDetailSidebarCollapsed = !this.issueDetailSidebarCollapsed;
     } else {
       this.issueDetailSidebarCollapsed = collapsed;
     }
     localStorage.setItem("issue_detail_sidebar_collapsed", this.issueDetailSidebarCollapsed.toString());
-  }
+  };
 
   /**
    * Sets the user theme and applies it to the platform