From ffcffe656addf0ab9d8042912b2a27ddd6e91eca Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Tue, 2 Jul 2024 01:38:40 +0200
Subject: [PATCH] [frontend] Implement list menu component (ISH-392)

---
 Iceshrimp.Frontend/Components/Menu.razor       | 18 ++++++++++++++++++
 Iceshrimp.Frontend/Components/Menu.razor.css   | 11 +++++++++++
 .../Components/MenuElement.razor               | 16 ++++++++++++++++
 .../Components/MenuElement.razor.css           |  3 +++
 4 files changed, 48 insertions(+)
 create mode 100644 Iceshrimp.Frontend/Components/Menu.razor
 create mode 100644 Iceshrimp.Frontend/Components/Menu.razor.css
 create mode 100644 Iceshrimp.Frontend/Components/MenuElement.razor
 create mode 100644 Iceshrimp.Frontend/Components/MenuElement.razor.css

diff --git a/Iceshrimp.Frontend/Components/Menu.razor b/Iceshrimp.Frontend/Components/Menu.razor
new file mode 100644
index 00000000..1efbbe9f
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/Menu.razor
@@ -0,0 +1,18 @@
+
+@if (_display)
+{
+    <div class="menu">
+        @ChildContent
+    </div>
+}
+
+@code {
+    [Parameter] [EditorRequired] public required RenderFragment ChildContent { get; set; }
+    private                                      bool           _display;
+
+    public void Toggle()
+    {
+        _display = !_display;
+        StateHasChanged();
+    }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/Menu.razor.css b/Iceshrimp.Frontend/Components/Menu.razor.css
new file mode 100644
index 00000000..4ee7b890
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/Menu.razor.css
@@ -0,0 +1,11 @@
+.menu {
+    background-color: var(--foreground-color);
+    position: absolute;
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    border: var(--highlight-color) solid 0.1rem;
+    width: 13rem;
+    top: 2.5rem;
+    left: -5rem;
+
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/MenuElement.razor b/Iceshrimp.Frontend/Components/MenuElement.razor
new file mode 100644
index 00000000..36aa1481
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/MenuElement.razor
@@ -0,0 +1,16 @@
+@using Iceshrimp.Assets.PhosphorIcons
+
+<div @onclick="OnClick" class="menu-element">
+    <Icon Name="Icon"></Icon>
+    @Text
+</div>
+@code {
+    [Parameter] [EditorRequired] public required IconName             Icon     { get; set; }
+    [Parameter] [EditorRequired] public required RenderFragment       Text     { get; set; }
+    [Parameter] [EditorRequired] public required EventCallback OnSelect { get; set; }
+
+    private async Task OnClick()
+    {
+        await OnSelect.InvokeAsync();
+    }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/MenuElement.razor.css b/Iceshrimp.Frontend/Components/MenuElement.razor.css
new file mode 100644
index 00000000..bc838adc
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/MenuElement.razor.css
@@ -0,0 +1,3 @@
+.menu-element {
+    display: flex;
+}
\ No newline at end of file