feat: top menu for mobile resolution with sheet menu

src/components/layout/AppMenu.tsx

@@ -1,10 +1,21 @@
+import { Menu } from "lucide-react";
+import { useState } from "react";
+
 import logo from "/Tangle_white.png";
 import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
 import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
 import { CopyText } from "@/components/shared/CopyText/CopyText";
 import ImportPipeline from "@/components/shared/ImportPipeline";
-import { InlineStack } from "@/components/ui/layout";
+import { Button } from "@/components/ui/button";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Link } from "@/components/ui/link";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { TOP_NAV_HEIGHT } from "@/utils/constants";
 
@@ -17,6 +28,7 @@ const AppMenu = () => {
   const requiresAuthorization = isAuthorizationRequired();
   const { componentSpec } = useComponentSpec();
   const title = componentSpec?.name;
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
     <div
@@ -41,17 +53,46 @@ const AppMenu = () => {
         </InlineStack>
 
         <InlineStack gap="2" wrap="nowrap" className="shrink-0">
-          <InlineStack gap="2" className="md:flex" wrap="nowrap">
+          {/* Desktop action buttons - hidden on mobile */}
+          <InlineStack gap="2" className="hidden md:flex" wrap="nowrap">
             <CloneRunButton componentSpec={componentSpec} />
             <ImportPipeline />
             <NewPipelineButton />
           </InlineStack>
 
+          {/* Always visible settings */}
           <InlineStack gap="2" wrap="nowrap">
             <BackendStatus />
             <PersonalPreferences />
             {requiresAuthorization && <TopBarAuthentication />}
           </InlineStack>
+
+          {/* Mobile hamburger menu - visible only on mobile */}
+          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+            <SheetTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="md:hidden text-white hover:bg-stone-800"
+                aria-label="Open menu"
+              >
+                <Menu className="h-5 w-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="right"
+              className="w-fit bg-stone-900 border-stone-700 px-4"
+            >
+              <SheetHeader>
+                <SheetTitle className="text-white">Actions</SheetTitle>
+              </SheetHeader>
+              <BlockStack gap="3" className="mt-6">
+                <CloneRunButton componentSpec={componentSpec} />
+                <ImportPipeline />
+                <NewPipelineButton />
+              </BlockStack>
+            </SheetContent>
+          </Sheet>
         </InlineStack>
       </InlineStack>
     </div>