first iteration on frontend, done by claude because i'm lazy with frontend

2026-05-20 12:02:51 -06:00
parent 887ad1e981
commit 64efed0809
49 changed files with 11864 additions and 0 deletions
@@ -0,0 +1,73 @@
+<template>
+  <nav class="relative flex flex-wrap items-center justify-between px-0 py-2 mx-6 transition-all shadow-none duration-250 ease-soft-in rounded-2xl lg:flex-nowrap lg:justify-start">
+    <div class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit">
+
+      <nav aria-label="breadcrumb">
+        <ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
+          <li class="text-sm leading-normal">
+            <RouterLink class="opacity-50 text-slate-700" to="/">Pages</RouterLink>
+          </li>
+          <li
+            class="text-sm pl-2 capitalize leading-normal text-slate-700 before:float-left before:pr-2 before:content-['/']"
+            aria-current="page"
+          >
+            {{ title }}
+          </li>
+        </ol>
+        <h6 class="mb-0 font-bold capitalize">{{ title }}</h6>
+      </nav>
+
+      <button
+        type="button"
+        class="inline-block p-0 font-bold text-center uppercase align-middle transition-all ease-in border-0 rounded-lg cursor-pointer text-xs leading-pro xl:hidden"
+        @click="$emit('toggle-sidebar')"
+        aria-label="Toggle navigation"
+      >
+        <i class="fas fa-bars text-slate-700"></i>
+      </button>
+
+      <div class="flex items-center mt-2 grow sm:mt-0 sm:mr-6 md:mr-0 lg:flex lg:basis-auto">
+        <div class="flex items-center md:ml-auto md:pr-4">
+          <div class="relative flex flex-wrap items-stretch w-full transition-all rounded-lg ease-soft">
+            <span class="text-sm ease-soft leading-5.6 absolute z-50 -ml-px flex h-full items-center whitespace-nowrap rounded-lg rounded-tr-none rounded-br-none border border-r-0 border-transparent bg-transparent py-2 px-2.5 text-center font-normal text-slate-500 transition-all">
+              <i class="fas fa-search" aria-hidden="true"></i>
+            </span>
+            <input
+              type="text"
+              class="pl-8.75 text-sm focus:shadow-soft-primary-outline ease-soft w-1/100 leading-5.6 relative -ml-px block min-w-0 flex-auto rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 pr-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow"
+              placeholder="Search..."
+            />
+          </div>
+        </div>
+
+        <ul class="flex flex-row justify-end pl-0 mb-0 list-none md-max:w-full">
+          <li class="flex items-center">
+            <button
+              class="block px-0 py-2 font-semibold transition-all ease-nav-brand text-sm text-slate-500 hover:text-slate-700 bg-transparent border-0 cursor-pointer"
+              @click="handleLogout"
+            >
+              <i class="fas fa-sign-out-alt text-lg mr-1"></i>
+              <span class="sm:inline">{{ auth.user?.name ?? 'Account' }}</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { RouterLink, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+defineProps<{ title: string }>()
+defineEmits<{ 'toggle-sidebar': [] }>()
+
+const auth = useAuthStore()
+const router = useRouter()
+
+function handleLogout() {
+  auth.logout()
+  router.push({ name: 'login' })
+}
+</script>