first load

styles/_header.scss

@@ -0,0 +1,261 @@
+/***** Header *****/
+$header-height: 71px;
+
+.header {
+  @include max-width-container;
+  position: relative;
+  align-items: center;
+  display: flex;
+  height: $header-height;
+  justify-content: space-between;
+}
+
+.logo img {
+  max-height: 37px;
+  vertical-align: middle;
+}
+
+.logo span {
+  margin: 0 10px;
+  color: $brand_color;
+}
+
+.logo a {
+  display: inline-block;
+}
+
+.logo a:hover, .logo a:focus, .logo a:active {
+  text-decoration: none;
+}
+
+.user-nav {
+  @include tablet { position: relative; }
+  display: inline-block;
+  position: absolute;
+  white-space: nowrap;
+
+  &[aria-expanded="true"] {
+    background-color: #fff;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15), 0 4px 10px 0 rgba(0, 0, 0, .1);
+    border: solid 1px #ddd;
+    right: 0;
+    left: 0;
+    top: $header-height;
+    z-index: 1;
+
+    > a {
+      display: block;
+      margin: 20px;
+    }
+
+    > .user-nav-list {
+      li {
+        display: block;
+      }
+
+      a {
+        display: block;
+        margin: 20px;
+      }
+    }
+  }
+}
+
+.user-nav-list {
+  display: block;
+  list-style: none;
+
+  > li {
+    display: inline-block;
+  }
+}
+
+.nav-wrapper-desktop {
+  @include mobile { display: none; }
+  @include tablet { display: none; }
+  @include desktop { display: inline-block; }
+
+  a {
+    @include tablet {
+      display: inline-block;
+    }
+
+    border: 0;
+    color: $link_color;
+    display: none;
+    font-size: 14px;
+    padding: 0 20px 0 0;
+    width: auto;
+
+    [dir="rtl"] & { padding: 0 0 0 20px;}
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: transparent;
+      color: $link_color;
+      text-decoration: underline;
+    }
+  }
+}
+
+.nav-wrapper-mobile {
+  @include desktop { display: none; }
+
+  .menu-button-mobile {
+    background: none;
+    border: 0;
+    width: auto;
+    min-width: 71px;
+    cursor: pointer;
+
+    .icon-menu {
+      padding: 7px;
+      vertical-align: middle;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+    }
+
+    &[aria-expanded="true"] {
+      .icon-menu {
+        background: #f3f3f3;
+      }
+    }
+  }
+
+  .menu-list-mobile {
+    position: absolute;
+    background-color: #fff;
+    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .15);
+    border-top: solid 1px #ddd;
+    border-bottom: solid 1px #ddd;
+    right: 0;
+    left: 0;
+    top: $header-height;
+    z-index: 2;
+
+    &[aria-expanded="false"] {
+      display: none;
+    }
+
+    &[aria-expanded="true"] {
+      display: block;
+    }
+  }
+
+  .menu-list-mobile-items {
+    .item {
+      margin: 4px 0;
+    }
+
+    li:empty:not(.nav-divider){
+      display: none;
+    }
+
+    .nav-divider {
+      border-bottom: 0.1px solid #ddd;
+      padding: 0;
+
+      &:last-child {
+        display: none;
+      }
+    }
+
+    button {
+      background: none;
+      border: none;
+      padding: 8px 24px;
+
+      width: 100%;
+      height: 100%;
+      color: $text_color;
+      cursor: pointer;
+      text-align: start;
+
+      &:active, &:focus, &:hover {
+        background-color: #f3f3f3;
+        text-decoration: underline;
+      }
+    }
+
+    a {
+      display: block;
+      padding: 8px 24px;
+      width: 100%;
+      height: 100%;
+      color: $text_color;
+
+      &:active, &:focus, &:hover {
+        background-color: #f3f3f3;
+      }
+    }
+
+    .my-profile {
+      display: flex;
+      line-height: 1.5;
+
+      .my-profile-tooltip {
+        font-size: 12px;
+        color: #68737D;
+      }
+    }
+
+    .menu-profile-avatar {
+      height: 20px;
+      width: 20px;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 8px;
+      margin-top: 1px;
+
+      [dir="rtl"] & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.skip-navigation {
+  align-items: center;
+  background-color: black;
+  color: white;
+  display: flex;
+  font-size: 14px;
+  justify-content: center;
+  left: -999px;
+  margin: 20px;
+  padding: 20px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  z-index: -999;
+
+
+  [dir="rtl"] & {
+    left: initial;
+    right: -999px;
+  }
+
+  &:focus,
+  &:active {
+    left: auto;
+    overflow: auto;
+    text-align: center;
+    text-decoration: none;
+    top: auto;
+    z-index: 999;
+
+
+  [dir="rtl"] & {
+    left: initial;
+    right: auto;
+  }
+  }
+}
+
+// Disable the skip-navigation link when modals are open
+#zd-modal-container ~ .skip-navigation {
+  display: none;
+}