[Enhancement] Adds in-app diagnostics page (#243)

* Added improved sidebar menuing

* Added new view for getting diagnostic data

* Changed default log level to debug

* Disabled false-positive static analysis

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>
-      <.link
-        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 class="text-bodydark1">
+      <.sidebar_link icon={@icon} text={@text} href={@href} target={@target} />
     </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