WIP: Changes main page to not include sidebar, that moves to project view.

Sources/ViewController/Views/Project/ProjectView.swift

@@ -3,57 +3,113 @@ import ElementaryHTMX
 import ManualDCore
 import Styleguide
 
-struct ProjectView: HTML, Sendable {
-  let project: Project
+struct ProjectView<Inner: HTML>: HTML, Sendable where Inner: Sendable {
+  let projectID: Project.ID
+  let activeTab: Sidebar.ActiveTab
+  let inner: Inner
+
+  init(
+    projectID: Project.ID,
+    activeTab: Sidebar.ActiveTab,
+    @HTMLBuilder inner: () -> Inner
+  ) {
+    self.projectID = projectID
+    self.activeTab = activeTab
+    self.inner = inner()
+  }
 
   var body: some HTML {
-    div(
+    div {
+      div(.class("flex flex-row")) {
+        Sidebar(active: activeTab, projectID: projectID)
+        main(.class("flex flex-col h-screen w-full px-6 py-10")) {
+          inner
+        }
+      }
+    }
+  }
+}
+
+// TODO: Update to use DaisyUI drawer.
+struct Sidebar: HTML {
+
+  let active: ActiveTab
+  let projectID: Project.ID
+
+  var body: some HTML {
+    aside(
       .class(
         """
-        border border-gray-200 rounded-lg shadow-lg space-y-4 p-4 m-4
+        h-screen sticky top-0 max-w-[280px] flex-none 
+        border-r-2 border-gray-200 
+        shadow-lg
         """
       )
     ) {
-      Row {
-        h1(.class("text-2xl font-bold")) { "Project" }
-        EditButton()
-          .attributes(
-            .hx.get(route: .project(.form(dismiss: false))),
-            .hx.target("#projectForm"),
-            .hx.swap(.outerHTML)
-          )
-      }
 
+      // TODO: Move somewhere outside of the sidebar.
       Row {
-        Label("Name")
-        span { project.name }
+        Label("Theme")
+        input(.type(.checkbox), .class("toggle theme-controller"), .value("light"))
       }
-      .attributes(.class("border-b border-gray-200"))
+      .attributes(.class("p-4"))
 
-      Row {
-        Label("Address")
-        span { project.streetAddress }
-      }
-      .attributes(.class("border-b border-gray-200"))
+      row(title: "Project", icon: .mapPin, route: .project(.index))
+        .attributes(.data("active", value: active == .projects ? "true" : "false"))
 
-      Row {
-        Label("City")
-        span { project.city }
-      }
-      .attributes(.class("border-b border-gray-200"))
+      row(title: "Rooms", icon: .doorClosed, route: .room(.index(projectID)))
+        .attributes(.data("active", value: active == .rooms ? "true" : "false"))
 
-      Row {
-        Label("State")
-        span { project.state }
-      }
-      .attributes(.class("border-b border-gray-200"))
+      row(title: "Equivalent Lengths", icon: .rulerDimensionLine, route: .effectiveLength(.index))
+        .attributes(.data("active", value: active == .effectiveLength ? "true" : "false"))
 
-      Row {
-        Label("Zip")
-        span { project.zipCode }
+      row(title: "Friction Rate", icon: .squareFunction, route: .frictionRate(.index))
+        .attributes(.data("active", value: active == .frictionRate ? "true" : "false"))
+
+      row(title: "Duct Sizes", icon: .wind, href: "#")
+        .attributes(.data("active", value: active == .ductSizing ? "true" : "false"))
+    }
+  }
+
+  // TODO: Use SiteRoute.View routes as href.
+  private func row(
+    title: String,
+    icon: Icon.Key,
+    href: String
+  ) -> some HTML<HTMLTag.a> {
+    a(
+      .class(
+        """
+        flex w-full items-center gap-4
+        hover:bg-gray-300 hover:text-gray-800
+        data-[active=true]:bg-gray-300 data-[active=true]:text-gray-800
+        px-4 py-2
+        """
+      ),
+      .href(href)
+    ) {
+      Icon(icon)
+      span(.class("text-xl")) {
+        title
       }
     }
+  }
 
-    div(.id("projectForm")) {}
+  private func row(
+    title: String,
+    icon: Icon.Key,
+    route: SiteRoute.View
+  ) -> some HTML<HTMLTag.a> {
+    row(title: title, icon: icon, href: SiteRoute.View.router.path(for: route))
+  }
+}
+
+extension Sidebar {
+  enum ActiveTab: Equatable, Sendable {
+    case projects
+    case rooms
+    case effectiveLength
+    case frictionRate
+    case ductSizing
   }
 }