From 9ab6dfe53e2be0857683ab39247bbe46df72c400 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 6 Apr 2025 18:47:55 +0200
Subject: [PATCH] Improve navbar

---
 ui/src/components/Layout.tsx        |  3 ++-
 ui/src/components/NavigationBar.tsx | 40 ++++++++++++++++-------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 5132a13..3e85962 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -11,6 +11,7 @@ interface LayoutProps {
 
 export function Layout({ children }: LayoutProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
   return (
     <div className="flex h-screen">
       <Button
@@ -18,7 +19,7 @@ export function Layout({ children }: LayoutProps) {
         isIconOnly
         className={twMerge(
           "fixed  z-50 md:hidden",
-          isMobileMenuOpen ? "top-2 left-15" : "top-2 left-4"
+          isMobileMenuOpen ? "top-2 left-55" : "top-2 left-4"
         )}
         onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
       >
diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx
index 48a52e1..2eaef78 100644
--- a/ui/src/components/NavigationBar.tsx
+++ b/ui/src/components/NavigationBar.tsx
@@ -206,7 +206,9 @@ export const SideNavigation = ({
 }: {
   isMobileMenuOpen: boolean;
 }) => {
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const isCollapsable = !isMobileMenuOpen;
+
+  const [isCollapsed, setIsCollapsed] = useState(isCollapsable ? true : false);
 
   return (
     <div
@@ -243,23 +245,25 @@ export const SideNavigation = ({
             XTablo
           </h1>
         </RouterLink>
-        <Button
-          variant="plain"
-          isIconOnly
-          onPress={() => setIsCollapsed(!isCollapsed)}
-          className={twMerge(
-            isCollapsed ? "relative" : "absolute top-2 right-2",
-            "size-5 p-1",
-            "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
-            "transition-all duration-300",
-            "bg-gray-200 dark:bg-gray-900",
-            "rounded-full shadow-md",
-            "opacity-0 group-hover:opacity-100",
-            "hover:scale-110"
-          )}
-        >
-          <Icon>{isCollapsed ? <PlusIcon /> : <MinusIcon />}</Icon>
-        </Button>
+        {isCollapsable && (
+          <Button
+            variant="plain"
+            isIconOnly
+            onPress={() => setIsCollapsed(!isCollapsed)}
+            className={twMerge(
+              isCollapsed ? "relative" : "absolute top-2 right-2",
+              "size-5 p-1",
+              "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
+              "transition-all duration-300",
+              "bg-gray-200 dark:bg-gray-900",
+              "rounded-full shadow-md",
+              "opacity-0 group-hover:opacity-100",
+              "hover:scale-110"
+            )}
+          >
+            <Icon>{isCollapsed ? <PlusIcon /> : <MinusIcon />}</Icon>
+          </Button>
+        )}
       </div>
       <MainNavigation isCollapsed={isCollapsed} />