[WEB-5506] regression: navigation revamp bugs (#8180)

Author: aaryan610

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

@@ -1,10 +1,12 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// hooks
+// plane imports
 import { Header, Row } from "@plane/ui";
+// components
 import { AppHeader } from "@/components/core/app-header";
 import { TabNavigationRoot } from "@/components/navigation";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 // local components
 import { WorkItemDetailsHeader } from "./work-item-header";
 
@@ -18,25 +20,29 @@ export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDet
   // derived values
   const issueId = getIssueIdByIdentifier(workItem?.toString());
   const issueDetails = issueId ? getIssueById(issueId?.toString()) : undefined;
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
 
   return (
     <>
-      <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">
-                  <TabNavigationRoot
-                    workspaceSlug={workspaceSlug}
-                    projectId={issueDetails?.project_id?.toString() ?? ""}
-                  />
-                </Header.LeftItem>
-              </Header>
+      {projectPreferences.navigationMode === "horizontal" && (
+        <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">
+                    <TabNavigationRoot
+                      workspaceSlug={workspaceSlug}
+                      projectId={issueDetails?.project_id?.toString() ?? ""}
+                    />
+                  </Header.LeftItem>
+                </Header>
+              </div>
             </div>
-          </div>
-        </Row>
-      </div>
+          </Row>
+        </div>
+      )}
       <AppHeader header={<WorkItemDetailsHeader />} />
     </>
   );

apps/web/ce/components/navigations/top-navigation-root.tsx

@@ -15,7 +15,6 @@ export const TopNavigationRoot = observer(() => {
   return (
     <div
       className={cn("flex items-center justify-evenly min-h-11 w-full px-3.5 z-[27] transition-all duration-300", {
-        "px-3.5": showLabel,
         "px-2": !showLabel,
       })}
     >

apps/web/core/components/home/root.tsx

@@ -4,7 +4,6 @@ import useSWR from "swr";
 // plane imports
 import { PRODUCT_TOUR_TRACKER_EVENTS } from "@plane/constants";
 import { ContentWrapper } from "@plane/ui";
-import { cn } from "@plane/utils";
 // components
 import { TourRoot } from "@/components/onboarding/tour";
 // helpers
@@ -60,7 +59,7 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
       )}
       <>
         <HomePeekOverviewsRoot />
-        <ContentWrapper className={cn("gap-6 bg-custom-background-100 mx-auto scrollbar-hide px-page-x lg:px-0")}>
+        <ContentWrapper className="gap-6 bg-custom-background-100 mx-auto scrollbar-hide px-page-x">
           <div className="max-w-[800px] mx-auto w-full">
             {currentUser && <UserGreetingsView user={currentUser} />}
             <DashboardWidgets />