Added improved sidebar menuing

lib/pinchflat_web/components/layouts.ex

@@ -4,28 +4,107 @@ defmodule PinchflatWeb.Layouts do
   embed_templates "layouts/*"
   embed_templates "layouts/partials/*"
 
+  @doc """
+  Renders a sidebar menu item link
+
+  ## Examples
+
+      <.sidebar_link icon="hero-home" text="Home" href="/" />
+  """
   attr :icon, :string, required: true
   attr :text, :string, required: true
   attr :href, :any, required: true
   attr :target, :any, default: "_self"
 
   def sidebar_item(assigns) do
-    # I'm testing out grouping classes here. Tentative order: font, layout, color, animation, state-modifiers
     ~H"""
-    <li>
+    <li class="text-bodydark1">
-      <.link
+      <.sidebar_link icon={@icon} text={@text} href={@href} target={@target} />
-        href={@href}
-        target={@target}
-        class={[
-          "font-medium text-bodydark1",
-          "group relative flex items-center gap-2.5 rounded-sm px-4 py-2 duration-300 ease-in-out",
-          "duration-300 ease-in-out",
-          "hover:bg-graydark dark:hover:bg-meta-4"
-        ]}
-      >
-        <.icon name={@icon} /> <%= @text %>
-      </.link>
     </li>
     """
   end
+
+  @doc """
+  Renders a sidebar menu item with a submenu
+
+  ## Examples
+
+      <.sidebar_submenu icon="hero-home" text="Home" current_path="/">
+        <:submenu icon="hero-home" text="Home" href="/" />
+      </.sidebar_submenu>
+  """
+
+  attr :icon, :string, required: true
+  attr :text, :string, required: true
+  attr :current_path, :string, required: true
+
+  slot :submenu do
+    attr :icon, :string
+    attr :text, :string
+    attr :href, :any
+    attr :target, :any
+  end
+
+  def sidebar_submenu(assigns) do
+    initially_selected = Enum.any?(assigns[:submenu], &(&1[:href] == assigns[:current_path]))
+    assigns = Map.put(assigns, :initially_selected, initially_selected)
+
+    ~H"""
+    <li class="text-bodydark1" x-data={"{ selected: #{@initially_selected} }"}>
+      <span
+        class={[
+          "font-medium cursor-pointer",
+          "group relative flex items-center justify-between rounded-sm px-4 py-2 duration-300 ease-in-out",
+          "duration-300 ease-in-out",
+          "hover:bg-meta-4"
+        ]}
+        x-on:click="selected = !selected"
+      >
+        <span class="flex items-center gap-2.5">
+          <.icon name={@icon} /> <%= @text %>
+        </span>
+        <span class="text-bodydark2">
+          <.icon name="hero-chevron-up" x-bind:class="{ 'rotate-180': selected }" />
+        </span>
+      </span>
+
+      <ul x-bind:class="selected ? 'block' :'hidden'">
+        <li :for={menu <- @submenu} class="text-bodydark2">
+          <.sidebar_link icon={menu[:icon]} text={menu[:text]} href={menu[:href]} target={menu[:target]} class="pl-10" />
+        </li>
+      </ul>
+    </li>
+    """
+  end
+
+  @doc """
+  Renders a sidebar menu item link
+
+  ## Examples
+
+      <.sidebar_link icon="hero-home" text="Home" href="/" />
+  """
+  attr :icon, :string
+  attr :text, :string, required: true
+  attr :href, :any, required: true
+  attr :target, :any, default: "_self"
+  attr :class, :string, default: ""
+
+  def sidebar_link(assigns) do
+    ~H"""
+    <.link
+      href={@href}
+      target={@target}
+      class={[
+        "font-medium",
+        "group relative flex items-center gap-2.5 rounded-sm px-4 py-2 duration-300 ease-in-out",
+        "duration-300 ease-in-out",
+        "hover:bg-meta-4",
+        @class
+      ]}
+    >
+      <.icon :if={@icon} name={@icon} /> <%= @text %>
+    </.link>
+    """
+  end
 end

lib/pinchflat_web/components/layouts/app.html.heex

@@ -1,5 +1,5 @@
 <div class="flex h-screen overflow-hidden">
-  <.sidebar />
+  <.sidebar conn={@conn} />
 
   <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
     <.header params={@conn.params} />

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -26,7 +26,14 @@
             <.sidebar_item icon="hero-home" text="Home" href={~p"/"} />
             <.sidebar_item icon="hero-tv" text="Sources" href={~p"/sources"} />
             <.sidebar_item icon="hero-adjustments-vertical" text="Media Profiles" href={~p"/media_profiles"} />
-            <.sidebar_item icon="hero-cog-6-tooth" text="Settings" href={~p"/settings"} />
+            <.sidebar_submenu
+              icon="hero-cog-6-tooth"
+              text="Config"
+              current_path={Phoenix.Controller.current_path(@conn)}
+            >
+              <:submenu text="Settings" href={~p"/settings"} />
+              <:submenu text="App Info" href={~p"/settings"} />
+            </.sidebar_submenu>
           </ul>
         </div>
       </nav>