Skip to content

chore: navigation rework #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hmbanan666 merged 1 commit into from
Sep 8, 2025
Merged

chore: navigation rework #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 11 additions & 32 deletions apps/storefront-telegram/app/components/Navigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<template>
<div v-if="clientStore.id" class="z-50 touch-pan-x sticky inset-0 h-38">
<div class="w-full h-14 px-4 py-0 flex flex-row gap-2 items-start">
<div v-if="clientStore.id" class="z-50 touch-pan-x sticky inset-0 h-40">
<div class="w-full h-16 px-4 py-0 flex flex-row gap-2 items-start">
<CartButton v-if="isCartButtonShown" />

<UButton
variant="soft"
v-if="isCategoriesButtonShown"
variant="outline"
color="neutral"
size="xl"
icon="i-lucide-logs"
block
:ui="{
base: 'size-12 aspect-square',
base: 'size-14 aspect-square motion-preset-slide-left motion-duration-500',
}"
/>
</div>
Expand All @@ -31,34 +32,12 @@
</template>

<script setup lang="ts">
import type { NavigationRoute } from '#shared/types/index'
const {
isNavigationShown,
isCartButtonShown,
isCategoriesButtonShown,
mainRoutes,
} = useNavigation()

const router = useRouter()
const { t } = useI18n()
const { isNavigationShown } = useCatalog()
const clientStore = useClientStore()

const isCartButtonShown = computed(() => router.currentRoute.value.path === '/')

const mainRoutes = computed<NavigationRoute[]>(() => [
{
path: '/',
name: 'home',
title: t('app.home'),
icon: 'i-lucide-layout-dashboard',
exact: true,
},
{
path: '/client',
name: 'client',
title: 'Кабинет',
icon: 'i-lucide-user',
},
{
path: '/menu',
name: 'menu',
title: 'Меню',
icon: 'i-lucide-menu',
},
])
</script>
14 changes: 4 additions & 10 deletions apps/storefront-telegram/app/components/NavigationButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<button
class="flex flex-col items-center justify-center gap-1 px-4 cursor-pointer tg-text-subtitle"
@click="canScrollToTop ? handleScrollToTop() : handleRedirect(route.path)"
@click="(isCatalogPage && canScrollToTop && isThisRoute) ? handleScrollToTop() : handleRedirect(route.path)"
>
<div
class="relative py-1 w-full rounded-2xl flex flex-row items-center justify-center"
Expand All @@ -10,12 +10,12 @@
]"
>
<UIcon
v-if="canScrollToTop"
v-if="isCatalogPage && canScrollToTop && isThisRoute"
name="i-lucide-arrow-up"
class="size-6 motion-preset-shake"
/>
<UIcon
v-else-if="canReturn"
v-else-if="isClientInnerPage && canReturnToCabinet && isThisRoute"
name="i-lucide-undo-2"
class="size-6 motion-preset-shake"
/>
Expand All @@ -42,17 +42,11 @@ import type { NavigationRoute } from '#shared/types/index'
const { route } = defineProps<{ route: NavigationRoute }>()

const { vibrate } = useFeedback()
const { canScrollToTop, isCatalogPage, isClientInnerPage, canReturnToCabinet } = useNavigation()
const router = useRouter()

const isThisRoute = computed(() => route.exact ? router.currentRoute.value.path === route.path : router.currentRoute.value.path.startsWith(route.path))

const { y } = useWindowScroll()
const isCatalogButton = computed(() => route.path === '/' && router.currentRoute.value.path === '/')
const canScrollToTop = computed(() => isCatalogButton.value && y.value > 650)

const isClientButton = computed(() => route.path === '/client' && router.currentRoute.value.path.startsWith('/client'))
const canReturn = computed(() => isClientButton.value && router.currentRoute.value.path !== '/client')

function handleScrollToTop() {
vibrate()
window.scrollTo({ top: 0, behavior: 'smooth' })
Expand Down
4 changes: 2 additions & 2 deletions apps/storefront-telegram/app/components/cart/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
variant="solid"
color="secondary"
:ui="{
base: 'px-3 py-2 h-12',
base: 'px-4 py-2 h-14',
}"
>
<div class="w-full flex flex-row items-center justify-between text-base">
<div class="w-full flex flex-row items-center justify-between text-lg">
<div class="flex flex-row gap-2 items-center">
<UIcon name="i-lucide-shopping-basket" class="size-6" />
<p>{{ $t('app.cart.title') }}</p>
Expand Down
2 changes: 1 addition & 1 deletion apps/storefront-telegram/app/components/client/BonusProgramRegistration.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@

<script setup lang="ts">
const { vibrate } = useFeedback()
const { isNavigationShown } = useCatalog()
const { isNavigationShown } = useNavigation()

const isDrawerOpened = ref(false)

Expand Down
2 changes: 1 addition & 1 deletion apps/storefront-telegram/app/components/client/PointsCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
<script setup lang="ts">
const { vibrate } = useFeedback()
const { x, y } = useGyroscope()
const { isNavigationShown } = useCatalog()
const { isNavigationShown } = useNavigation()

const clientStore = useClientStore()

