Skip to content

Commit fae7d80

Browse files
hmbanan666hmbanan666
authored
chore: navigation rework (#138)
1 parent 13289eb commit fae7d80

12 files changed

Lines changed: 92 additions & 56 deletions

File tree

‎apps/storefront-telegram/app/components/Navigation.vue‎

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<template>
2-
<div v-if="clientStore.id" class="z-50 touch-pan-x sticky inset-0 h-38">
3-
<div class="w-full h-14 px-4 py-0 flex flex-row gap-2 items-start">
2+
<div v-if="clientStore.id" class="z-50 touch-pan-x sticky inset-0 h-40">
3+
<div class="w-full h-16 px-4 py-0 flex flex-row gap-2 items-start">
44
<CartButton v-if="isCartButtonShown" />
55

66
<UButton
7-
variant="soft"
7+
v-if="isCategoriesButtonShown"
8+
variant="outline"
89
color="neutral"
910
size="xl"
1011
icon="i-lucide-logs"
1112
block
1213
:ui="{
13-
base: 'size-12 aspect-square',
14+
base: 'size-14 aspect-square motion-preset-slide-left motion-duration-500',
1415
}"
1516
/>
1617
</div>
@@ -31,34 +32,12 @@
3132
</template>
3233

3334
<script setup lang="ts">
34-
import type { NavigationRoute } from '#shared/types/index'
35+
const {
36+
isNavigationShown,
37+
isCartButtonShown,
38+
isCategoriesButtonShown,
39+
mainRoutes,
40+
} = useNavigation()
3541
36-
const router = useRouter()
37-
const { t } = useI18n()
38-
const { isNavigationShown } = useCatalog()
3942
const clientStore = useClientStore()
40-
41-
const isCartButtonShown = computed(() => router.currentRoute.value.path === '/')
42-
43-
const mainRoutes = computed<NavigationRoute[]>(() => [
44-
{
45-
path: '/',
46-
name: 'home',
47-
title: t('app.home'),
48-
icon: 'i-lucide-layout-dashboard',
49-
exact: true,
50-
},
51-
{
52-
path: '/client',
53-
name: 'client',
54-
title: 'Кабинет',
55-
icon: 'i-lucide-user',
56-
},
57-
{
58-
path: '/menu',
59-
name: 'menu',
60-
title: 'Меню',
61-
icon: 'i-lucide-menu',
62-
},
63-
])
6443
</script>

‎apps/storefront-telegram/app/components/NavigationButton.vue‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<button
33
class="flex flex-col items-center justify-center gap-1 px-4 cursor-pointer tg-text-subtitle"
4-
@click="canScrollToTop ? handleScrollToTop() : handleRedirect(route.path)"
4+
@click="(isCatalogPage && canScrollToTop && isThisRoute) ? handleScrollToTop() : handleRedirect(route.path)"
55
>
66
<div
77
class="relative py-1 w-full rounded-2xl flex flex-row items-center justify-center"
@@ -10,12 +10,12 @@
1010
]"
1111
>
1212
<UIcon
13-
v-if="canScrollToTop"
13+
v-if="isCatalogPage && canScrollToTop && isThisRoute"
1414
name="i-lucide-arrow-up"
1515
class="size-6 motion-preset-shake"
1616
/>
1717
<UIcon
18-
v-else-if="canReturn"
18+
v-else-if="isClientInnerPage && canReturnToCabinet && isThisRoute"
1919
name="i-lucide-undo-2"
2020
class="size-6 motion-preset-shake"
2121
/>
@@ -42,17 +42,11 @@ import type { NavigationRoute } from '#shared/types/index'
4242
const { route } = defineProps<{ route: NavigationRoute }>()
4343
4444
const { vibrate } = useFeedback()
45+
const { canScrollToTop, isCatalogPage, isClientInnerPage, canReturnToCabinet } = useNavigation()
4546
const router = useRouter()
4647
4748
const isThisRoute = computed(() => route.exact ? router.currentRoute.value.path === route.path : router.currentRoute.value.path.startsWith(route.path))
4849
49-
const { y } = useWindowScroll()
50-
const isCatalogButton = computed(() => route.path === '/' && router.currentRoute.value.path === '/')
51-
const canScrollToTop = computed(() => isCatalogButton.value && y.value > 650)
52-
53-
const isClientButton = computed(() => route.path === '/client' && router.currentRoute.value.path.startsWith('/client'))
54-
const canReturn = computed(() => isClientButton.value && router.currentRoute.value.path !== '/client')
55-
5650
function handleScrollToTop() {
5751
vibrate()
5852
window.scrollTo({ top: 0, behavior: 'smooth' })

‎apps/storefront-telegram/app/components/cart/Button.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
variant="solid"
55
color="secondary"
66
:ui="{
7-
base: 'px-3 py-2 h-12',
7+
base: 'px-4 py-2 h-14',
88
}"
99
>
10-
<div class="w-full flex flex-row items-center justify-between text-base">
10+
<div class="w-full flex flex-row items-center justify-between text-lg">
1111
<div class="flex flex-row gap-2 items-center">
1212
<UIcon name="i-lucide-shopping-basket" class="size-6" />
1313
<p>{{ $t('app.cart.title') }}</p>

‎apps/storefront-telegram/app/components/client/BonusProgramRegistration.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474

