TailwindCSSとPhoenixで階層型のホバーメニューを実現する

$ mix phx.new hoverable_ddm --no-ecto

$ cd hoverable_ddm

$ npm i -D tailwindcss postcss-loader postcss-selector-parser lodash --prefix assets

// assets/webpack.config.js
module: {
  rules: [
      :
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
    }
  ]
},

└── assets
    └── postcss.config.js

// assets/postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
};

/* assets/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// assets/js/addGroupHoverVariant.js
'use strict';

const plugin = require('tailwindcss/plugin');
const selectorParser = require('postcss-selector-parser');
const prefixSelector = require('tailwindcss/lib/util/prefixSelector.js').default;

module.exports = function (hoverName, combinator = " ") {
    if(!combinator.match(/^[>+~ ]$/)) {
        throw `Invalid combinator. Your argument '${combinator}' is not acceptable.`
    }
    combinator = combinator.replace(/([>+~])/," $1 ");
    return plugin(function({ addVariant, config  }) {
        addVariant(`${hoverName}-hover`, ({ modifySelectors, separator }) => {
            return modifySelectors(({ selector }) => {
                return selectorParser(selectors => {
                    selectors.walkClasses(sel => {
                        sel.value = `${hoverName}-hover${separator}${sel.value}`;
                        sel.parent.insertBefore(sel, selectorParser().astSync(prefixSelector(config('prefix'), `.${hoverName}:hover${combinator}`))
                        )
                    })
                }).processSync(selector)
            })
        })
    });
}

// assets/js/addSpacingUtility.js
'use strict';

const plugin = require('tailwindcss/plugin');
const _ = require('lodash');

module.exports  =  function ( atr_name ) {
    return plugin(function({ addUtilities,  e, config }) {
        const newUtility = _.map(config('theme.spacing'), (value, key) => {
            return {
                [`.${e(`${atr_name}-${key}`)}`]: {
                    [`${atr_name}`]: `${value}`
                }
            }
        });
        addUtilities(newUtility);
    });
}

$ cd assets && npx tailwind init

$ npm install --save @fortawesome/fontawesome-free --prefix assets

// assets/js/app.js
import '@fortawesome/fontawesome-free/js/fontawesome.min';
import '@fortawesome/fontawesome-free/js/solid.min';

defmodule MenuItem do
  defstruct title: "item", link: "#", child_items: []
end

# lib/hoverable_ddm/menu.ex
defmodule HoverableDdm.Menu do

  defmodule MenuItem do
    defstruct title: "item", link: "#", child_items: []
  end

  def get_menu() do
    [
      %MenuItem{title: "item11"},
      %MenuItem{title: "item12"},
      %MenuItem{title: "item13"},
      %MenuItem{
        title: "item14",
        child_items: [
          %MenuItem{title: "item21"},
          %MenuItem{
            title: "item22",
            child_items: [
              %MenuItem{title: "item31"},
              %MenuItem{title: "item32"},
              %MenuItem{title: "item33"},
            ]
          },
          %MenuItem{title: "item23"},
          %MenuItem{title: "item24"},
        ]
      },
    ]
  end

LayoutView
├── NavBarView
│   └── HoverableMenuView
└── PageView

# lib/hoverable_ddm_web/templates/nav_bar/default.html.eex
<nav class="bg-indigo-600 text-gray-200 text-bold py-2 px-6 justify-between flex items-center min-w-full">
  <div>Logo</div>
  <%= Phoenix.View.render HoverableDdmWeb.HoverableMenuView, "default.html", %{items: HoverableDdm.Menu.get_menu() } %>
  <div><%= fa_icon("fas fa-bars") %></div>
</nav>

defmodule HoverableDdmWeb.NavBarView do
  use HoverableDdmWeb, :view
end

defmodule HoverableDdmWeb.HtmlHelpers do
  use Phoenix.HTML

  def div_element(content, option) do
    content_tag(:div, content, option)
  end

  def ul_element(content, option) do
    content_tag(:ul, content, option)
  end

  def li_element(content, option) do
    content_tag(:li, content, option)
  end

  def span_element(content, option) do
    content_tag(:span, content, option)
  end

  def fa_icon(icon, opts \\ "") do
    ~E"""
    <i class="<%= icon %> <%= opts %>"></i>
    """
  end
end

<%= render_items( @items, "Menu", 1) %>

@menu_width 32
def render_items(items, title, depth) do
  menu_title = make_title(title, depth)
  menu_items = Enum.map(items, fn item -> item |> render_item(depth) end)
               |> ul_element([class: "menu-item-container w-#{@menu_width} #{position(depth)} group#{depth}-hover:visible"])

  [menu_title, menu_items]
  |> div_element([class: "menu-group group#{depth}"])
end

<div class="menu-group group1">
  <div>タイトル</div>
  <ul class="menu-item-container w-32 left-0 group1-hover:visible">
    ここにitemsが並びます
  </ul>
</div>

def make_title(title, 1) do
  div_element(title, [class: "menu-title"])
end

def make_title(title, _depth) do
  t = div_element(title,[])
  a = fa_icon("fas fa-caret-right")
  div_element([t, a], [class: "flex items-center justify-between p-2"])
end

def position(1) do
  "left-0"
end

def position(_depth) do
  "left-#{@menu_width} top-0"
end

def render_item(%MenuItem{title: title, link: link, child_items: []}, _depth) do
  li_element(link( title, to: link ), [class: "menu-item"])
end

def render_item(%MenuItem{title: title, child_items: child_items}, depth) do
  render_items(child_items, title, depth + 1)
end

# lib/hoverable_ddm_web/views/hoverable_menu_view.ex
defmodule HoverableDdmWeb.HoverableMenuView do
  use HoverableDdmWeb, :view
  alias HoverableDdm.Menu.MenuItem
  import HoverableDdmWeb.HtmlHelpers

  @menu_width 32

  def position(1) do
    "left-0"
  end

  def position(_depth) do
    "left-#{@menu_width} top-0"
  end

  def make_title(title, 1) do
    div_element(title, [class: "menu-title"])
  end

  def make_title(title, _depth) do
    t = div_element(title,[])
    a = fa_icon("fas fa-caret-right")
    div_element([t, a], [class: "flex items-center justify-between p-2"])
  end

  def render_items(items, title, depth) do
    menu_title = make_title(title, depth)
    menu_items = Enum.map(items, fn item -> item |> render_item(depth) end)
                 |> ul_element([class: "menu-item-container w-#{@menu_width} #{position(depth)} group#{depth}-hover:visible"])

    [menu_title, menu_items]
    |> div_element([class: "menu-group group#{depth}"])
  end

  def render_item(%MenuItem{title: title, link: link, child_items: []}, _depth) do
    li_element(link( title, to: link ), [class: "menu-item"])
  end

  def render_item(%MenuItem{title: title, child_items: child_items}, depth) do
    render_items(child_items, title, depth + 1)
  end

end