[WEB-5525] improvement: update WorkspaceMenuRoot to use variant prop for layout adjustments (#8196)

apps/web/ce/components/desktop/helper.ts

@@ -0,0 +1 @@
+export const isSidebarToggleVisible = () => true;

apps/web/ce/components/desktop/index.ts

@@ -0,0 +1,2 @@
+export * from "./helper";
+export * from "./sidebar-workspace-menu";

apps/web/ce/components/desktop/sidebar-workspace-menu.tsx

@@ -0,0 +1,3 @@
+export function DesktopSidebarWorkspaceMenu() {
+  return null;
+}

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

@@ -20,7 +20,7 @@ export const TopNavigationRoot = observer(() => {
     >
       {/* Workspace Menu */}
       <div className="shrink-0 flex-1">
-        <WorkspaceMenuRoot />
+        <WorkspaceMenuRoot variant="top-navigation" />
       </div>
       {/* Power K Search */}
       <div className="shrink-0">

apps/web/core/components/navigation/app-rail-root.tsx

@@ -8,6 +8,8 @@ import { cn } from "@plane/utils";
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
 // hooks
 import { useAppRailPreferences } from "@/hooks/use-navigation-preferences";
+// plane web imports
+import { DesktopSidebarWorkspaceMenu } from "@/plane-web/components/desktop";
 // local imports
 import { AppSidebarItemsRoot } from "./items-root";
 
@@ -39,6 +41,7 @@ export const AppRailRoot = observer(() => {
                 "gap-3": !showLabel,
               })}
             >
+              <DesktopSidebarWorkspaceMenu />
               <AppSidebarItemsRoot showLabel={showLabel} />
               <div className="border-t border-custom-sidebar-border-300 mx-2" />
               <AppSidebarItem

apps/web/core/components/sidebar/sidebar-toggle-button.tsx

@@ -2,11 +2,13 @@ import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { isSidebarToggleVisible } from "@/plane-web/components/desktop";
 
 export const AppSidebarToggleButton = observer(function AppSidebarToggleButton() {
   // store hooks
   const { toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
 
+  if (!isSidebarToggleVisible()) return null;
   return (
     <button
       className="flex items-center justify-center size-6 rounded-md text-custom-text-400 hover:text-custom-primary-100 hover:bg-custom-background-90"

apps/web/core/components/workspace/sidebar/dropdown.tsx

@@ -1,10 +0,0 @@
-// hooks
-import { UserMenuRoot } from "./user-menu-root";
-import { WorkspaceMenuRoot } from "./workspace-menu-root";
-
-export const SidebarDropdown = () => (
-  <div className="flex items-center justify-center gap-1.5 w-full">
-    <WorkspaceMenuRoot />
-    <UserMenuRoot />
-  </div>
-);

apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx

@@ -25,11 +25,11 @@ import { WorkspaceLogo } from "../logo";
 import SidebarDropdownItem from "./dropdown-item";
 
 type WorkspaceMenuRootProps = {
-  renderLogoOnly?: boolean;
+  variant: "sidebar" | "top-navigation";
 };
 
 export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: WorkspaceMenuRootProps) {
-  const { renderLogoOnly } = props;
+  const { variant } = props;
   // store hooks
   const { toggleSidebar, toggleAnySidebarDropdown } = useAppTheme();
   const { data: currentUser } = useUser();
@@ -72,8 +72,8 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
     <Menu
       as="div"
       className={cn("relative h-full flex max-w-48 w-fit whitespace-nowrap truncate", {
-        "justify-center text-center": renderLogoOnly,
-        "flex-grow justify-stretch text-left truncate": !renderLogoOnly,
+        "w-full justify-center text-center": variant === "sidebar",
+        "flex-grow justify-stretch text-left truncate": variant === "top-navigation",
       })}
     >
       {({ open, close }: { open: boolean; close: () => void }) => {
@@ -84,9 +84,9 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
 
         return (
           <>
-            {renderLogoOnly ? (
+            {variant === "sidebar" && (
               <Menu.Button
-                className={cn("flex items-center justify-center size-8 rounded", {
+                className={cn("flex w-full items-center justify-center size-8 rounded-md", {
                   "bg-custom-sidebar-background-80": open,
                 })}
               >
@@ -97,26 +97,29 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                       <WorkspaceLogo
                         logo={activeWorkspace?.logo_url}
                         name={activeWorkspace?.name}
-                        classNames="size-8 rounded-md"
+                        classNames="size-8 rounded-md border border-custom-border-200"
                       />
                     ),
                   }}
                 />
               </Menu.Button>
-            ) : (
+            )}
+            {variant === "top-navigation" && (
               <Menu.Button
                 className={cn(
-                  "group/menu-button flex items-center  gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none ",
+                  "group/menu-button flex items-center gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none justify-between flex-grow",
                   {
-                    "justify-center text-center": renderLogoOnly,
-                    "justify-between flex-grow": !renderLogoOnly,
                     "bg-custom-sidebar-background-80": open,
                   }
                 )}
                 aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
               >
                 <div className="flex-grow flex items-center gap-2 truncate">
-                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
+                  <WorkspaceLogo
+                    logo={activeWorkspace?.logo_url}
+                    name={activeWorkspace?.name}
+                    classNames="border border-custom-border-200 size-7"
+                  />
                   <h4 className="truncate text-base font-medium text-custom-text-100">
                     {activeWorkspace?.name ?? t("loading")}
                   </h4>
@@ -128,7 +131,6 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                 />
               </Menu.Button>
             )}
-
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -139,7 +141,15 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items as={Fragment}>
-                <div className="fixed top-10 left-4 z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
+                <div
+                  className={cn(
+                    "fixed z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none",
+                    {
+                      "top-11 left-14": variant === "sidebar",
+                      "top-10 left-4": variant === "top-navigation",
+                    }
+                  )}
+                >
                   <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
                     <span className="rounded-md text-left px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
                       {currentUser?.email}