use the bootstrap dropdown library instead of trying to put it together myself

app/pods/components/groups-list/component.js

@@ -1,8 +1,8 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNameBindings: ['groupControlDisplayed:on'],
+  classNames: ['dropdown-menu'],
-  elementId: 'groupControls',
+  elementId: 'groupList',
 
   tagName: null,
 

app/pods/components/hue-controls/component.js

@@ -13,8 +13,6 @@ export default Em.Component.extend({
   lightsData: null,
 
   activeLights: [],
-  groupControlDisplayed: false,
-  appSettingsDisplayed: false,
 
   actions: {
     changeTab(tabName){
@@ -22,21 +20,11 @@ export default Em.Component.extend({
       this.set('selectedTab', index);
       localStorage.setItem('huegasm.selectedTab', index);
     },
-
-    toggleGroupControl(){
-      this.toggleProperty('groupControlDisplayed');
-    },
-
-    toggleAppSettings(){
-      this.toggleProperty('appSettingsDisplayed');
-    },
-
     clearBridge() {
       delete localStorage['huegasm.bridgeUsername'];
       delete localStorage['huegasm.bridgeIp'];
       location.reload();
     },
-
     clearAllSettings() {
       localStorage.clear();
       location.reload();
@@ -62,17 +50,6 @@ export default Em.Component.extend({
     });
 
     observer.observe(Em.$('#hueControls')[0], {childList: true, subtree: true});
-
-    // automatically close the group menu when the user clicks somewhere else
-    Em.$(document).click(function() {
-      if(self.get('groupControlDisplayed') && !event.target.classList.contains('group') && !Em.$(event.target).closest('#groupControls, #modal-overlays, .ember-modal-overlay').length) {
-        self.toggleProperty('groupControlDisplayed');
-      }
-
-      if(self.get('appSettingsDisplayed') && !event.target.classList.contains('settings') && !Em.$(event.target).closest('#appSetting').length) {
-        self.toggleProperty('appSettingsDisplayed');
-      }
-    });
   },
 
   init() {

app/pods/components/hue-controls/template.hbs

@@ -7,21 +7,27 @@
     </div>
 
     <div id="settings" class="col-xs-3">
-      <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
+      <span id="groupMenu" class="settingsItem">
-        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>
+        <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Light Groups">
+            {{paper-icon icon="group"}}
+          </span>
+        </span>
 
         {{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
       </span>
 
-      <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}">
+      <span id="appSettingsMenu" class="settingsItem">
-        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings" {{action "toggleAppSettings"}}>{{paper-icon icon="settings"}}</span>
+        <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Application Settings">
+            {{paper-icon icon="settings"}}
+          </span>
+        </span>
 
-        {{#if appSettingsDisplayed}}
+        <ul id="appSettings" class="dropdown-menu">
-          <div id="appSettings">
+          <li class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</li>
-            <div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
+          <li class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</li>
-            <div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
+        </ul>
-          </div>
-        {{/if}}
       </span>
     </div>
   </div>

app/styles/app.scss

@@ -65,11 +65,6 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
   background: darken(white, 20%);
 }
 
-.settingsItem.on md-icon.md-default-theme.group,
-.settingsItem.on md-icon.md-default-theme.settings {
-  color: $secondaryThemeColor !important;
-}
-
 .settingsItem:hover md-icon.group,
 .settingsItem:hover md-icon.settings {
   color: black !important;
@@ -142,9 +137,11 @@ md-progress-linear {
 #appSettings {
   position: absolute;
   background: white;
-  box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
+  box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
-  width: 200px;
+  width: 210px;
-  right: 0;
+  left: -182px;
+  top: 25px;
+  padding: 0;
 }
 
 .bootstrapTooltip md-icon {
@@ -230,8 +227,7 @@ md-slider.md-default-theme .md-thumb:after {
   overflow: visible;
 }
 
-#groupControls {
+#groupList {
-  display: none;
   box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
   border-radius: 0 0 5px 5px;
   width: 300px;
@@ -244,10 +240,6 @@ md-slider.md-default-theme .md-thumb:after {
   text-align: left;
 }
 
-#groupControls.on {
-  display: block;
-}
-
 .lightGroup {
   margin: 0 auto 0 auto;
   .tooltip.top {

ember-cli-build.js

@@ -10,6 +10,7 @@ module.exports = function(defaults) {
 
   app.import('vendor/dancer.js');
   app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
+  app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
   app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
   app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
   app.import('bower_components/three.js/three.js');