temporal commit

1 files changed, 66 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;
+	}
+}