Move menu and navigation styles to their own files

This way we follow the convention of one stylesheet per component.
Note that we depend on Foundation's `menu` class for some of the
styles and JavaScript behavior, so we're keeping both the `menu` and
`account-menu` classes.

app/assets/stylesheets/layout.scss

@@ -577,72 +577,6 @@ body > header,
     background: none;
   }
 
-  .menu > li {
-    display: block;
-    width: 100%;
-
-    @include breakpoint(medium) {
-      width: auto;
-    }
-
-    a {
-      color: inherit;
-      line-height: inherit;
-      padding-left: 0;
-
-      @include breakpoint(medium) {
-        font-size: $small-font-size;
-        padding: rem-calc(8) rem-calc(16);
-      }
-    }
-
-    .button {
-      background: none;
-      text-align: left;
-
-      @include breakpoint(medium) {
-        @include brand-color;
-        background: $body-background;
-        text-align: center;
-      }
-    }
-  }
-
-  .has-submenu {
-
-    &.is-active a {
-      font-weight: bold;
-    }
-  }
-
-  .menu {
-
-    @include breakpoint(small only) {
-      border-bottom: 1px solid $border;
-      margin-bottom: $line-height;
-      margin-top: $line-height / 2;
-      padding-bottom: $line-height;
-
-      .submenu {
-        margin-top: 0;
-      }
-    }
-
-    &.is-dropdown-submenu {
-      @extend %body-colors;
-      margin: 0;
-      margin-top: rem-calc(-12);
-      padding: 0;
-      z-index: 9;
-    }
-
-    .is-submenu-item {
-      display: block;
-      height: auto;
-      margin-bottom: 0;
-    }
-  }
-
   .top-bar-title {
     line-height: $line-height;
     margin-right: 0;
@@ -731,96 +665,6 @@ body > header,
   }
 }
 
-.subnavigation {
-  display: flex;
-  flex-direction: column;
-
-  @include breakpoint(medium) {
-    @include background-with-text-contrast($subnavigation, subnavigation);
-    flex-direction: row;
-    padding-bottom: 0;
-
-    > :first-child {
-      flex-grow: 1;
-    }
-  }
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-
-    li {
-      @include breakpoint(medium) {
-        display: inline-block;
-        margin-right: rem-calc(20);
-      }
-    }
-  }
-
-  a {
-    color: inherit;
-    display: inline-block;
-    padding-bottom: $line-height / 2;
-    padding-top: $line-height / 2;
-    position: relative;
-    text-align: left;
-    width: 100%;
-
-    @include breakpoint(medium) {
-      display: block;
-      font-weight: bold;
-      width: auto;
-
-      &:hover {
-        @include anchor-color;
-      }
-
-      &.is-active {
-        @include brand-color;
-        border-bottom: 2px solid;
-        margin-bottom: 1px;
-      }
-    }
-
-    &:focus {
-      z-index: 1;
-    }
-  }
-
-  .input-group {
-    padding-top: $line-height / 4;
-
-    @include breakpoint(medium) {
-      margin-bottom: 0;
-    }
-  }
-
-  .input-group-field {
-    margin-bottom: 0 !important;
-  }
-
-  .input-group-button {
-    line-height: $line-height * 1.5;
-    padding-bottom: 0;
-
-    button {
-      @include background-with-text-contrast($border);
-      border: 1px solid #ccc;
-      border-left: 0;
-      height: $line-height * 1.5;
-      line-height: $line-height * 1.5;
-      padding-top: 0;
-    }
-  }
-
-  input {
-    height: $line-height * 1.5 !important;
-    margin-bottom: 0;
-    margin-right: 0;
-    width: 100%;
-  }
-}
-
 .top-bar-right {
 
   .is-active {

app/assets/stylesheets/layout/account_menu.scss

@@ -0,0 +1,65 @@
+.account-menu.menu {
+
+  @include breakpoint(small only) {
+    margin-top: $line-height / 2;
+
+    &,
+    .menu {
+      border-bottom: 1px solid $border;
+      margin-bottom: $line-height;
+      padding-bottom: $line-height;
+    }
+  }
+
+  .is-dropdown-submenu {
+    @extend %body-colors;
+    margin: 0;
+    margin-top: rem-calc(-12);
+    padding: 0;
+    z-index: 9;
+  }
+
+  .is-submenu-item {
+    display: block;
+    height: auto;
+    margin-bottom: 0;
+  }
+
+  li {
+    display: block;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      width: auto;
+    }
+
+    a {
+      color: inherit;
+      line-height: inherit;
+      padding-left: 0;
+
+      @include breakpoint(medium) {
+        font-size: $small-font-size;
+        padding: rem-calc(8) rem-calc(16);
+      }
+    }
+
+    .button {
+      background: none;
+      text-align: left;
+
+      @include breakpoint(medium) {
+        @include brand-color;
+        background: $body-background;
+        text-align: center;
+      }
+    }
+  }
+
+  .has-submenu {
+
+    &.is-active a {
+      font-weight: bold;
+    }
+  }
+}

app/assets/stylesheets/layout/subnavigation.scss

@@ -0,0 +1,89 @@
+.subnavigation {
+  display: flex;
+  flex-direction: column;
+
+  @include breakpoint(medium) {
+    @include background-with-text-contrast($subnavigation, subnavigation);
+    flex-direction: row;
+    padding-bottom: 0;
+
+    > :first-child {
+      flex-grow: 1;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+
+    li {
+      @include breakpoint(medium) {
+        display: inline-block;
+        margin-right: rem-calc(20);
+      }
+    }
+  }
+
+  a {
+    color: inherit;
+    display: inline-block;
+    padding-bottom: $line-height / 2;
+    padding-top: $line-height / 2;
+    position: relative;
+    text-align: left;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      display: block;
+      font-weight: bold;
+      width: auto;
+
+      &:hover {
+        @include anchor-color;
+      }
+
+      &.is-active {
+        @include brand-color;
+        border-bottom: 2px solid;
+        margin-bottom: 1px;
+      }
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+  }
+
+  .input-group {
+    padding-top: $line-height / 4;
+
+    @include breakpoint(medium) {
+      margin-bottom: 0;
+    }
+  }
+
+  .input-group-field {
+    margin-bottom: 0 !important;
+  }
+
+  .input-group-button {
+    line-height: $line-height * 1.5;
+    padding-bottom: 0;
+
+    button {
+      @include background-with-text-contrast($border);
+      border: 1px solid #ccc;
+      border-left: 0;
+      height: $line-height * 1.5;
+      line-height: $line-height * 1.5;
+      padding-top: 0;
+    }
+  }
+
+  input {
+    height: $line-height * 1.5 !important;
+    margin-bottom: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+}

app/components/layout/account_menu_component.html.erb

@@ -1,4 +1,4 @@
-<ul class="menu" data-responsive-menu="medium-dropdown">
+<ul class="account-menu menu" data-responsive-menu="medium-dropdown">
   <%= render Layout::AdminLoginItemsComponent.new(user) %>
   <%= render Layout::NotificationItemComponent.new(user) %>
   <%= render Layout::LoginItemsComponent.new(user) %>