Migrate to Turborepo (#1251)

packages/ui/src/components/nav/Breadcrumbs.vue

@@ -0,0 +1,52 @@
+<template>
+  <nav class="breadcrumbs">
+    <template v-for="(link, index) in linkStack" :key="index">
+      <RouterLink
+        :to="link.href"
+        class="breadcrumb goto-link"
+        :class="{ trim: link.allowTrimming ? link.allowTrimming : false }"
+      >
+        {{ link.label }}
+      </RouterLink>
+      <ChevronRightIcon />
+    </template>
+    <span class="breadcrumb">{{ currentTitle }}</span>
+  </nav>
+</template>
+
+<script setup>
+import { ChevronRightIcon } from '@modrinth/assets'
+
+defineProps({
+  linkStack: {
+    type: Array,
+    default: () => [],
+  },
+  currentTitle: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.breadcrumbs {
+  display: flex;
+  margin-bottom: var(--gap-lg);
+  align-items: center;
+  flex-wrap: wrap;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  a.breadcrumb {
+    padding-block: var(--gap-xs);
+    &.trim {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

packages/ui/src/components/nav/NavItem.vue

@@ -0,0 +1,50 @@
+<script setup>
+import Button from '../base/Button.vue'
+
+defineProps({
+  link: {
+    type: String,
+    default: null,
+  },
+  external: {
+    type: Boolean,
+    default: false,
+  },
+  action: {
+    type: Function,
+    default: null,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+})
+</script>
+
+<template>
+  <Button
+    :link="link"
+    :external="external"
+    :action="action"
+    design="nav"
+    class="quiet-disabled"
+    :class="{
+      selected: selected,
+    }"
+    :disabled="selected"
+    :navlabel="label"
+  >
+    <slot />
+    {{ label }}
+  </Button>
+</template>
+
+<style lang="scss" scoped></style>

packages/ui/src/components/nav/NavRow.vue

@@ -0,0 +1,166 @@
+<template>
+  <nav class="navigation">
+    <router-link
+      v-for="(link, index) in filteredLinks"
+      v-show="link.shown === undefined ? true : link.shown"
+      :key="index"
+      ref="linkElements"
+      :to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+      class="nav-link button-animation"
+    >
+      <span>{{ link.label }}</span>
+    </router-link>
+    <div
+      class="nav-indicator"
+      :style="{
+        left: positionToMoveX,
+        top: positionToMoveY,
+        width: sliderWidth,
+        opacity: activeIndex === -1 ? 0 : 1,
+      }"
+      aria-hidden="true"
+    />
+  </nav>
+</template>
+
+<script>
+export default {
+  props: {
+    links: {
+      default: () => [],
+      type: Array,
+    },
+    query: {
+      default: null,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      sliderPositionX: 0,
+      sliderPositionY: 18,
+      selectedElementWidth: 0,
+      activeIndex: -1,
+      oldIndex: -1,
+    }
+  },
+  computed: {
+    filteredLinks() {
+      return this.links.filter((x) => (x.shown === undefined ? true : x.shown))
+    },
+    positionToMoveX() {
+      return `${this.sliderPositionX}px`
+    },
+    positionToMoveY() {
+      return `${this.sliderPositionY}px`
+    },
+    sliderWidth() {
+      return `${this.selectedElementWidth}px`
+    },
+  },
+  watch: {
+    '$route.path': {
+      handler() {
+        this.pickLink()
+      },
+    },
+    '$route.query': {
+      handler() {
+        if (this.query) this.pickLink()
+      },
+    },
+  },
+  mounted() {
+    window.addEventListener('resize', this.pickLink)
+    this.pickLink()
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.pickLink)
+  },
+  methods: {
+    pickLink() {
+      this.activeIndex = this.query
+        ? this.filteredLinks.findIndex(
+            (x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query]
+          )
+        : this.filteredLinks.findIndex((x) => x.href === decodeURIComponent(this.$route.path))
+
+      if (this.activeIndex !== -1) {
+        this.startAnimation()
+      } else {
+        this.oldIndex = -1
+        this.sliderPositionX = 0
+        this.selectedElementWidth = 0
+      }
+    },
+    startAnimation() {
+      const el = this.$refs.linkElements[this.activeIndex].$el
+
+      this.sliderPositionX = el.offsetLeft
+      this.sliderPositionY = el.offsetTop + el.offsetHeight
+      this.selectedElementWidth = el.offsetWidth
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.navigation {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  grid-gap: 1rem;
+  flex-wrap: wrap;
+  position: relative;
+
+  .nav-link {
+    text-transform: capitalize;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-base);
+    position: relative;
+
+    &:hover {
+      color: var(--color-base);
+
+      &::after {
+        opacity: 0.4;
+      }
+    }
+
+    &:active::after {
+      opacity: 0.2;
+    }
+
+    &.router-link-exact-active {
+      color: var(--color-base);
+
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.use-animation {
+    .nav-link {
+      &.is-active::after {
+        opacity: 0;
+      }
+    }
+  }
+
+  .nav-indicator {
+    position: absolute;
+    height: 0.25rem;
+    bottom: -5px;
+    left: 0;
+    width: 3rem;
+    transition: all ease-in-out 0.2s;
+    border-radius: var(--radius-max);
+    background-color: var(--color-brand);
+
+    @media (prefers-reduced-motion) {
+      transition: none !important;
+    }
+  }
+}
+</style>

packages/ui/src/components/nav/NavStack.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="omorphia__navstack">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.omorphia__navstack {
+  display: flex;
+  flex-direction: column;
+
+  :deep(.btn) {
+    position: relative;
+    width: 100%;
+
+    &.selected {
+      background-color: var(--color-button-bg);
+      font-weight: bold;
+    }
+  }
+}
+</style>