+
<%= render_slot(@title) %>
- <% end %>
- <%= for {group, subMenu} <- @menus do %>
-
-
<%= group %>
-
- <%= for {id, menu, url} <- subMenu do %>
- <.link
- navigate={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: "")}
- >
- <%= menu %>
-
- <% end %>
-
+
+ <.link
+ :for={{m, _i} <- Enum.with_index(@menu)}
+ class={[
+ "flex flex-row justify-start items-center",
+ "px-6 py-4 rounded-lg w-full cursor-pointer",
+ if(Map.get(m, :id, "") == @active, do: " bg-blue-100 text-blue-500 hover:text-blue-600", else: "hover:text-blue-600 "),
+ Map.get(m, :class, "")
+ ]}
+ navigate={Map.get(m, :to, "")}
+ >
+
+ <%= render_slot(m) %>
+
+
- <% end %>
-
+
"""
end
+
end
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex
index dc3a947f..7b581213 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex
@@ -7,8 +7,8 @@ defmodule PhxWCStorybookWeb.Storybook do
# Path to your storybook stories (required).
content_path: Path.expand("storybook", __DIR__),
- # Custom storybook title. Default is "Live Storybook".
- title: "Phoenix WebComponent Live Storybook",
+ # Custom storybook title. Default is "Storybook".
+ title: "Phoenix WebComponent Storybook",
# Story compilation mode, can be either `:eager` or `:lazy`.
# It defaults to `:lazy` in dev environment, `:eager` in other environments.
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
index 5f2d91e7..5c3aeabf 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
@@ -1,6 +1,7 @@
defmodule PhxWCStorybookWeb.Storybook.Components.LeftMenu do
# :live_component or :page are also available
use PhxLiveStorybook.Story, :component
+ import Phoenix.WebComponent.LeftMenu
def function, do: &Phoenix.WebComponent.LeftMenu.wc_left_menu/1
def description, do: "A left menu element."
@@ -11,19 +12,33 @@ defmodule PhxWCStorybookWeb.Storybook.Components.LeftMenu do
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"]
+ slots: [
+ "<:title>Menu Demo",
+ """
+ <:menu>
+ Phx Hook
+
+ """,
+ """
+ <:menu>
+ Icons
+
+ """,
+ """
+ <:menu>
+ <.wc_left_menu_group active={"left_menu"}>
+ <:title>Components
+ <:menu id="table" to="/storybook/components/actionbar">Actionbar
+ <:menu id="card" to="/storybook/components/card">Card
+ <:menu id="left_menu" to="/storybook/components/left_menu">Left Menu
+ <:menu id="markdown" to="/storybook/components/markdown">Markdown
+ <:menu id="pagination" to="/storybook/components/pagination">Pagination
+ <:menu id="table" to="/storybook/components/table">Table
+
+
+ """,
+ ]
}
]
end
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
index fb7a5f08..495b4cac 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
@@ -2,31 +2,45 @@
<%= get_flash(@conn, :error) %>
<.wc_left_menu
- class="w-48 h-[calc(100vh-56px)]"
+ class="w-48 h-[calc(100vh-56px)] bg-slate-100"
active={assigns[:active_menu]}
- menus={[
- {"Icons", [
- {"mdi", "MDIcons", "/mdi"},
- {"bsi", "BSIcons", "/bsi"}
- ]},
- {"Hooks", [
- {"phx-wc-hook", "PhxWCHook", "/"}
- ]},
- {"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"}
- ]}
- ]}
>
- <:title>
- <.wc_link href="/">Simple Appbar
- <.wc_link href="/?mode=wc">WC Appbar
+ <:title class="text-slate-400 font-bold">
+ WebComponent
+ <:menu>
+ <.wc_left_menu_group active={assigns[:active_menu]}>
+ <:title>Hooks
+ <:menu id="phx-wc-hook" to={"/"}>
+ <.wc_mdi name={"webhook"} class="w-4 h-4" />
+ PhxWCHook
+
+
+
+ <:menu>
+ <.wc_left_menu_group active={assigns[:active_menu]}>
+ <:title>Icons
+ <:menu id="mdi" to={"/mdi"}>
+ <.wc_mdi name={"material-design"} class="w-4 h-4" />
+ MD Icon
+
+ <:menu id="bsi" to={"/bsi"}>
+ <.wc_bsi name={"bootstrap"} class="w-4 h-4" />
+ BS Icon
+
+
+
+ <:menu>
+ <.wc_left_menu_group active={assigns[:active_menu]}>
+ <:title>Components
+ <:menu id="table" to="/storybook/components/actionbar">Actionbar
+ <:menu id="card" to="/storybook/components/card">Card
+ <:menu id="left_menu" to="/storybook/components/left_menu">Left Menu
+ <:menu id="markdown" to="/storybook/components/markdown">Markdown
+ <:menu id="pagination" to="/storybook/components/pagination">Pagination
+ <:menu id="table" to="/storybook/components/table">Table
+
+
<%= @inner_content %>
diff --git a/apps/phx_wc_storybook_web/mix.exs b/apps/phx_wc_storybook_web/mix.exs
index 7c791e32..014543a8 100644
--- a/apps/phx_wc_storybook_web/mix.exs
+++ b/apps/phx_wc_storybook_web/mix.exs
@@ -41,7 +41,8 @@ defmodule PhxWCStorybookWeb.MixProject do
{:phoenix_html, "~> 3.0"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
{:phoenix_live_view, "~> 0.18"},
- {:phx_live_storybook, "~> 0.4.0"},
+ # {:phoenix_storybook, "~> 0.5.0"},
+ {:phx_live_storybook, "0.4.5"},
{:floki, ">= 0.30.0", only: :test},
{:phoenix_live_dashboard, "~> 0.7"},
{:tailwind, "~> 0.1.6", runtime: Mix.env() == :dev},