chore: breadcrumb rework (#303)

* chore: breadcrumb rework * fix: visual
next-orders · Feb 17, 2025 · 4765645 · 4765645
1 parent aee797f
commit 4765645
Show file tree

Hide file tree

Showing 17 changed files with 115 additions and 166 deletions.
diff --git a/apps/web-app/app/components/CatalogBreadcrumb.vue b/apps/web-app/app/components/CatalogBreadcrumb.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="mb-6 flex flex-col md:flex-row gap-2 justify-between md:items-center">
+    <UBreadcrumb :items="items">
+      <template #separator>
+        <span class="mx-1 text-(--ui-text-dimmed)">/</span>
+      </template>
+    </UBreadcrumb>
+
+    <UButton
+      variant="soft"
+      color="primary"
+      size="md"
+      icon="food:undo"
+      class="w-full md:w-auto mx-auto md:mx-0 justify-center"
+      @click="back()"
+    >
+      {{ $t('common.return') }}
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { items } = defineProps<{
+  items: { label: string, icon?: string, to?: string }[]
+}>()
+
+const { back } = useRouter()
+</script>
diff --git a/apps/web-app/app/components/ui/breadcrumb/Breadcrumb.vue b/apps/web-app/app/components/ui/breadcrumb/Breadcrumb.vue
diff --git a/apps/web-app/app/components/ui/breadcrumb/index.ts b/apps/web-app/app/components/ui/breadcrumb/index.ts
diff --git a/apps/web-app/app/layouts/default.vue b/apps/web-app/app/layouts/default.vue
@@ -3,11 +3,11 @@
   <NavigationMain />
 
   <main class="relative w-auto min-h-dvh lg:pl-72 xl:pr-80 top-16">
-    <div class="px-2 md:px-4 pb-10 pt-4 max-w-7xl">
+    <UContainer class="pb-10 pt-4 max-w-7xl">
       <NuxtErrorBoundary>
         <slot />
       </NuxtErrorBoundary>
-    </div>
+    </UContainer>
 
     <DeliveryInfoModal />
     <CartDrawer />

diff --git a/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue b/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <UiBreadcrumb :links="breadcrumbs" :is-dark-background="true" />
+  <CatalogBreadcrumb :items="breadcrumbs" />
 
-  <div class="bg-white dark:bg-neutral-600 px-5 py-5 rounded-2xl">
+  <div>
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-x-0 gap-y-4 sm:gap-4">
       <div class="col-span-1 relative w-full aspect-square">
         <ProductImage
@@ -143,11 +143,10 @@ const inCart = computed(() => {
 })
 
 const breadcrumbs = computed(() => [
-  { title: t('common.home'), href: '/' },
+  { label: t('common.home'), icon: 'food:home', to: '/' },
   {
-    title: product.value?.category?.name ?? '',
-    href: `/catalog/${product.value?.category?.slug}`,
+    label: product.value?.category?.name ?? '',
+    to: `/catalog/${product.value?.category?.slug}`,
   },
-  { title: product.value?.name ?? '', href: '#' },
 ])
 </script>
diff --git a/apps/web-app/app/pages/catalog/[categorySlug]/index.vue b/apps/web-app/app/pages/catalog/[categorySlug]/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiBreadcrumb :links="breadcrumbs" :is-dark-background="true" />
+  <CatalogBreadcrumb :items="breadcrumbs" />
 
   <h1 class="text-3xl font-medium">
     {{ category?.name }}
@@ -34,10 +34,7 @@ useHead({
 })
 
 const breadcrumbs = computed(() => [
-  { title: t('common.home'), href: '/' },
-  {
-    title: category.value?.name ?? '',
-    href: '#',
-  },
+  { label: t('common.home'), icon: 'food:home', to: '/' },
+  { label: category.value?.name ?? '' },
 ])
 </script>
diff --git a/apps/web-app/app/pages/command-center/checkout/index.vue b/apps/web-app/app/pages/command-center/checkout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiBreadcrumb :links="breadcrumbs" :is-dark-background="true" />
+  <CatalogBreadcrumb :items="breadcrumbs" />
 
   <div class="mb-4 flex flex-col md:flex-row justify-between md:items-center gap-2">
     <h1 class="text-2xl md:text-3xl font-semibold">
@@ -27,11 +27,8 @@ definePageMeta({
 const { t } = useI18n()
 
 const breadcrumbs = computed(() => [
-  { title: t('common.website'), href: '/' },
-  {
-    title: t('center.menu.checkouts'),
-    href: '#',
-  },
+  { label: t('common.website'), icon: 'food:home', to: '/' },
+  { label: t('center.menu.checkouts') },
 ])
 
 const { checkouts } = await useCheckoutList()

diff --git a/apps/web-app/app/pages/command-center/index.vue b/apps/web-app/app/pages/command-center/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiBreadcrumb :links="breadcrumbs" :is-dark-background="true" />
+  <CatalogBreadcrumb :items="breadcrumbs" />
 </template>
 
 <script setup lang="ts">
@@ -11,10 +11,7 @@ definePageMeta({
 const { t } = useI18n()
 
 const breadcrumbs = computed(() => [
-  { title: t('common.website'), href: '/' },
-  {
-    title: t('center.menu.dashboard'),
-    href: '#',
-  },
+  { label: t('common.website'), icon: 'food:home', to: '/' },
+  { label: t('center.menu.dashboard') },
 ])
 </script>
diff --git a/apps/web-app/app/pages/command-center/menu/[id]/index.vue b/apps/web-app/app/pages/command-center/menu/[id]/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiBreadcrumb :links="breadcrumbs" :is-dark-background="true" />
+  <CatalogBreadcrumb :items="breadcrumbs" />
 
   <div class="mb-4 flex flex-col md:flex-row justify-between md:items-center gap-2">
     <h1 class="text-2xl md:text-3xl font-semibold">
@@ -97,15 +97,12 @@ const { t } = useI18n()
 const { icons } = useAppConfig()
 
 const breadcrumbs = computed(() => [
-  { title: t('common.website'), href: '/' },
+  { label: t('common.website'), icon: 'food:home', to: '/' },
   {
-    title: t('center.menu.title'),
-    href: '/command-center/menu',
-  },
-  {
-    title: t('center.menu.menu-page'),
-    href: '#',
+    label: t('center.menu.title'),
+    to: '/command-center/menu',
   },
+  { label: t('center.menu.menu-page') },
 ])
 
 const { menus } = await useChannel()

diff --git a/apps/web-app/app/pages/command-center/menu/index.vue b/apps/web-app/app/pages/command-center/menu/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiBreadcrumb :links="breadcrumbs" :is-dark-background="true" />
+  <CatalogBreadcrumb :items="breadcrumbs" />
 
   <div class="mb-4 flex flex-col md:flex-row justify-between md:items-center gap-2">
     <h1 class="text-2xl md:text-3xl font-semibold">
@@ -35,11 +35,8 @@ const isModalOpened = ref(false)
 const { t } = useI18n()
 
 const breadcrumbs = computed(() => [
-  { title: t('common.website'), href: '/' },
-  {
-    title: t('center.menu.title'),
-    href: '#',
-  },
+  { label: t('common.website'), icon: 'food:home', to: '/' },
+  { label: t('center.menu.title') },
 ])
 
 const { menus } = await useChannel()

diff --git a/apps/web-app/app/pages/command-center/product/[id]/index.vue b/apps/web-app/app/pages/command-center/product/[id]/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiBreadcrumb :links="breadcrumbs" :is-dark-background="true" />
+  <CatalogBreadcrumb :items="breadcrumbs" />
 
   <div class="mb-6 flex flex-col md:flex-row justify-between md:items-center gap-4">
     <div>
@@ -195,15 +195,12 @@ const product = computed(() => products.value?.find((p) => p.id === params.id))
 const menuPageUrl = `/command-center/menu/${product.value?.category.menuId}`
 
 const breadcrumbs = computed(() => [
-  { title: t('common.website'), href: '/' },
+  { label: t('common.website'), icon: 'food:home', to: '/' },
   {
-    title: t('center.menu.menu-page'),
-    href: menuPageUrl,
-  },
-  {
-    title: t('center.menu.product-page'),
-    href: '#',
+    label: t('center.menu.menu-page'),
+    to: menuPageUrl,
   },
+  { label: t('center.menu.product-page') },
 ])
 
 const productVariantId = ref('')

diff --git a/apps/web-app/app/pages/command-center/sign-in/index.vue b/apps/web-app/app/pages/command-center/sign-in/index.vue
@@ -1,56 +1,48 @@
 <template>
   <div class="w-full h-screen mx-auto grid grid-cols-1 lg:grid-cols-2">
-    <div class="hidden lg:block pattern" />
+    <div class="hidden lg:block bg-contain" style="background-image: url('/img/bg-pattern-1.jpg')" />
 
     <div class="my-4 flex flex-col justify-between items-center">
       <div class="flex-grow flex flex-col justify-center items-center">
-        <UContainer class="w-full max-w-xs">
-          <NuxtImg
-            src="/img/eggs-192.png"
-            alt=""
-            class="mx-auto mb-2 size-20"
-          />
-
+        <UContainer>
           <h1 class="mb-10 text-2xl font-semibold text-center">
             {{ $t('center.welcome-message') }}
           </h1>
 
-          <form onsubmit="sighIn()" class="space-y-4">
-            <div v-if="error" class="text-red-500 text-center">
-              {{ $t('error.invalid-credentials') }}
-            </div>
+          <div class="mx-auto max-w-[260px]">
+            <form class="space-y-4" @submit="signIn()">
+              <div class="w-full flex flex-col gap-3">
+                <UInput
+                  v-model="state.login"
+                  :placeholder="$t('common.login')"
+                  required
+                  size="xl"
+                  class="w-full"
+                />
 
-            <div class="w-full flex flex-col gap-3">
-              <UInput
-                v-model="state.login"
-                :placeholder="$t('common.login')"
-                required
-                size="xl"
-                class="w-full"
-              />
+                <UInput
+                  v-model="state.password"
+                  type="password"
+                  :placeholder="$t('common.password')"
+                  required
+                  size="xl"
+                  class="w-full"
+                />
+              </div>
 
-              <UInput
-                v-model="state.password"
-                type="password"
-                :placeholder="$t('common.password')"
-                required
+              <UButton
+                :disabled="!isFormValid"
+                :loading="status === 'pending'"
+                trailing-icon="food:arrow-right"
+                variant="gradient"
                 size="xl"
-                class="w-full"
-              />
-            </div>
-
-            <UButton
-              :disabled="!isFormValid"
-              :loading="status === 'pending'"
-              trailing-icon="i-lucide-arrow-right"
-              variant="gradient"
-              size="xl"
-              class="w-full justify-between"
-              @click="signIn()"
-            >
-              {{ $t('common.sign-in') }}
-            </UButton>
-          </form>
+                class="w-full justify-between"
+                @click="signIn()"
+              >
+                {{ $t('common.sign-in') }}
+              </UButton>
+            </form>
+          </div>
         </UContainer>
       </div>
 
@@ -69,14 +61,16 @@ if (user.value?.id && user.value?.isStaff) {
   await navigateTo('/command-center')
 }
 
+const toast = useToast()
+
 const state = reactive({
   login: '',
   password: '',
 })
 
 const isFormValid = computed(() => state.login && state.password)
 
-const { error, status, execute: signIn } = await useFetch('/api/auth/sign-in', {
+const { status, execute: signIn } = await useFetch('/api/auth/sign-in', {
   method: 'POST',
   body: state,
   immediate: false,
@@ -87,16 +81,11 @@ const { error, status, execute: signIn } = await useFetch('/api/auth/sign-in', {
       await navigateTo('/command-center')
     }
   },
+  onResponseError: async ({ response }) => {
+    toast.add({
+      title: 'Error',
+      description: response.statusText,
+    })
+  },
 })
 </script>
-
-<style>
-.pattern {
-  --size: 3rem;
-  width: 100%;
-  height: 100%;
-  background-image: radial-gradient(var(--ui-bg-accented) 10%, #0000 4%), radial-gradient(var(--ui-bg-accented) 10%, #0000 4%);
-  background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
-  background-size: var(--size) var(--size);
-}
-</style>