7575
<script setup lang="ts">
7676
const { vibrate } = useFeedback()
77-
const { isNavigationShown } = useCatalog()
77+
const { isNavigationShown } = useNavigation()
7878
7979
const isDrawerOpened = ref(false)
8080

‎apps/storefront-telegram/app/components/client/PointsCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
<script setup lang="ts">
122122
const { vibrate } = useFeedback()
123123
const { x, y } = useGyroscope()
124-
const { isNavigationShown } = useCatalog()
124+
const { isNavigationShown } = useNavigation()
125125
126126
const clientStore = useClientStore()
127127

‎apps/storefront-telegram/app/composables/useCatalog.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
function _useCatalog() {
22
const visibleCategory = ref<string | null>(null)
3-
const isNavigationShown = ref(true)
43

54
const observerOptions = { rootMargin: '0px 0px -150px 0px' }
65

@@ -14,7 +13,6 @@ function _useCatalog() {
1413
return {
1514
visibleCategory,
1615
observerOptions,
17-
isNavigationShown,
1816
}
1917
}
2018

‎apps/storefront-telegram/app/composables/useNavigation.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
function _useNavigation() {
2+
const router = useRouter()
3+
const { t } = useI18n()
4+
const { y } = useWindowScroll()
5+
6+
const mainRoutes = computed<NavigationRoute[]>(() => [
7+
{
8+
path: '/',
9+
name: 'home',
10+
title: t('app.home'),
11+
icon: 'i-lucide-layout-dashboard',
12+
exact: true,
13+
},
14+
{
15+
path: '/client',
16+
name: 'client',
17+
title: t('app.cabinet'),
18+
icon: 'i-lucide-user',
19+
},
20+
{
21+
path: '/menu',
22+
name: 'menu',
23+
title: t('app.menu'),
24+
icon: 'i-lucide-menu',
25+
},
26+
])
27+
28+
const isNavigationShown = ref(true)
29+
30+
const isCatalogPage = computed(() => router.currentRoute.value.path === '/')
31+
const canScrollToTop = computed(() => y.value > 650)
32+
33+
const isClientInnerPage = computed(() => router.currentRoute.value.path.startsWith('/client'))
34+
const canReturnToCabinet = computed(() => isClientInnerPage.value && router.currentRoute.value.path !== '/client')
35+
36+
const isCartButtonShown = computed(() => isCatalogPage.value)
37+
const isCategoriesButtonShown = computed(() => isCatalogPage.value && canScrollToTop.value)
38+
39+
return {
40+
isNavigationShown,
41+
42+
isCartButtonShown,
43+
isCategoriesButtonShown,
44+
45+
isClientInnerPage,
46+
canReturnToCabinet,
47+
48+
isCatalogPage,
49+
canScrollToTop,
50+
51+
mainRoutes,
52+
}
53+
}
54+
55+
export const useNavigation = createSharedComposable(_useNavigation)

‎apps/storefront-telegram/app/pages/client/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<PageContainer>
33
<div class="flex flex-col gap-2">
4-
<h1 class="text-2xl/5 font-bold tracking-tight">
4+
<h1 class="text-2xl/6 font-bold tracking-tight">
55
{{ clientStore.fullName }}
66
</h1>
77
<p class="text-muted text-base/5 font-medium">

‎apps/storefront-telegram/app/pages/index.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<PageContainer :back="false">
33
<div class="flex flex-row gap-3.5 items-center">
44
<div class="flex flex-col gap-1">
5-
<p>{{ channelStore.name }}</p>
5+
<h1 class="text-2xl/6 font-bold tracking-tight">
6+
Суши Love
7+
</h1>
68
</div>
79
</div>
810

@@ -19,7 +21,6 @@
1921
</template>
2022

2123
<script setup lang="ts">
22-
const channelStore = useChannelStore()
2324
const menuStore = useMenuStore()
2425
2526
useHead({

‎apps/storefront-telegram/app/pages/menu.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
<UButton
55
v-for="item in items"
66
:key="item.label"
7-
active
87
size="xl"
98
color="neutral"
109
variant="ghost"
11-
class="px-0 pt-0 text-xl/5 font-semibold"
1210
:label="item.label"
1311
:to="item.to"
12+
:ui="{
13+
base: 'px-0 pt-0 text-2xl/6 font-semibold',
14+
}"
1415
@click="item.onClick"
1516
/>
1617
</div>
@@ -26,19 +27,19 @@
2627

2728
<div class="flex flex-col gap-1">
2829
<UButton
29-
:to="formattedToCall"
30-
external
3130
variant="ghost"
3231
color="primary"
3332
class="p-0 text-lg font-medium"
3433
:label="formatted"
34+
@click="handleCall"
3535
/>
3636
</div>
3737

3838
<div class="flex flex-row gap-2">
3939
<UButton
4040
variant="ghost"
4141
to="https://vk.com/sushiloveru"
42+
target="_blank"
4243
color="neutral"
4344
size="xl"
4445
icon="simple-icons:vk"
@@ -61,6 +62,12 @@ const tel = '79959999999'
6162
const formatted = parsePhoneNumberWithError(tel, 'RU').format('INTERNATIONAL')
6263
const formattedToCall = `tel:+${tel}`
6364
65+
function handleCall() {
66+
vibrate()
67+
// Call phone number on click
68+
window.location.href = formattedToCall
69+
}
70+
6471
const items = ref([
6572
{
6673
label: 'Акции',

0 commit comments

Comments
 (0)