feat: Add new appbar wc_simple_appbar.

apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex

@@ -52,4 +52,81 @@ defmodule Phoenix.WebComponent.Appbar do
     </app-bar>
     """
   end
+
+  @doc """
+  Generates an appbar.
+
+  ## Attributes
+
+  - `title` binary
+  example: "App Title"
+  - `menus` List
+  example: [ %{ label: "Menu Name", to: ~p"/menu-url" } ]
+
+  ## Slots
+
+  - `logo`
+  - `user_profile`
+
+  """
+  def wc_simple_appbar(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:id, fn -> false end)
+      |> assign_new(:class, fn -> "" end)
+      |> assign_new(:logo, fn -> [] end)
+      |> assign_new(:home, fn -> nil end)
+      |> assign_new(:title, fn -> "GSMLG Title" end)
+      |> assign_new(:menus, fn -> [] end)
+      |> assign_new(:user_profile, fn -> [] end)
+
+    ~H"""
+    <header
+      class={"h-14 w-screen bg-sky-900 text-white text-xl flex items-center justify-center relative #{@class}"}
+    >
+      <div class="container h-full flex items-center justify-between select-none ">
+        <div class="flex flex-row items-center justify-start">
+          <a href={@home}>
+            <%= render_slot(@logo) %>
+          </a>
+          <h1 class="select-none text-blod hidden lg:inline-flex">
+            <a href={@home}><%= @title %></a>
+          </h1>
+          <nav class="text-fuchsia-200 mx-12 hidden md:flex flex-row items-center gap-4">
+            <%= for menu <- @menus do %>
+            <a
+              class="rounded-lg bg-cyan-600 hover:bg-cyan-400 py-2 px-6 text-lg font-semibold leading-6 text-center text-white active:text-white/80"
+              href={menu.to}
+            ><%= menu.label %></a>
+            <% end %>
+          </nav>
+        </div>
+        <div class="flex flex-row items-center justify-end">
+          <div
+            class="hidden md:inline-flex"
+          ><%= render_slot(@user_profile) %></div>
+
+          <button
+            class="inline-flex md:hidden w-10 h-10 justify-center items-center"
+            onclick="document.getElementById('header-md-menu').classList.toggle('hidden')"
+          >
+            <Heroicons.bars_3 class="w-8 h-8" />
+          </button>
+        </div>
+      </div>
+      <div id="header-md-menu" class="absolute z-50 top-14 w-full bg-sky-900 flex flex-col md:hidden hidden">
+        <%= for menu <- @menus do %>
+        <a
+          class="w-full bg-cyan-600 hover:bg-cyan-400 py-2 px-6 text-lg font-semibold leading-6 text-center text-white active:text-white/80"
+          href={menu.to}
+        ><%= menu.label %></a>
+        <% end %>
+        <hr />
+        <div
+          class="w-full my-2 text-center flex flex-col justify-start items-center"
+        ><%= render_slot(@user_profile) %></div>
+      </div>
+    </header>
+    """
+  end
 end

apps/phoenix_webcomponent/mix.exs

@@ -40,6 +40,7 @@ defmodule PhoenixWebComponent.Mixfile do
     [
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_view, "~> 0.18"},
+      {:heroicons, "~> 0.5.1"},
       {:plug, "~> 1.5", optional: true},
       {:jason, "~> 1.0"},
       {:esbuild, "~> 0.2", runtime: true},

apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_controller.ex

@@ -1,11 +1,11 @@
 defmodule PhxWCStorybookWeb.PageController do
   use PhxWCStorybookWeb, :controller
 
-  def index(conn, %{"p" => page} = _params) do
-    render(conn, "index.html", page: String.to_integer(page))
+  def index(conn, %{"mode" => mode} = _params) do
+    render(conn, "index.html", mode: mode)
   end
 
   def index(conn, _params) do
-    render(conn, "index.html", page: 1)
+    render(conn, "index.html", mode: "app")
   end
 end

apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex

@@ -1,6 +1,6 @@
 <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
 <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-<main class="container h-[calc(100vh-56px)] flex flex-row justify-start items-start">
+<main class="container h-[calc(100vh-56px)] flex flex-row justify-start items-start overflow-x-auto">
   <.wc_left_menu
     class="w-48 h-[calc(100vh-56px)]"
     active={"phx-wc-hook"}
@@ -18,6 +18,11 @@
           {"table", "Table", "/storybook/components/table"}
         ]}
     ]}
-  />
+  >
+  <:title>
+  <.wc_link href="/">Simple Appbar</.wc_link>
+  <.wc_link href="/?mode=wc">WC Appbar</.wc_link>
+  </:title>
+  </.wc_left_menu>
   <%= @inner_content %>
 </main>

apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/root.html.heex

@@ -11,6 +11,21 @@
   </head>
   <body class="flex flex-col items-center">
     <div class="rainbow"></div>
+    <%= if assigns[:mode] == "app" do %>
+    <.wc_simple_appbar
+      title={"Phoenix WebComponent"}
+      menus={[
+        %{ label: "Component Storybook", to: Routes.live_storybook_path(@conn, :root) }
+      ]}
+    >
+      <:logo>
+        <logo-gsmlg-dev />
+      </:logo>
+      <:user_profile>
+        (^_^)
+      </:user_profile>
+    </.wc_simple_appbar>
+    <% else %>
     <.wc_appbar
       title={"Phoenix WebComponent"}
       menus={[
@@ -24,7 +39,7 @@
         (^_^)
       </:user_profile>
     </.wc_appbar>
-
+    <% end %>
     <%= @inner_content %>
   </body>
 </html>

mix.lock

@@ -10,6 +10,7 @@
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
   "floki": {:hex, :floki, "0.33.1", "f20f1eb471e726342b45ccb68edb9486729e7df94da403936ea94a794f072781", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "461035fd125f13fdf30f243c85a0b1e50afbec876cbf1ceefe6fddd2e6d712c6"},
   "gettext": {:hex, :gettext, "0.20.0", "75ad71de05f2ef56991dbae224d35c68b098dd0e26918def5bb45591d5c8d429", [:mix], [], "hexpm", "1c03b177435e93a47441d7f681a7040bd2a816ece9e2666d1c9001035121eb3d"},
+  "heroicons": {:hex, :heroicons, "0.5.1", "cca0dcca07af5f74d8a7d111e40418d3615d65e6773c0ea10e20cef070fd30aa", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.18.2", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "4b096d0a1d50e9054df9b12cc637c9f65c3972ff086791d3f2d1846f0653117e"},
   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
   "jason": {:hex, :jason, "1.4.0", "e855647bc964a44e2f67df589ccf49105ae039d4179db7f6271dfd3843dc27e6", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "79a3791085b2a0f743ca04cec0f7be26443738779d09302e01318f97bdb82121"},
   "makeup": {:hex, :makeup, "1.1.0", "6b67c8bc2882a6b6a445859952a602afc1a41c2e08379ca057c0f525366fc3ca", [:mix], [{:nimble_parsec, "~> 1.2.2 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "0a45ed501f4a8897f580eabf99a2e5234ea3e75a4373c8a52824f6e873be57a6"},