chore: add multiple dropdown example

indaco · May 4, 2024 · bd7ff39 · bd7ff39
1 parent a1bcc37
commit bd7ff39
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 0 deletions.
diff --git a/_examples/multiple-dropdowns/home.templ b/_examples/multiple-dropdowns/home.templ
@@ -0,0 +1,119 @@
+package main
+
+import "github.com/indaco/gropdown"
+
+const (
+	profileIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+</svg>
+`
+	settingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
+</svg>
+`
+
+	globeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+</svg>`
+
+	clickIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59" />
+</svg>
+`
+)
+
+templ HomePage() {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>gropdown - multiple dropdowns</title>
+			<!-- inject dropdown styles -->
+			@gropdown.GropdownCSS()
+			<!-- styles -->
+			<style type="text/css">
+				.parent-container {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					gap: 0.5rem;
+					height: 100vh;
+				}
+			</style>
+		</head>
+		<body class="parent-container">
+			<div>
+				<!-- display the dropdown -->
+				@gropdown.Root("menu-1") {
+					@gropdown.Button("Menu")
+					@gropdown.Content() {
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
+						@gropdown.Divider()
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
+						@gropdown.Divider()
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
+					}
+				}
+			</div>
+			<div>
+				@gropdown.Root("menu-2") {
+					@gropdown.Button("Menu")
+					@gropdown.Content() {
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
+						@gropdown.Divider()
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
+						@gropdown.Divider()
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
+					}
+				}
+			</div>
+			<!-- inject dropdown javascript -->
+			@gropdown.GropdownJS(gropdown.GetConfigMapFromContext(ctx))
+		</body>
+	</html>
+}
diff --git a/_examples/multiple-dropdowns/main.go b/_examples/multiple-dropdowns/main.go
@@ -0,0 +1,36 @@
+package main
+
+import (
+	"context"
+	"log"
+	"net/http"
+	"os"
+
+	"github.com/indaco/gropdown"
+)
+
+func HandleHome(w http.ResponseWriter, r *http.Request) {
+	configOne := gropdown.NewConfigBuilder().WithPosition(gropdown.Top).Build()
+	configTwo := gropdown.NewConfigBuilder().WithCloseOnOutsideClick(false).Build()
+	configMap := gropdown.NewConfigMap()
+	configMap.Add("menu-1", configOne)
+	configMap.Add("menu-2", configTwo)
+
+	ctx := context.WithValue(r.Context(), gropdown.ConfigContextKey, configMap)
+	err := HomePage().Render(ctx, w)
+	if err != nil {
+		return
+	}
+}
+
+func main() {
+	mux := http.NewServeMux()
+	mux.HandleFunc("GET /", HandleHome)
+
+	port := ":3300"
+	log.Printf("Listening on %s", port)
+	if err := http.ListenAndServe(port, mux); err != nil {
+		log.Printf("failed to start server: %v", err)
+		os.Exit(1)
+	}
+}