fix. gnb 수정
This commit is contained in:
@@ -85,7 +85,7 @@ const setupAllMetaData = (data: GameDataValue) => {
|
|||||||
htmlAttrs: {
|
htmlAttrs: {
|
||||||
'data-game': data.game_name || '',
|
'data-game': data.game_name || '',
|
||||||
'data-theme': theme,
|
'data-theme': theme,
|
||||||
lang: locale.value,
|
lang: locale.value ?? data.default_lang_code,
|
||||||
},
|
},
|
||||||
link: faviconLinks,
|
link: faviconLinks,
|
||||||
style: [
|
style: [
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ const PLATFORM_LABEL_KEY: Record<PlatformTransformType, string> = {
|
|||||||
pc: 'PC',
|
pc: 'PC',
|
||||||
google_play: 'Google Play',
|
google_play: 'Google Play',
|
||||||
app_store: 'App Store',
|
app_store: 'App Store',
|
||||||
}
|
} as const
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const { tm } = useI18n()
|
const { tm } = useI18n()
|
||||||
@@ -40,7 +40,7 @@ const isMounted = ref(false)
|
|||||||
const isMenuOpen = ref(false)
|
const isMenuOpen = ref(false)
|
||||||
const navWidth = ref(0)
|
const navWidth = ref(0)
|
||||||
const officialItemWidths = ref<number[]>([])
|
const officialItemWidths = ref<number[]>([])
|
||||||
const overflowNam = ref<number>(0)
|
const overflowCount = ref<number>(0)
|
||||||
|
|
||||||
const gnbData = computed(() => gameData.value?.gnb)
|
const gnbData = computed(() => gameData.value?.gnb)
|
||||||
const hasGnbMenus = computed(() => {
|
const hasGnbMenus = computed(() => {
|
||||||
@@ -107,7 +107,7 @@ const calculateOverflow = () => {
|
|||||||
if (!navAreaRef.value || !startRef.value) return
|
if (!navAreaRef.value || !startRef.value) return
|
||||||
|
|
||||||
if (breakpoints.value.isMobile) {
|
if (breakpoints.value.isMobile) {
|
||||||
overflowNam.value = 0
|
overflowCount.value = 0
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -128,16 +128,14 @@ const calculateOverflow = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
overflowNam.value = removedCount
|
overflowCount.value = removedCount
|
||||||
} else {
|
} else {
|
||||||
overflowNam.value = 0
|
overflowCount.value = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 100ms마다 최대 1회 실행
|
// 100ms마다 최대 1회 실행
|
||||||
const throttledCalculateOverflow = useThrottleFn(() => {
|
const throttledCalculateOverflow = useThrottleFn(calculateOverflow, 100)
|
||||||
calculateOverflow()
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
const handleMenuOpen = () => {
|
const handleMenuOpen = () => {
|
||||||
isMenuOpen.value = true
|
isMenuOpen.value = true
|
||||||
@@ -195,7 +193,8 @@ const handleStartClick = () => {
|
|||||||
: null
|
: null
|
||||||
|
|
||||||
if (!target || !supportedPlatforms.value.includes(target)) {
|
if (!target || !supportedPlatforms.value.includes(target)) {
|
||||||
return showNotSupportedOSAlert()
|
showNotSupportedOSAlert()
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = gameData.value?.market_json?.[target]?.url || ''
|
const url = gameData.value?.market_json?.[target]?.url || ''
|
||||||
@@ -205,7 +204,7 @@ const handleStartClick = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
overflowNam.value = 0
|
overflowCount.value = 0
|
||||||
isMounted.value = true
|
isMounted.value = true
|
||||||
|
|
||||||
// 초기 계산
|
// 초기 계산
|
||||||
@@ -269,9 +268,9 @@ onMounted(() => {
|
|||||||
:class="{
|
:class="{
|
||||||
'is-hidden':
|
'is-hidden':
|
||||||
breakpoints.isDesktop &&
|
breakpoints.isDesktop &&
|
||||||
overflowNam > 0 &&
|
overflowCount > 0 &&
|
||||||
Number(key) >=
|
Number(key) >=
|
||||||
Object.keys(gnbData?.menus).length - overflowNam,
|
Object.keys(gnbData?.menus).length - overflowCount,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
@@ -326,7 +325,7 @@ onMounted(() => {
|
|||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="overflowNam > 0" class="more group">
|
<div v-if="overflowCount > 0" class="more group">
|
||||||
<button class="btn-more">
|
<button class="btn-more">
|
||||||
<AtomsIconsOptionHorizontalFill class="mx-auto" />
|
<AtomsIconsOptionHorizontalFill class="mx-auto" />
|
||||||
<span class="sr-only">more</span>
|
<span class="sr-only">more</span>
|
||||||
@@ -337,9 +336,11 @@ onMounted(() => {
|
|||||||
v-for="(gnbItem, key) in gnbData?.menus"
|
v-for="(gnbItem, key) in gnbData?.menus"
|
||||||
:key="key"
|
:key="key"
|
||||||
:class="{
|
:class="{
|
||||||
hidden:
|
'is-hidden':
|
||||||
Number(key) <
|
breakpoints.isDesktop &&
|
||||||
Object.keys(gnbData?.menus).length - overflowNam,
|
overflowCount > 0 &&
|
||||||
|
Number(key) >=
|
||||||
|
Object.keys(gnbData?.menus).length - overflowCount,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
|
|||||||
Reference in New Issue
Block a user