Expand Down
2 changes: 0 additions & 2 deletions apps/storefront-telegram/app/composables/useCatalog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
function _useCatalog() {
const visibleCategory = ref<string | null>(null)
const isNavigationShown = ref(true)

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

Expand All @@ -14,7 +13,6 @@ function _useCatalog() {
return {
visibleCategory,
observerOptions,
isNavigationShown,
}
}

Expand Down
55 changes: 55 additions & 0 deletions apps/storefront-telegram/app/composables/useNavigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
function _useNavigation() {
const router = useRouter()
const { t } = useI18n()
const { y } = useWindowScroll()

const mainRoutes = computed<NavigationRoute[]>(() => [
{
path: '/',
name: 'home',
title: t('app.home'),
icon: 'i-lucide-layout-dashboard',
exact: true,
},
{
path: '/client',
name: 'client',
title: t('app.cabinet'),
icon: 'i-lucide-user',
},
{
path: '/menu',
name: 'menu',
title: t('app.menu'),
icon: 'i-lucide-menu',
},
])

const isNavigationShown = ref(true)

const isCatalogPage = computed(() => router.currentRoute.value.path === '/')
const canScrollToTop = computed(() => y.value > 650)

const isClientInnerPage = computed(() => router.currentRoute.value.path.startsWith('/client'))
const canReturnToCabinet = computed(() => isClientInnerPage.value && router.currentRoute.value.path !== '/client')

const isCartButtonShown = computed(() => isCatalogPage.value)
const isCategoriesButtonShown = computed(() => isCatalogPage.value && canScrollToTop.value)

return {
isNavigationShown,

isCartButtonShown,
isCategoriesButtonShown,

isClientInnerPage,
canReturnToCabinet,

isCatalogPage,
canScrollToTop,

mainRoutes,
}
}

export const useNavigation = createSharedComposable(_useNavigation)
2 changes: 1 addition & 1 deletion apps/storefront-telegram/app/pages/client/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<PageContainer>
<div class="flex flex-col gap-2">
<h1 class="text-2xl/5 font-bold tracking-tight">
<h1 class="text-2xl/6 font-bold tracking-tight">
{{ clientStore.fullName }}
</h1>
<p class="text-muted text-base/5 font-medium">
Expand Down
5 changes: 3 additions & 2 deletions apps/storefront-telegram/app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<PageContainer :back="false">
<div class="flex flex-row gap-3.5 items-center">
<div class="flex flex-col gap-1">
<p>{{ channelStore.name }}</p>
<h1 class="text-2xl/6 font-bold tracking-tight">
Суши Love
</h1>
</div>
</div>

Expand All @@ -19,7 +21,6 @@
</template>

<script setup lang="ts">
const channelStore = useChannelStore()
const menuStore = useMenuStore()

useHead({
Expand Down
15 changes: 11 additions & 4 deletions apps/storefront-telegram/app/pages/menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
<UButton
v-for="item in items"
:key="item.label"
active
size="xl"
color="neutral"
variant="ghost"
class="px-0 pt-0 text-xl/5 font-semibold"
:label="item.label"
:to="item.to"
:ui="{
base: 'px-0 pt-0 text-2xl/6 font-semibold',
}"
@click="item.onClick"
/>
</div>
Expand All @@ -26,19 +27,19 @@

<div class="flex flex-col gap-1">
<UButton
:to="formattedToCall"
external
variant="ghost"
color="primary"
class="p-0 text-lg font-medium"
:label="formatted"
@click="handleCall"
/>
</div>

<div class="flex flex-row gap-2">
<UButton
variant="ghost"
to="https://vk.com/sushiloveru"
target="_blank"
color="neutral"
Comment on lines +42 to 43
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Sep 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add rel to external link opened in new tab

Prevent reverse tabnabbing.

-        target="_blank"
+        target="_blank"
+        rel="noopener noreferrer"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
target="_blank"
color="neutral"
target="_blank"
rel="noopener noreferrer"
color="neutral"
🤖 Prompt for AI Agents 
In apps/storefront-telegram/app/pages/menu.vue around lines 42-43, the external
link uses target="_blank" but lacks a rel attribute which risks reverse
tabnabbing; add rel="noopener noreferrer" to the anchor element (or component
prop) that has target="_blank" so the link opens in a new tab safely, ensuring
both noopener and noreferrer are included.

size="xl"
icon="simple-icons:vk"
Expand All @@ -61,6 +62,12 @@ const tel = '79959999999'
const formatted = parsePhoneNumberWithError(tel, 'RU').format('INTERNATIONAL')
const formattedToCall = `tel:+${tel}`

function handleCall() {
vibrate()
// Call phone number on click
window.location.href = formattedToCall
}

const items = ref([
{
label: 'Акции',
Expand Down
2 changes: 1 addition & 1 deletion apps/storefront-telegram/app/pages/no-auth.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<PageContainer :back="false">
<h1 class="text-2xl">
<h1 class="text-2xl/6 font-bold tracking-tight">
Нет доступа!
</h1>
<p>Напишите в поддержку.</p>
Expand Down
2 changes: 2 additions & 0 deletions apps/storefront-telegram/i18n/locales/ru-RU.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
},
"app": {
"home": "Каталог",
"cabinet": "Кабинет",
"menu": "Меню",
"cart": {
"title": "Корзина",
"add": "Добавить",
Expand Down