Previous version made GPDR-friendly

src/scss/components/_nav.scss

@@ -0,0 +1,70 @@
+.nav {
+  &__list {
+    overflow-x: auto;
+    padding: .5rem;
+    margin: -.5rem;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > * + * {
+      margin-left: 2rem;
+    }
+  }
+
+  &__item {
+    padding: get-size(300) 0;
+    flex-shrink: 0;
+
+    a {
+      @include apply-utility('weight', 'mid');
+      color: currentColor;
+
+      &:not(:hover) {
+        text-decoration: none;
+      }
+    }
+
+    &.active a {
+      text-decoration: underline;
+      cursor: default;
+    }
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .nav {
+    margin-top: 1rem;
+
+    &__list {
+      justify-content: flex-start;
+    }
+  }
+}
+
+@media (max-width: 767.98px) {
+  .nav {
+    display: none;
+    margin-top: 0;
+
+    &.show {
+      display: block;
+      width: 100%;
+    }
+
+    &__list {
+      flex-direction: column;
+      align-items: flex-end;
+
+      > * + * {
+        margin-left: 0;
+      }
+    }
+  }
+}