Unify dropdown functionality across all dropdowns

[hom3mad3]

Issue:

dropdown.js lacks certain features found in user_indicator.js, such as keyboard navigation and close-on-click-outside functionality. However, user_indicator.js isn't easily modularized due to its design, which focuses on a single element without considering component reusability.

Proposal:

To address this, I'd suggest refactoring user_indicator.js onto dropdown.js to integrate the missing features, enhancing the overall reusability of dropdown functionality. This will ensure that all dropdowns use one JS file, even when multiple instances are present on the page.

Example:

1. dropdown.js

element triggered with dropdown.js and styled by scss/components_user_facing/_dropdown.scss:

2. user_indicator.js

event is triggered w/ user_indicator.js and styled by /scss/components_user_facing/_user_indicator.scss: