gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. gnb menu 데이터 없는 경우 대응

Browse Source
This commit is contained in:
clkim
2025-12-03 16:43:44 +09:00
parent d8a4cfce26
commit f5fe7e992d
1 changed files with 92 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
layers/components/layouts/Header.vue
View File

@@ -41,6 +41,9 @@ const officialItemWidths = ref<number[]>([])
const overflowNam = ref<number>(0) const overflowNam = ref<number>(0)
const gnbData = computed(() => gameData.value?.gnb) const gnbData = computed(() => gameData.value?.gnb)
const hasGnbMenus = computed(
() => gnbData.value?.menus && Object.keys(gnbData.value?.menus).length > 0
)
const gnb1depthButtonData = computed( const gnb1depthButtonData = computed(
() => gnbData.value?.buttons[0]?.button_json as GameDataResourceGroup () => gnbData.value?.buttons[0]?.button_json as GameDataResourceGroup
) )
@@ -265,7 +268,8 @@ onMounted(() => {
</AtomsLocaleLink> </AtomsLocaleLink>
</div> </div>
<nav :class="['nav-list', { 'is-mounted': isMounted }]"> <nav :class="['nav-list', { 'is-mounted': isMounted }]">
<div v-if="gnbData?.menus" class="official custom-theme-scrollbar"> <template v-if="hasGnbMenus">
<div class="official custom-theme-scrollbar">
<div <div
v-for="(gnbItem, key) in gnbData?.menus" v-for="(gnbItem, key) in gnbData?.menus"
:key="key" :key="key"
@@ -323,7 +327,7 @@ onMounted(() => {
</Transition> </Transition>
</div> </div>
</div> </div>
<div v-if="gnbData?.menus && overflowNam > 0" class="more"> <div v-if="overflowNam > 0" class="more">
<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>
@@ -369,6 +373,7 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
</template>
<div v-if="gameData?.event_banner" class="event"> <div v-if="gameData?.event_banner" class="event">
<div class="nav-item"> <div class="nav-item">
<AtomsLocaleLink <AtomsLocaleLink
@@ -569,11 +574,14 @@ onMounted(() => {
@apply px-6; @apply px-6;
} }
.event { .official ~ .event {
@apply relative pr-1 md:ml-[64px] md:pr-0 @apply md:ml-[64px]
before:content-[''] before:block before:h-px before:mb-2 before:mx-3 before:bg-theme-foreground-reversal-8 md:before:hidden before:content-[''] before:block before:h-px before:mb-2 before:mx-3 before:bg-theme-foreground-reversal-8 md:before:hidden
after:content-[''] after:absolute md:after:top-[50%] md:after:left-[-32px] md:after:w-[1px] md:after:h-[16px] md:after:bg-theme-foreground-gray-750 md:after:translate-y-[-50%]; after:content-[''] after:absolute md:after:top-[50%] md:after:left-[-32px] md:after:w-[1px] md:after:h-[16px] md:after:bg-theme-foreground-gray-750 md:after:translate-y-[-50%];
} }
.event {
@apply relative pr-1 md:pr-0;
}
.is-hidden { .is-hidden {
@apply hidden; @apply hidden;