fix: app sidebar toggle (#3829)

makeplane · Feb 28, 2024 · 34301e4 · 34301e4
1 parent 51f795f
commit 34301e4
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 71 deletions.
diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -5,17 +5,17 @@ import { observer } from "mobx-react";
 
 type Props = {
   onClick?: () => void;
-}
+};
 
 export const SidebarHamburgerToggle: FC<Props> = observer((props) => {
-  const { onClick } = props
+  const { onClick } = props;
   const { theme: themeStore } = useApplication();
   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={() => {
-        if (onClick) onClick()
-        else themeStore.toggleMobileSidebar()
+        if (onClick) onClick();
+        else themeStore.toggleSidebar();
       }}
     >
       <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />

diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
@@ -144,7 +144,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
   const handleProjectClick = () => {
     if (window.innerWidth < 768) {
-      themeStore.toggleMobileSidebar();
+      themeStore.toggleSidebar();
     }
   };
 

diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
@@ -10,7 +10,6 @@ import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-reac
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 // assets
 import packageJson from "package.json";
-import useSize from "hooks/use-window-size";
 
 const helpOptions = [
   {
@@ -43,11 +42,10 @@ export interface WorkspaceHelpSectionProps {
 export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
   // store hooks
   const {
-    theme: { sidebarCollapsed, toggleSidebar, toggleMobileSidebar },
+    theme: { sidebarCollapsed, toggleSidebar },
     commandPalette: { toggleShortcutModal },
   } = useApplication();
 
-  const [windowWidth] = useSize();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // refs
@@ -60,8 +58,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
   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 px-4 py-2 ${isCollapsed ? "flex-col" : ""
-          }`}
+        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+          isCollapsed ? "flex-col" : ""
+        }`}
       >
         {!isCollapsed && (
           <div className="w-1/2 cursor-default rounded-md bg-green-500/10 px-2.5 py-1.5 text-center text-sm font-medium text-green-500 outline-none">
@@ -72,8 +71,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent="Shortcuts">
             <button
               type="button"
-              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${isCollapsed ? "w-full" : ""
-                }`}
+              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+                isCollapsed ? "w-full" : ""
+              }`}
               onClick={() => toggleShortcutModal(true)}
             >
               <Zap className="h-3.5 w-3.5" />
@@ -82,8 +82,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent="Help">
             <button
               type="button"
-              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${isCollapsed ? "w-full" : ""
-                }`}
+              className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+                isCollapsed ? "w-full" : ""
+              }`}
               onClick={() => setIsNeedHelpOpen((prev) => !prev)}
             >
               <HelpCircle className="h-3.5 w-3.5" />
@@ -93,17 +94,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 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
-            onClick={() => windowWidth <= 768 ? toggleMobileSidebar() : toggleSidebar()}
+            onClick={() => toggleSidebar()}
           >
             <MoveLeft className="h-3.5 w-3.5" />
           </button>
 
           <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
             <button
               type="button"
-              className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${isCollapsed ? "w-full" : ""
-                }`}
-              onClick={() => windowWidth <= 768 ? toggleMobileSidebar() : toggleSidebar()}
+              className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+                isCollapsed ? "w-full" : ""
+              }`}
+              onClick={() => toggleSidebar()}
             >
               <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
             </button>
@@ -121,8 +123,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
             leaveTo="transform opacity-0 scale-95"
           >
             <div
-              className={`absolute bottom-2 min-w-[10rem] ${isCollapsed ? "left-full" : "-left-[75px]"
-                } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+              className={`absolute bottom-2 min-w-[10rem] ${
+                isCollapsed ? "left-full" : "-left-[75px]"
+              } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
               ref={helpOptionsRef}
             >
               <div className="space-y-1 pb-2">

diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
@@ -8,7 +8,7 @@ import { mutate } from "swr";
 import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
 import { usePopper } from "react-popper";
 // hooks
-import { useApplication, useEventTracker, useUser, useWorkspace } from "hooks/store";
+import { useApplication, useUser, useWorkspace } from "hooks/store";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -54,9 +54,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
   const { workspaceSlug } = router.query;
   // store hooks
   const {
-    theme: { sidebarCollapsed, toggleMobileSidebar },
+    theme: { sidebarCollapsed, toggleSidebar },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser();
   const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
   // hooks
@@ -98,7 +97,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
   };
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
-      toggleMobileSidebar();
+      toggleSidebar();
     }
   };
   const workspacesList = Object.values(workspaces ?? {});

diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
@@ -31,7 +31,7 @@ export const WorkspaceSidebarMenu = observer(() => {
 
   const handleLinkClick = (itemKey: string) => {
     if (window.innerWidth < 768) {
-      themeStore.toggleMobileSidebar();
+      themeStore.toggleSidebar();
     }
     captureEvent(SIDEBAR_CLICKED, {
       destination: itemKey,
@@ -52,10 +52,11 @@ export const WorkspaceSidebarMenu = observer(() => {
                   disabled={!themeStore?.sidebarCollapsed}
                 >
                   <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.asPath, `/${workspaceSlug}`)
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                      } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                      link.highlight(router.asPath, `/${workspaceSlug}`)
+                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                    } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                   >
                     {
                       <link.Icon

diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
@@ -20,9 +20,9 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
   const ref = useRef<HTMLDivElement>(null);
 
   useOutsideClickDetector(ref, () => {
-    if (themStore.mobileSidebarCollapsed === false) {
+    if (themStore.sidebarCollapsed === false) {
       if (window.innerWidth < 768) {
-        themStore.toggleMobileSidebar();
+        themStore.toggleSidebar();
       }
     }
   });
@@ -31,8 +31,8 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
     <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.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
-        sm:${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
+        ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
         md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
         lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
       `}

diff --git a/web/layouts/settings-layout/profile/sidebar.tsx b/web/layouts/settings-layout/profile/sidebar.tsx
@@ -40,7 +40,7 @@ export const ProfileLayoutSidebar = observer(() => {
   const { setToastAlert } = useToast();
   // store hooks
   const {
-    theme: { sidebarCollapsed, toggleSidebar, toggleMobileSidebar },
+    theme: { sidebarCollapsed, toggleSidebar },
   } = useApplication();
   const { currentUser, currentUserSettings, signOut } = useUser();
   const { workspaces } = useWorkspace();
@@ -78,7 +78,7 @@ export const ProfileLayoutSidebar = observer(() => {
 
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
-      toggleMobileSidebar();
+      toggleSidebar();
     }
   };
 
@@ -113,8 +113,9 @@ export const ProfileLayoutSidebar = observer(() => {
       <div ref={ref} className="flex h-full w-full flex-col gap-y-4">
         <Link href={`/${redirectWorkspaceSlug}`} onClick={handleItemClick}>
           <div
-            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${sidebarCollapsed ? "justify-center" : ""
-              }`}
+            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${
+              sidebarCollapsed ? "justify-center" : ""
+            }`}
           >
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
               <ChevronLeft className="h-5 w-5" strokeWidth={1} />
@@ -136,10 +137,11 @@ export const ProfileLayoutSidebar = observer(() => {
                 <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
                   <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                     <div
-                      className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.pathname)
-                        ? "bg-custom-primary-100/10 text-custom-primary-100"
-                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                        } ${sidebarCollapsed ? "justify-center" : ""}`}
+                      className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                        link.highlight(router.pathname)
+                          ? "bg-custom-primary-100/10 text-custom-primary-100"
+                          : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                      } ${sidebarCollapsed ? "justify-center" : ""}`}
                     >
                       {<link.Icon className="h-4 w-4" />}
                       {!sidebarCollapsed && link.label}
@@ -160,17 +162,20 @@ export const ProfileLayoutSidebar = observer(() => {
                 <Link
                   key={workspace.id}
                   href={`/${workspace.slug}`}
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${sidebarCollapsed ? "justify-center" : `justify-between`
-                    }`}
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
+                    sidebarCollapsed ? "justify-center" : `justify-between`
+                  }`}
                   onClick={handleItemClick}
                 >
                   <span
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${sidebarCollapsed ? "justify-center" : ""
-                      }`}
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
+                      sidebarCollapsed ? "justify-center" : ""
+                    }`}
                   >
                     <span
-                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${!workspace?.logo && "rounded bg-custom-primary-500 text-white"
-                        }`}
+                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
+                        !workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                      }`}
                     >
                       {workspace?.logo && workspace.logo !== "" ? (
                         <img
@@ -195,8 +200,9 @@ export const ProfileLayoutSidebar = observer(() => {
               <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
                 <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                   <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${sidebarCollapsed ? "justify-center" : ""
-                      }`}
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
+                      sidebarCollapsed ? "justify-center" : ""
+                    }`}
                   >
                     {<link.Icon className="h-4 w-4" />}
                     {!sidebarCollapsed && link.label}
@@ -208,8 +214,9 @@ export const ProfileLayoutSidebar = observer(() => {
         </div>
         <div className="flex flex-shrink-0 flex-grow items-end px-6 py-2">
           <div
-            className={`flex w-full ${sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
-              }`}
+            className={`flex w-full ${
+              sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
+            }`}
           >
             <button
               type="button"
@@ -229,8 +236,9 @@ export const ProfileLayoutSidebar = observer(() => {
             </button>
             <button
               type="button"
-              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${sidebarCollapsed ? "w-full" : ""
-                }`}
+              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+                sidebarCollapsed ? "w-full" : ""
+              }`}
               onClick={() => toggleSidebar()}
             >
               <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />

diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
@@ -6,14 +6,12 @@ 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;
@@ -22,7 +20,6 @@ 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;
@@ -34,15 +31,13 @@ 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,
@@ -66,19 +61,6 @@ 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