collapse user menu by default

client/components/menu/menu.scss

@@ -50,6 +50,7 @@ $text: #444444;
 .menu-top-label{
   cursor: pointer;
 }
+
 // ------------------------------------ List ------------------------------------ //
 
 .menu-list{
@@ -166,7 +167,7 @@ $text: #444444;
       display: none;
     }
   }
-  &.menu-long .show-more{
+  &.menu-show-more .show-more{
     display: block; // only show the "show more" button if the menu has more than three items
   }
   &.menu-open{
@@ -187,4 +188,18 @@ $text: #444444;
   &.menu-open .menu-contents{
     max-height: 999px !important;
   }
+  &.menu-collapsed{
+    .menu-contents{
+      max-height: 0px;
+      .dropdown-item:first-child{
+        padding-top: 10px;
+      }
+    }
+    .show-more{
+      margin-top: -1px;
+    }
+    &.menu-has-items .show-more{
+      display: block; // show the "show more" button if the menu has any items
+    }
+  }
 }

client/components/menu/menu_component.html

@@ -24,6 +24,9 @@ menuLabel (String) [optional]
 menuClass (String) [optional]
 | An optional default CSS class given to the menu
 
+- menuCollapsed (Boolean) [optional]
+| whether the menu should start out collapsed (only useful for accordion menus)
+
 menuMode (String) [optional]
 | "accordion", "dropdown", or "list" (defaults to "list")
 

client/components/menu/menu_component.js

@@ -28,21 +28,25 @@ Template[getTemplate('menuComponent')].helpers({
 
     classes.push("menu-"+mode);
 
-    if(!!this.menuClass) {
+    if (!!this.menuClass) {
       classes.push(this.menuClass)
     }
 
-    // enable menu if top-nav layout is enabled, if themes supports menus, and if menu isn't empty
+    if (this.menuCollapsed) {
+      classes.push("menu-collapsed");
+      classes.push("menu-show-more");
+    }
+
     if (count) {
       classes.push("menu-has-items");
       if (count > 3) {
-        classes.push("menu-long");
+        classes.push("menu-show-more");
       }
     } else {
       classes.push("menu-no-items");
     }
 
-    return classes.join(" ");
+    return _.unique(classes).join(" ");
   },
   menuLabel: function () {
     // if label is defined, use this. Else default to menu name

client/views/nav/user_menu.html

@@ -1,6 +1,6 @@
 <template name="userMenu">
   {{#if isLoggedIn}}
-    {{> menuComponent menuName="user" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode}}
+    {{> menuComponent menuName="user" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode menuCollapsed=true}}
   {{else}}
     <a class="account-link sign-in" href="{{pathFor route='atSignUp'}}">{{_ "sign_up"}}</a>
     <a class="account-link sign-up" href="{{pathFor route='atSignIn'}}">{{_ "sign_in"}}</a>

packages/telescope-notifications/lib/client/templates/notifications_menu.html

@@ -1,5 +1,5 @@
 <template name="notificationsMenu">
   {{#if isLoggedIn}}
-    {{> menuComponent menuName="notifications" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode}}
+    {{> menuComponent menuName="notifications" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode menuCollapsed=true}}
   {{/if}}
 </template>

packages/telescope-theme-base/lib/client/scss/specific/_notifications.scss

@@ -1,17 +1,3 @@
 .notification-item{
   margin-bottom: 10px;
 }
-.notifications-menu.menu-accordion{
-  .menu-contents{
-    max-height: 0px;
-    .dropdown-item:first-child{
-      padding-top: 10px;
-    }
-  }
-  .show-more{
-    margin-top: -1px;
-  }
-  &.menu-has-items .show-more{
-    display: block; // show the "show more" button if the menu has any items
-  }
-}