first load

styles/_collapsible-nav.scss

@@ -0,0 +1,137 @@
+/* Navigation element that collapses on mobile */
+.collapsible-nav {
+  @include tablet {
+    flex-direction: row;
+  }
+
+  flex-direction: column;
+  font-size: $font-size-navigation;
+  position: relative;
+}
+
+.collapsible-nav-border {
+  @include tablet {
+    border-top: 0;
+  }
+
+  border-bottom: 1px solid $low-contrast-border-color;
+  border-top: 1px solid $low-contrast-border-color;
+}
+
+.collapsible-nav-toggle {
+  @include tablet { display: none; }
+  top: calc(45px / 2);
+  transform: translateY(-50%);
+  position: absolute;
+  right: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+
+  [dir="rtl"] & {
+    left: 0;
+    right: auto;
+  }
+
+  &-icon {
+    display: none;
+  }
+
+  &[aria-expanded="false"] {
+    .chevron-icon {
+      display: inline-block;
+    }
+  }
+  
+  &[aria-expanded="true"] {
+    .x-icon {
+      display: inline-block;
+    }
+  }
+
+  &:focus {
+    outline: none;
+    border: 1px solid $brand_color;
+  }
+}
+
+.collapsible-nav-list {
+  @include tablet {
+    flex-direction: row;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  li {
+    @include tablet {
+      line-height: normal;
+      margin-right: 30px;
+
+      [dir="rtl"] & {
+        margin-left: 30px;
+        margin-right: 0;
+      }
+
+      a {
+        text-decoration: none;
+        padding: 15px 0;
+      }
+    }
+
+    color: $text_color;
+    line-height: 45px;
+    order: 1; // All elements have the same order
+
+    a {
+      color: $text_color;
+      display: block;
+    }
+  }
+
+  li:hover {
+    @include tablet {
+      border-bottom: 4px solid #ddd;
+
+      a:not([aria-current="page"]) {
+        padding: 15px 0 11px 0;
+        text-decoration: none;
+      }
+    }
+  }
+
+  li:not([aria-selected="true"]),
+  li:not(.current) {
+    @include tablet { display: block; }
+    display: none;
+  }
+
+  li[aria-selected="true"] {
+    @include tablet {
+      padding: 15px 0 11px 0;
+    }
+  }
+
+  li[aria-selected="true"],
+  li.current {
+    @include tablet {
+      border-bottom: 4px solid $brand_color;
+      order: 1;
+    }
+
+    order: 0; //Move to top of menu
+    position: relative;
+
+    a { color: $text_color; }
+  }
+}
+
+.collapsible-nav[aria-expanded="true"] {
+  li:not([aria-selected="true"]),
+  li:not(.current) {
+    display: block;
+  }
+}