Update skyvern UI responsiveness (#1098)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/root/Header.tsx

@@ -1,6 +1,7 @@
 import { DiscordLogoIcon } from "@radix-ui/react-icons";
 import GitHubButton from "react-github-btn";
 import { Link, useMatch } from "react-router-dom";
+import { NavigationHamburgerMenu } from "./NavigationHamburgerMenu";
 
 function Header() {
   const match = useMatch("/workflows/:workflowPermanentId/edit");
@@ -11,24 +12,27 @@ function Header() {
 
   return (
     <header>
-      <div className="flex h-24 items-center justify-end gap-4 px-6">
-        <Link
-          to="https://discord.com/invite/fG2XXEuQX3"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <DiscordLogoIcon className="h-7 w-7" />
-        </Link>
-        <div className="h-7">
-          <GitHubButton
-            href="https://github.com/skyvern-ai/skyvern"
-            data-color-scheme="no-preference: dark; light: dark; dark: dark;"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Star skyvern-ai/skyvern on GitHub"
+      <div className="flex h-24 items-center px-6">
+        <NavigationHamburgerMenu />
+        <div className="ml-auto flex gap-4">
+          <Link
+            to="https://discord.com/invite/fG2XXEuQX3"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            Star
-          </GitHubButton>
+            <DiscordLogoIcon className="h-7 w-7" />
+          </Link>
+          <div className="h-7">
+            <GitHubButton
+              href="https://github.com/skyvern-ai/skyvern"
+              data-color-scheme="no-preference: dark; light: dark; dark: dark;"
+              data-size="large"
+              data-show-count="true"
+              aria-label="Star skyvern-ai/skyvern on GitHub"
+            >
+              Star
+            </GitHubButton>
+          </div>
         </div>
       </div>
     </header>

skyvern-frontend/src/routes/root/NavigationHamburgerMenu.tsx

@@ -0,0 +1,34 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { HamburgerMenuIcon } from "@radix-ui/react-icons";
+import { SidebarContent } from "./SidebarContent";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+
+function NavigationHamburgerMenu() {
+  return (
+    <div className="block lg:hidden">
+      <Drawer direction="left">
+        <DrawerTrigger asChild>
+          <HamburgerMenuIcon className="size-6 cursor-pointer" />
+        </DrawerTrigger>
+        <DrawerContent className="bottom-2 left-2 top-2 mt-0 w-64 rounded border-0 px-6">
+          <VisuallyHidden.Root>
+            <DrawerHeader>
+              <DrawerTitle>Skyvern</DrawerTitle>
+              <DrawerDescription>Skyvern App Navigation</DrawerDescription>
+            </DrawerHeader>
+          </VisuallyHidden.Root>
+          <SidebarContent />
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}
+
+export { NavigationHamburgerMenu };

skyvern-frontend/src/routes/root/RootLayout.tsx

@@ -1,59 +1,21 @@
-import { Link, Outlet } from "react-router-dom";
 import { Toaster } from "@/components/ui/toaster";
-import { SideNav } from "./SideNav";
-import { PinLeftIcon, PinRightIcon } from "@radix-ui/react-icons";
-import { Logo } from "@/components/Logo";
-import { cn } from "@/util/utils";
-import { Button } from "@/components/ui/button";
-import { LogoMinimized } from "@/components/LogoMinimized";
-import { Header } from "./Header";
 import { useSidebarStore } from "@/store/SidebarStore";
+import { cn } from "@/util/utils";
+import { Outlet } from "react-router-dom";
+import { Header } from "./Header";
+import { Sidebar } from "./Sidebar";
 
 function RootLayout() {
-  const { collapsed, setCollapsed } = useSidebarStore();
+  const collapsed = useSidebarStore((state) => state.collapsed);
 
   return (
     <>
       <div className="h-full w-full">
-        <aside
-          className={cn("fixed h-screen min-h-screen border-r-2 px-6", {
-            "w-64": !collapsed,
-            "w-28": collapsed,
-          })}
-        >
-          <div className="flex h-full flex-col">
-            <Link to={window.location.origin}>
-              <div className="flex h-24 items-center">
-                {collapsed ? <LogoMinimized /> : <Logo />}
-              </div>
-            </Link>
-            <SideNav collapsed={collapsed} />
-            <div
-              className={cn("mt-auto flex min-h-16", {
-                "justify-center": collapsed,
-                "justify-end": !collapsed,
-              })}
-            >
-              <Button
-                size="icon"
-                variant="ghost"
-                onClick={() => {
-                  setCollapsed(!collapsed);
-                }}
-              >
-                {collapsed ? (
-                  <PinRightIcon className="h-6 w-6" />
-                ) : (
-                  <PinLeftIcon className="h-6 w-6" />
-                )}
-              </Button>
-            </div>
-          </div>
-        </aside>
+        <Sidebar />
         <Header />
         <main
-          className={cn("pb-4 pl-64", {
-            "pl-28": collapsed,
+          className={cn("lg:pb-4 lg:pl-64", {
+            "lg:pl-28": collapsed,
           })}
         >
           <Outlet />

skyvern-frontend/src/routes/root/Sidebar.tsx

@@ -0,0 +1,23 @@
+import { useSidebarStore } from "@/store/SidebarStore";
+import { cn } from "@/util/utils";
+import { SidebarContent } from "./SidebarContent";
+
+function Sidebar() {
+  const collapsed = useSidebarStore((state) => state.collapsed);
+
+  return (
+    <aside
+      className={cn(
+        "fixed hidden h-screen min-h-screen border-r-2 px-6 lg:block",
+        {
+          "w-64": !collapsed,
+          "w-28": collapsed,
+        },
+      )}
+    >
+      <SidebarContent useCollapsedState />
+    </aside>
+  );
+}
+
+export { Sidebar };

skyvern-frontend/src/routes/root/SidebarContent.tsx

@@ -0,0 +1,50 @@
+import { Logo } from "@/components/Logo";
+import { LogoMinimized } from "@/components/LogoMinimized";
+import { useSidebarStore } from "@/store/SidebarStore";
+import { Link } from "react-router-dom";
+import { SideNav } from "./SideNav";
+import { cn } from "@/util/utils";
+import { Button } from "@/components/ui/button";
+import { PinLeftIcon, PinRightIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  useCollapsedState?: boolean;
+};
+
+function SidebarContent({ useCollapsedState }: Props) {
+  const { collapsed: collapsedState, setCollapsed } = useSidebarStore();
+  const collapsed = useCollapsedState ? collapsedState : false;
+
+  return (
+    <div className="flex h-full flex-col">
+      <Link to={window.location.origin}>
+        <div className="flex h-24 items-center">
+          {collapsed ? <LogoMinimized /> : <Logo />}
+        </div>
+      </Link>
+      <SideNav collapsed={collapsed} />
+      <div
+        className={cn("mt-auto flex min-h-16", {
+          "justify-center": collapsed,
+          "justify-end": !collapsed,
+        })}
+      >
+        <Button
+          size="icon"
+          variant="ghost"
+          onClick={() => {
+            setCollapsed(!collapsed);
+          }}
+        >
+          {collapsed ? (
+            <PinRightIcon className="h-6 w-6" />
+          ) : (
+            <PinLeftIcon className="hidden h-6 w-6 lg:block" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { SidebarContent };