SideNav refactoring

web/src/app/root.tsx

@@ -1,5 +1,5 @@
 import { Outlet, useNavigate } from "react-router-dom"
-import SideNav from "../components/side-nav"
+import SideNav from "../components/side-nav/side-nav"
 import axios from "axios"
 import apiBaseUrl from "@/lib/api-base-url"
 import {

web/src/components/side-nav/side-nav-compose.tsx

@@ -0,0 +1,55 @@
+import {
+  Bars3BottomLeftIcon,
+  Bars3Icon,
+  CubeIcon,
+} from "@heroicons/react/24/outline"
+import { useParams } from "react-router-dom"
+import { SideBarItem, SideNavBack } from "./side-nav"
+
+export function SideNavCompose() {
+  const { nodeId, composeProjectId } = useParams()
+
+  const baseUrl = `/nodes/${nodeId}/compose/${composeProjectId}`
+  const items = [
+    {
+      title: "Actions",
+      link: `${baseUrl}/actions`,
+      icon: (
+        <Bars3BottomLeftIcon className="h-6 w-6 shrink-0" aria-hidden="true" />
+      ),
+    },
+    {
+      title: "Definition",
+      link: `${baseUrl}/definition`,
+      icon: (
+        <Bars3BottomLeftIcon className="h-6 w-6 shrink-0" aria-hidden="true" />
+      ),
+    },
+    {
+      title: "Containers",
+      link: `${baseUrl}/containers`,
+      icon: <CubeIcon className="h-6 w-6 shrink-0" aria-hidden="true" />,
+    },
+    {
+      title: "Logs",
+      link: `${baseUrl}/logs`,
+      icon: <Bars3Icon className="h-6 w-6 shrink-0" aria-hidden="true" />,
+    },
+  ]
+
+  return (
+    <>
+      <SideNavBack to={`/nodes/${nodeId}/compose`} />
+      <ul role="list" className="-mx-2 space-y-1">
+        {items.map((item) => (
+          <li>
+            <SideBarItem to={item.link}>
+              {item.icon}
+              {item.title}
+            </SideBarItem>
+          </li>
+        ))}
+      </ul>
+    </>
+  )
+}

web/src/components/side-nav/side-nav-container.tsx

@@ -0,0 +1,29 @@
+import { Bars3Icon, CommandLineIcon } from "@heroicons/react/24/outline"
+import { useParams } from "react-router-dom"
+import { SideBarItem, SideNavBack } from "./side-nav"
+
+export function SideNavContainer() {
+  const { nodeId, containerId } = useParams()
+
+  return (
+    <>
+      <SideNavBack to={`/nodes/${nodeId}/containers`} />
+      <ul role="list" className="-mx-2 space-y-1">
+        <li>
+          <SideBarItem to={`/nodes/${nodeId}/containers/${containerId}/logs`}>
+            <Bars3Icon className="h-6 w-6 shrink-0" aria-hidden="true" />
+            Logs
+          </SideBarItem>
+        </li>
+        <li>
+          <SideBarItem
+            to={`/nodes/${nodeId}/containers/${containerId}/terminal`}
+          >
+            <CommandLineIcon className="h-6 w-6 shrink-0" aria-hidden="true" />
+            Terminal
+          </SideBarItem>
+        </li>
+      </ul>
+    </>
+  )
+}