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

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

@@ -41,6 +41,9 @@ const officialItemWidths = ref<number[]>([])
const overflowNam = ref<number>(0)
const gnbData = computed(() => gameData.value?.gnb)
const hasGnbMenus = computed(
() => gnbData.value?.menus && Object.keys(gnbData.value?.menus).length > 0
)
const gnb1depthButtonData = computed(
() => gnbData.value?.buttons[0]?.button_json as GameDataResourceGroup
)
@@ -265,89 +268,44 @@ onMounted(() => {
</AtomsLocaleLink>
</div>
<nav :class="['nav-list', { 'is-mounted': isMounted }]">
<div v-if="gnbData?.menus" class="official custom-theme-scrollbar">
<div
v-for="(gnbItem, key) in gnbData?.menus"
:key="key"
class="nav-item"
:class="{
'is-hidden':
overflowNam > 0 &&
Number(key) >=
Object.keys(gnbData?.menus).length - overflowNam,
}"
>
<AtomsLocaleLink
:to="isNotClickable(gnbItem) ? '#' : gnbItem.url_path"
:target="gnbItem.link_target"
:class="[
'nav-1depth',
{ 'has-link': !isNotClickable(gnbItem) },
{ active: isNavItemActive(gnbItem) },
]"
@click="handleMenuClose"
>
<span>{{ gnbItem.menu_name }}</span>
<AtomsIconsWebLinkLine
v-if="gnbItem.link_target === '_blank'"
/>
<AtomsIconsArrowDownFill
v-if="has2depthButton(gnbItem)"
class="hidden md:block"
/>
<AtomsIconsArrowRightLine
v-if="!has2depthButton(gnbItem)"
class="ml-auto md:hidden"
/>
</AtomsLocaleLink>
<Transition name="fade">
<div v-if="has2depthButton(gnbItem)" class="nav-2depth">
<ul>
<li
v-for="child in gnbItem.children"
:key="child.menu_name"
>
<AtomsLocaleLink
:to="child.url_path"
:target="child.link_target"
@click="handleMenuClose"
>
<span>{{ child.menu_name }}</span>
<AtomsIconsWebLinkLine
v-if="child.link_target === '_blank'"
/>
</AtomsLocaleLink>
</li>
</ul>
</div>
</Transition>
</div>
</div>
<div v-if="gnbData?.menus && overflowNam > 0" class="more">
<button class="btn-more">
<AtomsIconsOptionHorizontalFill class="mx-auto" />
<span class="sr-only">more</span>
</button>
<div class="more-list">
<div class="list-inner">
<div
v-for="(gnbItem, key) in gnbData?.menus"
:key="key"
:class="{
hidden:
Number(key) <
<template v-if="hasGnbMenus">
<div class="official custom-theme-scrollbar">
<div
v-for="(gnbItem, key) in gnbData?.menus"
:key="key"
class="nav-item"
:class="{
'is-hidden':
overflowNam > 0 &&
Number(key) >=
Object.keys(gnbData?.menus).length - overflowNam,
}"
}"
>
<AtomsLocaleLink
:to="isNotClickable(gnbItem) ? '#' : gnbItem.url_path"
:target="gnbItem.link_target"
:class="[
'nav-1depth',
{ 'has-link': !isNotClickable(gnbItem) },
{ active: isNavItemActive(gnbItem) },
]"
@click="handleMenuClose"
>
<AtomsLocaleLink
:to="gnbItem.url_path"
:target="gnbItem.link_target"
:class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
@click="handleMenuClose"
>
<span>{{ gnbItem.menu_name }}</span>
</AtomsLocaleLink>
<div v-if="gnbItem.children">
<span>{{ gnbItem.menu_name }}</span>
<AtomsIconsWebLinkLine
v-if="gnbItem.link_target === '_blank'"
/>
<AtomsIconsArrowDownFill
v-if="has2depthButton(gnbItem)"
class="hidden md:block"
/>
<AtomsIconsArrowRightLine
v-if="!has2depthButton(gnbItem)"
class="ml-auto md:hidden"
/>
</AtomsLocaleLink>
<Transition name="fade">
<div v-if="has2depthButton(gnbItem)" class="nav-2depth">
<ul>
<li
v-for="child in gnbItem.children"
@@ -356,6 +314,7 @@ onMounted(() => {
<AtomsLocaleLink
:to="child.url_path"
:target="child.link_target"
@click="handleMenuClose"
>
<span>{{ child.menu_name }}</span>
<AtomsIconsWebLinkLine
@@ -365,10 +324,56 @@ onMounted(() => {
</li>
</ul>
</div>
</Transition>
</div>
</div>
<div v-if="overflowNam > 0" class="more">
<button class="btn-more">
<AtomsIconsOptionHorizontalFill class="mx-auto" />
<span class="sr-only">more</span>
</button>
<div class="more-list">
<div class="list-inner">
<div
v-for="(gnbItem, key) in gnbData?.menus"
:key="key"
:class="{
hidden:
Number(key) <
Object.keys(gnbData?.menus).length - overflowNam,
}"
>
<AtomsLocaleLink
:to="gnbItem.url_path"
:target="gnbItem.link_target"
:class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
@click="handleMenuClose"
>
<span>{{ gnbItem.menu_name }}</span>
</AtomsLocaleLink>
<div v-if="gnbItem.children">
<ul>
<li
v-for="child in gnbItem.children"
:key="child.menu_name"
>
<AtomsLocaleLink
:to="child.url_path"
:target="child.link_target"
>
<span>{{ child.menu_name }}</span>
<AtomsIconsWebLinkLine
v-if="child.link_target === '_blank'"
/>
</AtomsLocaleLink>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<div v-if="gameData?.event_banner" class="event">
<div class="nav-item">
<AtomsLocaleLink
@@ -569,11 +574,14 @@ onMounted(() => {
@apply px-6;
}
.event {
@apply relative pr-1 md:ml-[64px] md:pr-0
.official ~ .event {
@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
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 {
@apply hidden;