From 85d94c85363335c8ab15d53d76c46d14c2d1bbdf Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 6 Apr 2025 18:41:48 +0200
Subject: [PATCH] Fix mobile menu

---
 ui/src/components/Layout.tsx        |  7 +++++--
 ui/src/components/NavigationBar.tsx | 12 +++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 0b01f9c..5132a13 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -16,7 +16,10 @@ export function Layout({ children }: LayoutProps) {
       <Button
         variant="plain"
         isIconOnly
-        className="fixed top-4 left-4 z-50 md:hidden"
+        className={twMerge(
+          "fixed  z-50 md:hidden",
+          isMobileMenuOpen ? "top-2 left-15" : "top-2 left-4"
+        )}
         onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
       >
         <Icon>
@@ -32,7 +35,7 @@ export function Layout({ children }: LayoutProps) {
             : "-translate-x-full md:translate-x-0"
         )}
       >
-        <SideNavigation />
+        <SideNavigation isMobileMenuOpen={isMobileMenuOpen} />
       </div>
 
       <main className="flex-1 overflow-auto p-4 md:p-6">{children}</main>
diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx
index 5398427..48a52e1 100644
--- a/ui/src/components/NavigationBar.tsx
+++ b/ui/src/components/NavigationBar.tsx
@@ -201,7 +201,11 @@ export function ControlledOpenState({ isCollapsed }: { isCollapsed: boolean }) {
   );
 }
 
-export const SideNavigation = () => {
+export const SideNavigation = ({
+  isMobileMenuOpen,
+}: {
+  isMobileMenuOpen: boolean;
+}) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   return (
@@ -212,7 +216,9 @@ export const SideNavigation = () => {
         isCollapsed ? "w-14" : "w-52",
         "md:flex",
         "transform md:transform-none",
-        isCollapsed ? "-translate-x-0" : "-translate-x-full md:translate-x-0"
+        isMobileMenuOpen
+          ? "translate-x-0"
+          : "-translate-x-full md:translate-x-0"
       )}
     >
       <div className="relative flex flex-col items-center px-3 py-3">
@@ -231,7 +237,7 @@ export const SideNavigation = () => {
           <h1
             className={twMerge(
               "text-lg font-bold transition-all duration-300 text-slate-900 dark:text-white whitespace-nowrap",
-              isCollapsed ? "w-0 opacity-0 h-0" : "w-auto opacity-100"
+              isCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
             )}
           >
             XTablo