diff --git a/apps/arc-web/app/layouts/app-shell.tsx b/apps/arc-web/app/layouts/app-shell.tsx index a7d7de40b..c7627ad35 100644 --- a/apps/arc-web/app/layouts/app-shell.tsx +++ b/apps/arc-web/app/layouts/app-shell.tsx @@ -7,7 +7,14 @@ import { MenuItem, MenuItems, } from "@headlessui/react"; -import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; +import { + Bars3Icon, + ChartBarIcon, + Cog6ToothIcon, + PlayCircleIcon, + RocketLaunchIcon, + XMarkIcon, +} from "@heroicons/react/24/outline"; import { Link, Outlet, useLocation, useMatches } from "react-router"; const user = { @@ -18,10 +25,10 @@ const user = { }; const navigation = [ - { name: "Start", href: "/start" }, - { name: "Workflow Runs", href: "/runs" }, - { name: "Insights", href: "/insights" }, - { name: "Settings", href: "/settings" }, + { name: "Start", href: "/start", icon: RocketLaunchIcon }, + { name: "Workflow Runs", href: "/runs", icon: PlayCircleIcon }, + { name: "Insights", href: "/insights", icon: ChartBarIcon }, + { name: "Settings", href: "/settings", icon: Cog6ToothIcon }, ]; const userNavigation = [{ name: "Sign out", href: "#" }]; @@ -61,9 +68,10 @@ export default function AppShell() { current ? "bg-navy-950/50 text-white" : "text-ice-300 hover:bg-white/5 hover:text-white", - "rounded-md px-3 py-2 text-sm font-medium", + "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium", )} > +