Refactor Menubar

[lynkos]

Divider:
    Alias for `<div class="divider"></div>`

MenuItem:
    Label (String): Item label
    Symbol (String, optional): Symbol to the right of item (e.g. `⇧ ⌘ ⌫`); can also be FontAwesome icon (e.g. `<i alt="Right chevron icon" class="fas fa-chevron-right mini-icon" aria-hidden="true"></i></div>`)
    Disabled (boolean, optional): Add `.disabled` class if `true`; default is `false`

Menu:
    Label (String OR `svg` code): Menu label
    Items (List[MenuItem | Divider]): List of `MenuItem`s or `Divider`s

Example

Input

Menu(
    "Finder",
    [
        MenuItem("About Finder"),
        Divider(),
        MenuItem("Settings…", "⌘ ,"),
        Divider(),
        MenuItem("Empty Trash…", "⇧ ⌘ ⌫"),
        Divider(),
        MenuItem("Services", '<i alt="Right chevron icon" class="fas fa-chevron-right mini-icon" aria-hidden="true"></i>'),
        Divider(),
        MenuItem("Hide Finder", "⌘ H"),
        MenuItem("Hide Others", "⌥ ⌘ H"),
        MenuItem("Show All", null, true)
    ]
);

Output

Button

<span role="button" aria-pressed="false" tabindex="0" aria-haspopup="true" aria-expanded="false" id="finder" class="menus active">Finder</span>

Contents (i.e. when Button is clicked)

<div id="finder-menu" class="menu-dropdown">
  <div class="option" role="menuitem">About Finder</div>
  <div class="divider"></div>
  <div class="position-title option" role="menuitem">
    <div>Settings…</div>
    <div class="mini-icon">⌘ ,</div>
  </div>
  <div class="divider"></div>
  <div class="position-title option" role="menuitem">
    <div>Empty Trash…</div>
    <div class="mini-icon">⇧ ⌘ ⌫</div>
  </div>
  <div class="divider"></div>
  <div class="position-title option" role="menuitem">
    <div>Services</div>
    <i alt="Right chevron icon" class="fas fa-chevron-right mini-icon" aria-hidden="true"></i>
  </div>
  <div class="divider"></div>
  <div class="position-title option" role="menuitem">
    <div>Hide Finder</div>
    <div class="mini-icon">⌘ H</div>
  </div>
  <div class="position-title option" role="menuitem">
    <div>Hide Others</div>
    <div class="mini-icon">⌥ ⌘ H</div>
  </div>
  <div class="option disabled" role="menuitem">Show All</div>
</div>