From 910b9974f671c00ae7780f32fc92a013886df060 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa
 <72977554+Cristhianzl@users.noreply.github.com>
Date: Thu, 18 Jul 2024 15:40:28 -0300
Subject: [PATCH] fix: add correctly switch case to components on sidebar
 (#2802)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (headerComponent/index.tsx): Remove unnecessary width styling from header-end-division class
🔧 (sidebarComponent/index.tsx): Ensure correct import of cn function from utils/utils file
💡 (sidebarComponent/index.tsx): Refactor sidebarContent logic to cover all conditions and provide a default case if necessary

* 📝 (sidebarComponent/index.tsx): remove unnecessary comment about ensuring correct import of cn function
---
 .../src/components/headerComponent/index.tsx  |  2 +-
 .../src/components/sidebarComponent/index.tsx | 26 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index d03ff4f95..bcd169bac 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -134,7 +134,7 @@ export default function Header(): JSX.Element {
           </Link>
         )}
       </div>
-      <div className="header-end-division lg:w-[407px]">
+      <div className="header-end-division">
         <div className="header-end-display">
           <a
             href="https://github.com/langflow-ai/langflow"
diff --git a/src/frontend/src/components/sidebarComponent/index.tsx b/src/frontend/src/components/sidebarComponent/index.tsx
index 8cdbe5907..dbf80c771 100644
--- a/src/frontend/src/components/sidebarComponent/index.tsx
+++ b/src/frontend/src/components/sidebarComponent/index.tsx
@@ -34,22 +34,22 @@ export default function SidebarNav({
   const pathValues = ["folder", "components", "flows", "all"];
   const isFolderPath = pathValues.some((value) => pathname.includes(value));
 
+  // Ensure all conditions are covered and provide a default case if necessary
+  const sidebarContent =
+    items.length > 0 ? (
+      <SideBarButtonsComponent items={items} pathname={pathname} />
+    ) : !loadingFolders && folders?.length > 0 && isFolderPath ? (
+      <SideBarFoldersButtonsComponent
+        pathname={pathname}
+        handleChangeFolder={handleChangeFolder}
+        handleDeleteFolder={handleDeleteFolder}
+      />
+    ) : null;
+
   return (
     <nav className={cn(className)} {...props}>
       <HorizontalScrollFadeComponent>
-        {items.length > 0 ? (
-          <SideBarButtonsComponent items={items} pathname={pathname} />
-        ) : (
-          !loadingFolders &&
-          folders?.length > 0 &&
-          isFolderPath && (
-            <SideBarFoldersButtonsComponent
-              pathname={pathname}
-              handleChangeFolder={handleChangeFolder}
-              handleDeleteFolder={handleDeleteFolder}
-            />
-          )
-        )}
+        {sidebarContent!}
       </HorizontalScrollFadeComponent>
     </nav>
   );