temporal commit

5 files changed, 97 insertions, 0 deletions

diff --git a/src/web/component/navigation/index.css b/src/web/component/navigation/index.css
new file mode 100644
index 0000000..836e3b5
--- /dev/null
+++ b/src/web/component/navigation/index.css
@@ -0,0 +1,66 @@
+#toggle {
+	--radius-open: 200px;
+
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	width: 45px;
+	height: 45px;
+	border-radius: 100%;
+	background: red;
+	z-index: 500;
+	cursor: pointer;
+	text-align: center;
+	align-content: center;
+	transition:
+		border-radius 0.1s ease,
+		right 0.1s ease,
+		bottom 0.1s ease,
+		width 0.1s ease,
+		height 0.1s ease;
+
+	.bi {
+		baseline-shift: -2px;
+	}
+
+	.items {
+		position: relative;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+	}
+
+	.item {
+		display: none;
+		width: 45px;
+		height: 45px;
+		border-radius: 100%;
+		background: blue;
+		position: absolute;
+		right: calc(cos(18deg * var(--index)) * var(--radius-open));
+		bottom: calc(sin(18deg * var(--index)) * var(--radius-open));
+		font-size: calc(var(--index) * 1px);
+	}
+
+	.item {
+		--index: sibling-index();
+	}
+}
+
+#toggle.open {
+	width: var(--radius-open);
+	height: var(--radius-open);
+	bottom: 0px;
+	right: 0px;
+	border-radius: 0px;
+	border-top-left-radius: 250px;
+
+	.bi {
+		display: none;
+	}
+
+	.item {
+		display: block;
+	}
+}
diff --git a/src/web/component/navigation/index.html b/src/web/component/navigation/index.html
new file mode 100644
index 0000000..b3b5ce0
--- /dev/null
+++ b/src/web/component/navigation/index.html
@@ -0,0 +1,11 @@
+<div id="toggle">
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+		<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+	</svg>
+	<div class="items">
+		<div class="item"></div>
+		<div class="item"></div>
+		<div class="item"></div>
+		<div class="item"></div>
+	</div>
+</div>
diff --git a/src/web/component/navigation/index.js b/src/web/component/navigation/index.js
new file mode 100644
index 0000000..2c996a0
--- /dev/null
+++ b/src/web/component/navigation/index.js
@@ -0,0 +1,11 @@
+
+const toggle = Z.by_id('toggle');
+
+toggle.onclick = (event) => {
+	toggle.classList.toggle('open');
+	event.stopPropagation();
+};
+
+document.addEventListener('click', () => {
+	toggle.classList.remove('open');
+});
diff --git a/src/web/component/navigation/root.zig b/src/web/component/navigation/root.zig
new file mode 100644
index 0000000..919cddb
--- /dev/null
+++ b/src/web/component/navigation/root.zig
@@ -0,0 +1,8 @@
+const z = @import("z");
+
+pub const component: z.Component = .{
+    .name = .navigation,
+    .body = @embedFile("index.html"),
+    .style = @embedFile("index.css"),
+    .script = @embedFile("index.js"),
+};
diff --git a/src/web/component/root.zig b/src/web/component/root.zig
index 226f3f7..ba2f565 100644
--- a/src/web/component/root.zig
+++ b/src/web/component/root.zig
@@ -3,4 +3,5 @@ const z = @import("z");
 pub const components: []const z.Component = &.{
     @import("image/root.zig").component,
     @import("timeline/root.zig").component,
+    @import("navigation/root.zig").component,
 };