fix. gnb menu 데이터 없는 경우 대응
This commit is contained in:
clkim
@@ -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,89 +268,44 @@ 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
|
<div class="official custom-theme-scrollbar">
|
||||||
v-for="(gnbItem, key) in gnbData?.menus"
|
<div
|
||||||
:key="key"
|
v-for="(gnbItem, key) in gnbData?.menus"
|
||||||
class="nav-item"
|
:key="key"
|
||||||
:class="{
|
class="nav-item"
|
||||||
'is-hidden':
|
:class="{
|
||||||
overflowNam > 0 &&
|
'is-hidden':
|
||||||
Number(key) >=
|
overflowNam > 0 &&
|
||||||
Object.keys(gnbData?.menus).length - overflowNam,
|
Number(key) >=
|
||||||
}"
|
|
||||||
>
|
|
||||||
<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) <
|
|
||||||
Object.keys(gnbData?.menus).length - overflowNam,
|
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
|
<span>{{ gnbItem.menu_name }}</span>
|
||||||
:to="gnbItem.url_path"
|
<AtomsIconsWebLinkLine
|
||||||
:target="gnbItem.link_target"
|
v-if="gnbItem.link_target === '_blank'"
|
||||||
:class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
|
/>
|
||||||
@click="handleMenuClose"
|
<AtomsIconsArrowDownFill
|
||||||
>
|
v-if="has2depthButton(gnbItem)"
|
||||||
<span>{{ gnbItem.menu_name }}</span>
|
class="hidden md:block"
|
||||||
</AtomsLocaleLink>
|
/>
|
||||||
<div v-if="gnbItem.children">
|
<AtomsIconsArrowRightLine
|
||||||
|
v-if="!has2depthButton(gnbItem)"
|
||||||
|
class="ml-auto md:hidden"
|
||||||
|
/>
|
||||||
|
</AtomsLocaleLink>
|
||||||
|
<Transition name="fade">
|
||||||
|
<div v-if="has2depthButton(gnbItem)" class="nav-2depth">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li
|
||||||
v-for="child in gnbItem.children"
|
v-for="child in gnbItem.children"
|
||||||
@@ -356,6 +314,7 @@ onMounted(() => {
|
|||||||
<AtomsLocaleLink
|
<AtomsLocaleLink
|
||||||
:to="child.url_path"
|
:to="child.url_path"
|
||||||
:target="child.link_target"
|
:target="child.link_target"
|
||||||
|
@click="handleMenuClose"
|
||||||
>
|
>
|
||||||
<span>{{ child.menu_name }}</span>
|
<span>{{ child.menu_name }}</span>
|
||||||
<AtomsIconsWebLinkLine
|
<AtomsIconsWebLinkLine
|
||||||
@@ -365,10 +324,56 @@ onMounted(() => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
||||||
</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;
|
||||||
|
|||||||
Reference in New Issue
Block a user