Added account page with subpage select

view/component/account/content.templ

@@ -0,0 +1,15 @@
+package account
+
+templ AccountContent(subpage string) {
+	<form hx-post="/account-select-page">
+		<div class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl">
+			@SelectMenu(subpage)
+			<div class="mt-5">
+				<div class="pl-10 text-2xl text-subtext1 underline">
+					{ subpage }
+				</div>
+				// page content
+			</div>
+		</div>
+	</form>
+}

view/component/account/selectmenu.templ

@@ -0,0 +1,55 @@
+package account
+
+import "fmt"
+
+type MenuItem struct {
+	name string
+	href string
+}
+
+func getMenuItems() []MenuItem {
+	return []MenuItem{
+		{
+			name: "General",
+			href: "general",
+		},
+		{
+			name: "Security",
+			href: "security",
+		},
+		{
+			name: "Preferences",
+			href: "preferences",
+		},
+	}
+}
+
+templ SelectMenu(activePage string) {
+	{{
+	menuItems := getMenuItems()
+	page := fmt.Sprintf("{page:'%s'}", activePage)
+	}}
+	<div class="flex w-fit flex-col border-e bg-surface0 rounded-l-xl">
+		<div class="px-4 py-6">
+			<ul class="mt-6 space-y-1" x-data={ page }>
+				for _, item := range menuItems {
+					{{
+	activebind := fmt.Sprintf("page === '%s' && 'bg-mantle'", item.name)
+					}}
+					<li>
+						<button
+							type="submit"
+							name="subpage"
+							value={ item.name }
+							class="block rounded-lg px-4 py-2 text-md
+                            hover:bg-mantle hover:cursor-pointer"
+							:class={ activebind }
+						>
+							{ item.name }
+						</button>
+					</li>
+				}
+			</ul>
+		</div>
+	</div>
+}

view/page/account.templ

@@ -0,0 +1,10 @@
+package page
+
+import "projectreshoot/view/layout"
+import "projectreshoot/view/component/account"
+
+templ Account(subpage string) {
+	@layout.Global() {
+		@account.AccountContent(subpage)
+	}
+}