Tasks page implementation (#120)

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

@@ -0,0 +1,49 @@
+import { Link, Outlet } from "react-router-dom";
+import { Toaster } from "@/components/ui/toaster";
+import { SideNav } from "./SideNav";
+import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
+
+function RootLayout() {
+  return (
+    <>
+      <div className="w-full h-full px-4 max-w-screen-2xl mx-auto">
+        <aside className="fixed w-72 px-6 shrink-0 min-h-screen">
+          <Link
+            to="https://skyvern.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="h-24 flex items-center justify-center">
+              <img src="/skyvern-logo.png" width={48} height={48} />
+              <img src="/skyvern-logo-text.png" height={48} width={192} />
+            </div>
+          </Link>
+          <SideNav />
+        </aside>
+        <div className="pl-72 h-24 flex justify-end items-center px-6 gap-4">
+          <Link
+            to="https://discord.com/invite/fG2XXEuQX3"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <DiscordLogoIcon className="w-6 h-6 text-gray-400 hover:text-white" />
+          </Link>
+          <Link
+            to="https://github.com/Skyvern-AI/skyvern"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GitHubLogoIcon className="w-6 h-6 text-gray-400 hover:text-white" />
+          </Link>
+        </div>
+        <main className="pl-72">
+          <Outlet />
+        </main>
+        <aside className="w-72 shrink-0"></aside>
+      </div>
+      <Toaster />
+    </>
+  );
+}
+
+export { RootLayout };

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

@@ -0,0 +1,58 @@
+import { cn } from "@/util/utils";
+import {
+  GearIcon,
+  ListBulletIcon,
+  PlusCircledIcon,
+} from "@radix-ui/react-icons";
+import { NavLink } from "react-router-dom";
+
+function SideNav() {
+  return (
+    <nav className="flex flex-col gap-4">
+      <NavLink
+        to="create"
+        className={({ isActive }) => {
+          return cn(
+            "flex items-center px-6 py-2 hover:bg-primary-foreground rounded-2xl",
+            {
+              "bg-primary-foreground": isActive,
+            },
+          );
+        }}
+      >
+        <PlusCircledIcon className="mr-4" />
+        <span>New Task</span>
+      </NavLink>
+      <NavLink
+        to="tasks"
+        className={({ isActive }) => {
+          return cn(
+            "flex items-center px-6 py-2 hover:bg-primary-foreground rounded-2xl",
+            {
+              "bg-primary-foreground": isActive,
+            },
+          );
+        }}
+      >
+        <ListBulletIcon className="mr-4" />
+        <span>Task History</span>
+      </NavLink>
+      <NavLink
+        to="settings"
+        className={({ isActive }) => {
+          return cn(
+            "flex items-center px-6 py-2 hover:bg-primary-foreground rounded-2xl",
+            {
+              "bg-primary-foreground": isActive,
+            },
+          );
+        }}
+      >
+        <GearIcon className="mr-4" />
+        <span>Settings</span>
+      </NavLink>
+    </nav>
+  );
+}
+
+export { SideNav };