From be2c3ccaf8def7afdd04e0f10c99574e5dc312bc Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 16 Apr 2025 14:46:23 +0200
Subject: [PATCH] restore mobile sub navigation (#35058)

---
 .../LayoutHeader/LayoutHeader.tsx             | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 4ebf9b274b6..6a7b5281361 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -83,6 +83,20 @@ const LayoutHeader = ({
 
   return (
     <header className={cn('flex h-12 items-center flex-shrink-0 border-b')}>
+      {showProductMenu && (
+        <div className="flex items-center justify-center border-r flex-0 md:hidden h-full aspect-square">
+          <button
+            title="Menu dropdown button"
+            className={cn(
+              'group/view-toggle ml-4 flex justify-center flex-col border-none space-x-0 items-start gap-1 !bg-transparent rounded-md min-w-[30px] w-[30px] h-[30px]'
+            )}
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <div className="h-px inline-block left-0 w-4 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />
+            <div className="h-px inline-block left-0 w-3 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />
+          </button>
+        </div>
+      )}
       <div
         className={cn(
           'flex items-center justify-between h-full pr-3 flex-1 overflow-x-auto gap-x-8 pl-4'
@@ -119,7 +133,9 @@ const LayoutHeader = ({
                     {exceedingLimits && (
                       <div className="ml-2">
                         <Link href={`/org/${selectedOrganization?.slug}/usage`}>
-                          <Badge variant="destructive">Exceeding usage limits</Badge>
+                          <Badge variant="destructive" className="whitespace-nowrap">
+                            Exceeding usage limits
+                          </Badge>
                         </Link>
                       </div>
                     )}
@@ -156,7 +172,7 @@ const LayoutHeader = ({
             <AnimatePresence>
               {projectRef && (
                 <motion.div
-                  className="ml-3 items-center gap-x-3 hidden md:flex"
+                  className="ml-3 items-center gap-x-3 flex"
                   initial={{ opacity: 0, x: -20 }}
                   animate={{ opacity: 1, x: 0 }}
                   exit={{ opacity: 0, x: -20 }}