Make current code library + add docs

lib/components/nav/NavItem.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { Button } from '@/components'
+
+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>

lib/components/nav/NavRow.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({})
+</script>
+
+<template>
+  <div class="omorphia__navrow">
+    <slot />
+    <div class="margin-left-auto">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.omorphia__navrow {
+  display: flex;
+  flex-direction: row;
+
+  :deep(.omorphia__button) {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: calc(100% - var(--gap-lg) * 2);
+      height: 4px;
+      bottom: 4px;
+      border-radius: var(--radius-max);
+      background-color: var(--color-brand);
+      opacity: 0;
+    }
+
+    &:hover::after {
+      opacity: 50%;
+    }
+
+    &.selected {
+      color: var(--color-contrast);
+      font-weight: bold;
+
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

lib/components/nav/NavStack.vue

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