Change sidebar width and make it collapsible (#637)

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

skyvern-frontend/src/components/Logo.tsx

@@ -1,6 +1,6 @@
 function Logo() {
   const src = "/logo.png";
-  return <img src={src} />;
+  return <img src={src} alt="Logo" />;
 }
 
 export { Logo };

skyvern-frontend/src/components/LogoMinimized.tsx

@@ -0,0 +1,6 @@
+function LogoMinimized() {
+  const src = "/logo-small.png";
+  return <img src={src} alt="Minimized Logo" />;
+}
+
+export { LogoMinimized };

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

@@ -1,24 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { ExitIcon, PersonIcon } from "@radix-ui/react-icons";
-
-type Props = {
-  name: string;
-};
-
-function Profile({ name }: Props) {
-  return (
-    <div className="flex items-center rounded-lg border-2 p-2">
-      <div className="flex items-center gap-2">
-        <PersonIcon className="h-4 w-4" />
-        <p className="w-40 overflow-hidden text-ellipsis">{name}</p>
-      </div>
-      <div>
-        <Button variant="outline" size="icon">
-          <ExitIcon className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export { Profile };

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

@@ -1,33 +1,60 @@
 import { Link, Outlet } from "react-router-dom";
 import { Toaster } from "@/components/ui/toaster";
 import { SideNav } from "./SideNav";
-import { DiscordLogoIcon } from "@radix-ui/react-icons";
+import {
+  DiscordLogoIcon,
+  PinLeftIcon,
+  PinRightIcon,
+} from "@radix-ui/react-icons";
 import { Logo } from "@/components/Logo";
-import { Profile } from "./Profile";
-import { useContext } from "react";
-import { UserContext } from "@/store/UserContext";
 import GitHubButton from "react-github-btn";
+import { useState } from "react";
+import { cn } from "@/util/utils";
+import { Button } from "@/components/ui/button";
+import { LogoMinimized } from "@/components/LogoMinimized";
 
 function RootLayout() {
-  const user = useContext(UserContext);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
   return (
     <>
-      <div className="h-full w-full px-4">
+      <div className="h-full w-full">
-        <aside className="fixed min-h-screen w-72 shrink-0 border-r-2 px-6">
+        <aside
-          <Link to={window.location.origin}>
+          className={cn("fixed h-screen min-h-screen border-r-2 px-6", {
-            <div className="h-24">
+            "w-64": !sidebarCollapsed,
-              <Logo />
+            "w-28": sidebarCollapsed,
+          })}
+        >
+          <div className="flex h-full flex-col">
+            <Link to={window.location.origin}>
+              <div className="flex h-24 items-center">
+                {sidebarCollapsed ? <LogoMinimized /> : <Logo />}
+              </div>
+            </Link>
+            <SideNav collapsed={sidebarCollapsed} />
+            <div
+              className={cn("mt-auto flex min-h-16", {
+                "justify-center": sidebarCollapsed,
+                "justify-end": !sidebarCollapsed,
+              })}
+            >
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => {
+                  setSidebarCollapsed(!sidebarCollapsed);
+                }}
+              >
+                {sidebarCollapsed ? (
+                  <PinRightIcon className="h-6 w-6" />
+                ) : (
+                  <PinLeftIcon className="h-6 w-6" />
+                )}
+              </Button>
             </div>
-          </Link>
+          </div>
-          <SideNav />
-          {user ? (
-            <div className="absolute bottom-2 left-0 w-72 shrink-0 px-6">
-              <Profile name={user.name} />
-            </div>
-          ) : null}
         </aside>
-        <div className="flex h-24 items-center justify-end gap-4 px-6 pl-72">
+        <div className="flex h-24 items-center justify-end gap-4 px-6">
           <Link
             to="https://discord.com/invite/fG2XXEuQX3"
             target="_blank"
@@ -47,7 +74,11 @@ function RootLayout() {
             </GitHubButton>
           </div>
         </div>
-        <main className="pb-4 pl-72">
+        <main
+          className={cn("pb-4 pl-64", {
+            "pl-28": sidebarCollapsed,
+          })}
+        >
           <Outlet />
         </main>
       </div>

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

@@ -7,52 +7,68 @@ import {
 } from "@radix-ui/react-icons";
 import { NavLink } from "react-router-dom";
 
-function SideNav() {
+type Props = {
+  collapsed: boolean;
+};
+
+function SideNav({ collapsed }: Props) {
   return (
     <nav className="space-y-2">
       <NavLink
         to="create"
         className={({ isActive }) => {
-          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
+          return cn(
-            "bg-muted": isActive,
+            "flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
-          });
+            {
+              "bg-muted": isActive,
+            },
+          );
         }}
       >
-        <PlusCircledIcon className="mr-4 h-6 w-6" />
+        <PlusCircledIcon className="h-6 w-6" />
-        <span className="text-lg">Create</span>
+        {!collapsed && <span className="text-lg">Create</span>}
       </NavLink>
       <NavLink
         to="tasks"
         className={({ isActive }) => {
-          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
+          return cn(
-            "bg-muted": isActive,
+            "flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
-          });
+            {
+              "bg-muted": isActive,
+            },
+          );
         }}
       >
-        <ListBulletIcon className="mr-4 h-6 w-6" />
+        <ListBulletIcon className="h-6 w-6" />
-        <span className="text-lg">Tasks</span>
+        {!collapsed && <span className="text-lg">Tasks</span>}
       </NavLink>
       <NavLink
         to="workflows"
         className={({ isActive }) => {
-          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
+          return cn(
-            "bg-muted": isActive,
+            "flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
-          });
+            {
+              "bg-muted": isActive,
+            },
+          );
         }}
       >
-        <LightningBoltIcon className="mr-4 h-6 w-6" />
+        <LightningBoltIcon className="h-6 w-6" />
-        <span className="text-lg">Workflows (Beta)</span>
+        {!collapsed && <span className="text-lg">Workflows</span>}
       </NavLink>
       <NavLink
         to="settings"
         className={({ isActive }) => {
-          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
+          return cn(
-            "bg-muted": isActive,
+            "flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
-          });
+            {
+              "bg-muted": isActive,
+            },
+          );
         }}
       >
-        <GearIcon className="mr-4 h-6 w-6" />
+        <GearIcon className="h-6 w-6" />
-        <span className="text-lg">Settings</span>
+        {!collapsed && <span className="text-lg">Settings</span>}
       </NavLink>
     </nav>
   );