[WEB-700] chore: sidebar hamburger refactor

web/components/cycles/cycle-mobile-header.tsx

@@ -109,7 +109,7 @@ export const CycleMobileHeader = () => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+      <div className="flex justify-evenly py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100">
         <CustomMenu
           maxHeight={"md"}
           className="flex flex-grow justify-center text-custom-text-200 text-sm"

web/components/cycles/cycles-list-mobile-header.tsx

@@ -0,0 +1,52 @@
+import { observer } from "mobx-react";
+// ui
+import { CustomMenu } from "@plane/ui";
+// icon
+import { List } from "lucide-react";
+// constants
+import { CYCLE_VIEW_LAYOUTS } from "constants/cycle";
+// hooks
+import { useCycleFilter, useProject } from "hooks/store";
+
+const CyclesListMobileHeader = observer(() => {
+  const { currentProjectDetails } = useProject();
+  // hooks
+  const { updateDisplayFilters } = useCycleFilter();
+  return (
+    <div className="flex justify-center sm:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        // placement="bottom-start"
+        customButton={
+          <span className="flex items-center gap-2">
+            <List className="h-4 w-4" />
+            <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+          </span>
+        }
+        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {CYCLE_VIEW_LAYOUTS.map((layout) => {
+          if (layout.key == "gantt") return;
+          return (
+            <CustomMenu.MenuItem
+              key={layout.key}
+              onClick={() => {
+                updateDisplayFilters(currentProjectDetails!.id, {
+                  layout: layout.key,
+                });
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </div>
+  );
+});
+
+export default CyclesListMobileHeader;

web/components/headers/cycle-issues.tsx

@@ -9,8 +9,6 @@ import { ArrowRight, Plus, PanelRight } from "lucide-react";
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { CycleMobileHeader } from "components/cycles/cycle-mobile-header";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
@@ -159,9 +157,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         cycleDetails={cycleDetails ?? undefined}
       />
       <div className="relative z-[15] w-full items-center gap-x-2 gap-y-4">
-        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
-            <SidebarHamburgerToggle />
             <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
@@ -211,9 +208,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                           {issueCount && issueCount > 0 ? (
                             <Tooltip
                               isMobile={isMobile}
-                              tooltipContent={`There are ${issueCount} ${
-                                issueCount > 1 ? "issues" : "issue"
-                              } in this cycle`}
+                              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"
+                                } in this cycle`}
                               position="bottom"
                             >
                               <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
@@ -299,9 +295,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             <PanelRight className={cn("w-4 h-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
           </button>
         </div>
-        <div className="block sm:block md:hidden">
-          <CycleMobileHeader />
-        </div>
       </div>
     </>
   );

web/components/headers/cycles.tsx

@@ -1,19 +1,15 @@
-import { FC, useCallback } from "react";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { List, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 // hooks
 // ui
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
 // components
 import { BreadcrumbLink } from "components/common";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { CYCLE_VIEW_LAYOUTS } from "constants/cycle";
 import { EUserProjectRoles } from "constants/project";
 import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
-import { TCycleLayoutOptions } from "@plane/types";
 import { ProjectLogo } from "components/project";
 
 export const CyclesHeader: FC = observer(() => {
@@ -33,20 +29,11 @@ export const CyclesHeader: FC = observer(() => {
   const canUserCreateCycle =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
-  const { setValue: setCycleLayout } = useLocalStorage<TCycleLayoutOptions>("cycle_layout", "list");
-
-  const handleCurrentLayout = useCallback(
-    (_layout: TCycleLayoutOptions) => {
-      setCycleLayout(_layout);
-    },
-    [setCycleLayout]
-  );
 
   return (
     <div className="relative z-10 items-center justify-between gap-x-2 gap-y-4">
-      <div className="flex border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
           <div>
             <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
@@ -90,35 +77,6 @@ export const CyclesHeader: FC = observer(() => {
           </div>
         )}
       </div>
-      <div className="flex justify-center sm:hidden">
-        <CustomMenu
-          maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
-          // placement="bottom-start"
-          customButton={
-            <span className="flex items-center gap-2">
-              <List className="h-4 w-4" />
-              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
-            </span>
-          }
-          customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
-          closeOnSelect
-        >
-          {CYCLE_VIEW_LAYOUTS.map((layout) => (
-            <CustomMenu.MenuItem
-              key={layout.key}
-              onClick={() => {
-                // handleLayoutChange(ISSUE_LAYOUTS[index].key);
-                handleCurrentLayout(layout.key as TCycleLayoutOptions);
-              }}
-              className="flex items-center gap-2"
-            >
-              <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
-      </div>
     </div>
   );
 });

web/components/headers/global-issues.tsx

@@ -7,7 +7,6 @@ import { usePlatformOS } from "hooks/use-platform-os";
 import { List, PlusIcon, Sheet } from "lucide-react";
 import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
 import { BreadcrumbLink } from "components/common";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
 // components
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
@@ -109,9 +108,8 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
         <div className="relative flex gap-2">
-          <SidebarHamburgerToggle />
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
@@ -137,9 +135,8 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                 <span>
                   <Tooltip tooltipContent={layout.title} isMobile={isMobile}>
                     <div
-                      className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                        activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
-                      }`}
+                      className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                        }`}
                     >
                       <layout.icon
                         size={14}

web/components/headers/module-issues.tsx

@@ -8,9 +8,7 @@ import { ArrowRight, PanelRight, Plus } from "lucide-react";
 import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
-import { ModuleMobileHeader } from "components/modules/module-mobile-header";
 import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
 import { cn } from "helpers/common.helper";
@@ -160,9 +158,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         moduleDetails={moduleDetails ?? undefined}
       />
       <div className="relative z-[15] items-center gap-x-2 gap-y-4">
-        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
-            <SidebarHamburgerToggle />
             <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
@@ -211,10 +208,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                           <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
                           {issueCount && issueCount > 0 ? (
                             <Tooltip
-                            isMobile={isMobile}
-                              tooltipContent={`There are ${issueCount} ${
-                                issueCount > 1 ? "issues" : "issue"
-                              } in this module`}
+                              isMobile={isMobile}
+                              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"
+                                } in this module`}
                               position="bottom"
                             >
                               <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
@@ -309,7 +305,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             </button>
           </div>
         </div>
-        <ModuleMobileHeader />
       </div>
     </>
   );