regression: sidebar toggle button position (#8186)

* fix: sidebar toggle button position

* chore: remove border radius

Author: aaryan610

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx

@@ -2,9 +2,13 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { Header, Row } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { AppHeader } from "@/components/core/app-header";
 import { TabNavigationRoot } from "@/components/navigation";
+import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 // local components
@@ -14,6 +18,7 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
   // router
   const { workspaceSlug, workItem } = useParams();
   // store hooks
+  const { sidebarCollapsed } = useAppTheme();
   const {
     issue: { getIssueById, getIssueIdByIdentifier },
   } = useIssueDetail();
@@ -29,8 +34,13 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
         <div className="z-20">
           <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
             <div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
-              <div className="flex items-center h-full w-full flex-1">
-                <Header className="h-full">
+              <div className="flex items-center gap-2 size-full flex-1">
+                {sidebarCollapsed && (
+                  <div className="shrink-0">
+                    <AppSidebarToggleButton />
+                  </div>
+                )}
+                <Header className={cn("h-full", { "pl-1.5": !sidebarCollapsed })}>
                   <Header.LeftItem className="h-full max-w-full">
                     <TabNavigationRoot
                       workspaceSlug={workspaceSlug}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx

@@ -1,14 +1,24 @@
 "use client";
 
+import { observer } from "mobx-react";
 import { Outlet } from "react-router";
+// plane imports
 import { Header, Row } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
 import { TabNavigationRoot } from "@/components/navigation/tab-navigation-root";
+import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+// local imports
 import type { Route } from "./+types/layout";
 
-export default function ProjectLayout({ params }: Route.ComponentProps) {
+function ProjectLayout({ params }: Route.ComponentProps) {
   // router
   const { workspaceSlug, projectId } = params;
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
   // preferences
   const { preferences: projectPreferences } = useProjectNavigationPreferences();
 
@@ -18,9 +28,14 @@ export default function ProjectLayout({ params }: Route.ComponentProps) {
         <div className="z-20">
           <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
             <div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
-              <div className="flex items-center h-full w-full flex-1">
-                <Header className="h-full">
-                  <Header.LeftItem className="h-full max-w-full">
+              <div className="flex items-center gap-2 size-full flex-1">
+                {sidebarCollapsed && (
+                  <div className="shrink-0">
+                    <AppSidebarToggleButton />
+                  </div>
+                )}
+                <Header className={cn("h-full", { "pl-1.5": !sidebarCollapsed })}>
+                  <Header.LeftItem className="h-full max-w-full flex items-center gap-2">
                     <TabNavigationRoot workspaceSlug={workspaceSlug} projectId={projectId} />
                   </Header.LeftItem>
                 </Header>
@@ -33,3 +48,5 @@ export default function ProjectLayout({ params }: Route.ComponentProps) {
     </>
   );
 }
+
+export default observer(ProjectLayout);

apps/web/ce/components/common/extended-app-header.tsx

@@ -1,16 +1,26 @@
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// components
 import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
+// hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 
 export const ExtendedAppHeader = observer(function ExtendedAppHeader(props: { header: ReactNode }) {
   const { header } = props;
+  // params
+  const { projectId, workItem } = useParams();
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
   // store hooks
   const { sidebarCollapsed } = useAppTheme();
+  // derived values
+  const shouldShowSidebarToggleButton = projectPreferences.navigationMode === "accordion" || (!projectId && !workItem);
 
   return (
     <>
-      {sidebarCollapsed && <AppSidebarToggleButton />}
+      {sidebarCollapsed && shouldShowSidebarToggleButton && <AppSidebarToggleButton />}
       <div className="w-full">{header}</div>
     </>
   );

apps/web/ce/components/workspace/content-wrapper.tsx

@@ -12,7 +12,7 @@ export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex flex-col relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
+    <div className="flex flex-col relative size-full overflow-hidden bg-custom-background-90 transition-all ease-in-out duration-300">
       <TopNavigationRoot />
       <div className="relative flex size-full overflow-hidden">
         <AppRailRoot />

apps/web/core/components/navigation/tab-navigation-root.tsx

@@ -167,7 +167,7 @@ export const TabNavigationRoot: FC<TTabNavigationRootProps> = observer((props) =
       />
 
       {/* container for the tab navigation */}
-      <div className="flex items-center gap-3 overflow-hidden pl-1.5 size-full">
+      <div className="flex items-center gap-3 overflow-hidden size-full">
         <div className="flex items-center gap-2 shrink-0">
           <ProjectHeader project={project} />
           <div className="shrink-0">