feat: Add wc_left_menu.

apps/phoenix_webcomponent/lib/phoenix_webcomponent/left_menu.ex

@@ -0,0 +1,41 @@
+defmodule Phoenix.WebComponent.LeftMenu do
+  @moduledoc """
+  Render left menu.
+  """
+  use Phoenix.WebComponent, :component
+
+  @doc """
+  Generates left menu
+  """
+  def wc_left_menu(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:id, fn -> false end)
+      |> assign_new(:class, fn -> "" end)
+      |> assign_new(:active, fn -> false end)
+      |> assign_new(:menus, fn -> [] end)
+      |> assign_new(:title, fn -> nil end)
+
+    ~H"""
+    <nav id={@id} class={"flex flex-col justify-start items-start bg-white h-full pt-4 shadow-sm z-10 #{@class}"}>
+    <%= unless is_nil(@title) do %>
+      <div class="w-full text-xl flex flex-col justify-center items-center mb-4">
+        <%= render_slot(@title) %>
+      </div>
+    <% end %>
+    <%= for {group, subMenu} <- @menus do %>
+      <div class="flex flex-col justify-start items-start w-full">
+        <div class="text-slate-400 px-10 py-4 w-full"><%= group %></div>
+        <div class="text-slate-800 px-4 w-full">
+        <%= for {id, menu, url} <- subMenu do %>
+          <%= live_redirect to: url, class: "px-6 py-4 rounded-lg w-full flex flex-row justify-start items-center hover:text-blue-600 cursor-pointer" <> if(@active == id, do: " bg-blue-600 text-white hover:text-slate-300", else: "") do %>
+            <span data-menu-id={id} class="indent-2.5"><%= menu %></span>
+          <% end %>
+        <% end %>
+        </div>
+      </div>
+    <% end %>
+    </nav>
+    """
+  end
+end

apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.exs

@@ -0,0 +1,29 @@
+defmodule PhxWCStorybookWeb.Storybook.Components.LeftMenu do
+  # :live_component or :page are also available
+  use PhxLiveStorybook.Entry, :component
+
+  def function, do: &Phoenix.WebComponent.LeftMenu.wc_left_menu/1
+  def description, do: "A left menu element."
+
+  def stories do
+    [
+      %Story{
+        id: :default,
+        attributes: %{
+          active: "left_menu",
+          menus: [
+            {"Components", [
+              {"actionbar", "Actionbar", "/storybook/components/actionbar"},
+              {"card", "Card", "/storybook/components/card"},
+              {"left_menu", "Left Menu", "/storybook/components/left_menu"},
+              {"markdown", "Markdown", "/storybook/components/markdown"},
+              {"pagination", "Pagination", "/storybook/components/pagination"},
+              {"table", "Table", "/storybook/components/table"},
+            ]}
+          ]
+        },
+        slots: ["<:title>Menu Demo Components</:title>"]
+      }
+    ]
+  end
+end