[Purchase agency service personal development --No.012] Dropdown implemented in JS

Pull Request

Overview

Since the drop-down menu on the upper right is always displayed, make sure that the drop-down menu is displayed after clicking the user icon.

reference

tailwind ui https://tailwindui.com/components/application-ui/elements/dropdowns

tippy.js

https://atomiks.github.io/tippyjs/v6/all-props/

https://on-ze.com/archives/7310

ToDo contents

Terminal

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

yarn add turbolinks

app/javascript/src/js/dropdown.js

import tippy from 'tippy.js'
import 'tippy.js/animations/perspective.css';

document.addEventListener('turbolinks:load', init)

function init () {
  tippy('[data-dropdown]', {
    content (ref) {
      if (!ref.dataset.dropdownTemplate) {
        const id = ref.getAttribute('data-dropdown')
        const template = document.getElementById(id)
        ref.dataset.dropdownTemplate = template.innerHTML
        template.remove()
      }
      return ref.dataset.dropdownTemplate
    },
    trigger: 'click',
    allowHTML: true,
    interactive: true,
    appendTo: () => document.body,
    animation: 'perspective',
    duration: 100,
    placement: 'bottom-end'
  })
}

slim:app/components/layout/navbar_component.html.slim

button.flex.text-sm.border-2.border-transparent.rounded-full.focus:outline-none.focus:border-gray-300.transition.duration-150.ease-in-out(
  type="button"
  class="group h-full flex items-center px-4 text-left focus:outline-none focus:rounded-md"
  data-dropdown="navbar-dropdown"
)
  i.fas.fa-user-circle.fa-2x.text-gray-500
#navbar-dropdown.hidden
  .origin-top-right.absolute.right-0.mt-2.w-48.rounded-md.shadow-lg
    .py-1.rounded-md.bg-white.shadow-xs
      = link_to [:orgs], class: 'block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out' do
        |Company switching
      / TODO:The link@Rewrite to org
      = link_to [@org], class: 'block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out' do
        |Company details

Operation check

Preparation

Terminal-1

bin/rails s

Terminal-2

bin/webpack-dev-server

Acceptance criteria

-[x] The drop-down menu at the top right of the screen is displayed after clicking the user icon.