diff --git a/src/components/layout/AppMenu.tsx b/src/components/layout/AppMenu.tsx index b2e4f4aca..d8fba88eb 100644 --- a/src/components/layout/AppMenu.tsx +++ b/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 (
{ - + {/* Desktop action buttons - hidden on mobile */} + + {/* Always visible settings */} {requiresAuthorization && } + + {/* Mobile hamburger menu - visible only on mobile */} + + + + + + + Actions + + + + + + + +