fix. gnb깨지는 현상 수정
This commit is contained in:
clkim
@@ -254,43 +254,85 @@ onMounted(() => {
|
|||||||
class="h-[30px]"
|
class="h-[30px]"
|
||||||
/>
|
/>
|
||||||
</AtomsLocaleLink>
|
</AtomsLocaleLink>
|
||||||
<nav :class="['nav-list', { 'is-mounted': isMounted }]">
|
</div>
|
||||||
|
<nav :class="['nav-list', { 'is-mounted': isMounted }]">
|
||||||
|
<div v-if="gnbData?.menus" class="official custom-theme-scrollbar">
|
||||||
<div
|
<div
|
||||||
v-if="gnbData?.menus"
|
v-for="(gnbItem, key) in gnbData?.menus"
|
||||||
class="official custom-theme-scrollbar"
|
:key="key"
|
||||||
|
class="nav-item"
|
||||||
|
:class="{
|
||||||
|
'is-hidden':
|
||||||
|
overflowNam > 0 &&
|
||||||
|
Number(key) >=
|
||||||
|
Object.keys(gnbData?.menus).length - overflowNam,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<AtomsLocaleLink
|
||||||
v-for="(gnbItem, key) in gnbData?.menus"
|
:to="isNotClickable(gnbItem) ? '#' : gnbItem.url_path"
|
||||||
:key="key"
|
:target="gnbItem.link_target"
|
||||||
class="nav-item"
|
:class="[
|
||||||
:class="{
|
'nav-1depth',
|
||||||
'is-hidden':
|
{ 'has-link': !isNotClickable(gnbItem) },
|
||||||
overflowNam > 0 &&
|
{ active: isNavItemActive(gnbItem) },
|
||||||
Number(key) >=
|
]"
|
||||||
Object.keys(gnbData?.menus).length - overflowNam,
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<AtomsLocaleLink
|
<span>{{ gnbItem.menu_name }}</span>
|
||||||
:to="isNotClickable(gnbItem) ? '#' : gnbItem.url_path"
|
<AtomsIconsArrowDownFill
|
||||||
:target="gnbItem.link_target"
|
v-if="has2depthButton(gnbItem)"
|
||||||
:class="[
|
class="hidden md:block"
|
||||||
'nav-1depth',
|
/>
|
||||||
{ 'has-link': !isNotClickable(gnbItem) },
|
<AtomsIconsArrowRightLine
|
||||||
{ active: isNavItemActive(gnbItem) },
|
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"
|
||||||
|
>
|
||||||
|
<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,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<span>{{ gnbItem.menu_name }}</span>
|
<AtomsLocaleLink
|
||||||
<AtomsIconsArrowDownFill
|
:to="gnbItem.url_path"
|
||||||
v-if="has2depthButton(gnbItem)"
|
:target="gnbItem.link_target"
|
||||||
class="hidden md:block"
|
:class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
|
||||||
/>
|
>
|
||||||
<AtomsIconsArrowRightLine
|
<span>{{ gnbItem.menu_name }}</span>
|
||||||
v-if="!has2depthButton(gnbItem)"
|
</AtomsLocaleLink>
|
||||||
class="ml-auto md:hidden"
|
<div v-if="gnbItem.children">
|
||||||
/>
|
|
||||||
</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"
|
||||||
@@ -308,117 +350,70 @@ onMounted(() => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<AtomsLocaleLink
|
|
||||||
:to="gnbItem.url_path"
|
|
||||||
:target="gnbItem.link_target"
|
|
||||||
:class="`${isNavItemActive(gnbItem) ? 'active' : ''}`"
|
|
||||||
>
|
|
||||||
<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 v-if="gameData?.event_banner" class="event">
|
</div>
|
||||||
<div class="nav-item">
|
<div v-if="gameData?.event_banner" class="event">
|
||||||
<AtomsLocaleLink
|
<div class="nav-item">
|
||||||
:to="gameData.event_banner?.page_url"
|
<AtomsLocaleLink
|
||||||
:target="
|
:to="gameData.event_banner?.page_url"
|
||||||
gameData.event_banner?.link_type === 1
|
:target="
|
||||||
? '_self'
|
gameData.event_banner?.link_type === 1 ? '_self' : '_blank'
|
||||||
: '_blank'
|
"
|
||||||
"
|
class="nav-1depth text-gradient-pink"
|
||||||
class="nav-1depth text-gradient-pink"
|
>
|
||||||
>
|
<AtomsIconsStarFill />
|
||||||
<AtomsIconsStarFill />
|
<span>{{ tm('Gnb_Event') }}</span>
|
||||||
<span>{{ tm('Gnb_Event') }}</span>
|
<AtomsIconsStarFill />
|
||||||
<AtomsIconsStarFill />
|
</AtomsLocaleLink>
|
||||||
</AtomsLocaleLink>
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<ClientOnly>
|
||||||
|
<div ref="startRef" class="btn-start">
|
||||||
|
<template v-if="gnb1depthButtonData">
|
||||||
|
<component
|
||||||
|
:is="
|
||||||
|
breakpoints.isDesktop
|
||||||
|
? 'BlocksButtonLauncher'
|
||||||
|
: 'AtomsButton'
|
||||||
|
"
|
||||||
|
type="custom"
|
||||||
|
platform="pc"
|
||||||
|
:background-color="
|
||||||
|
getColorCodeFromData(gnb1depthButtonData?.btn_info, 'btn')
|
||||||
|
"
|
||||||
|
:text-color="
|
||||||
|
getColorCodeFromData(gnb1depthButtonData?.btn_info, 'txt')
|
||||||
|
"
|
||||||
|
@click="handleStartClick"
|
||||||
|
>
|
||||||
|
{{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
|
||||||
|
</component>
|
||||||
|
<div
|
||||||
|
v-if="breakpoints.isDesktop && gnb2depthButtonData"
|
||||||
|
class="nav-2depth"
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item, key) in gnb2depthButtonData" :key="key">
|
||||||
|
<BlocksButtonLauncher type="custom" :platform="key">
|
||||||
|
{{ item.btn_info?.txt_btn_name }}
|
||||||
|
</BlocksButtonLauncher>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</nav>
|
</div>
|
||||||
<ClientOnly>
|
</ClientOnly>
|
||||||
<div ref="startRef" class="btn-start">
|
<button class="btn-close" @click="handleMenuClose">
|
||||||
<template v-if="gnb1depthButtonData">
|
<AtomsIconsCloseLine
|
||||||
<component
|
size="24"
|
||||||
:is="
|
color="var(--foreground-reversal)"
|
||||||
breakpoints.isDesktop
|
class="mx-auto"
|
||||||
? 'BlocksButtonLauncher'
|
/>
|
||||||
: 'AtomsButton'
|
<span class="sr-only">menu close</span>
|
||||||
"
|
</button>
|
||||||
type="custom"
|
|
||||||
platform="pc"
|
|
||||||
:background-color="
|
|
||||||
getColorCodeFromData(gnb1depthButtonData?.btn_info, 'btn')
|
|
||||||
"
|
|
||||||
:text-color="
|
|
||||||
getColorCodeFromData(gnb1depthButtonData?.btn_info, 'txt')
|
|
||||||
"
|
|
||||||
@click="handleStartClick"
|
|
||||||
>
|
|
||||||
{{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
|
|
||||||
</component>
|
|
||||||
<div
|
|
||||||
v-if="breakpoints.isDesktop && gnb2depthButtonData"
|
|
||||||
class="nav-2depth"
|
|
||||||
>
|
|
||||||
<ul>
|
|
||||||
<li v-for="(item, key) in gnb2depthButtonData" :key="key">
|
|
||||||
<BlocksButtonLauncher type="custom" :platform="key">
|
|
||||||
{{ item.btn_info?.txt_btn_name }}
|
|
||||||
</BlocksButtonLauncher>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</ClientOnly>
|
|
||||||
<button class="btn-close" @click="handleMenuClose">
|
|
||||||
<AtomsIconsCloseLine
|
|
||||||
size="24"
|
|
||||||
color="var(--foreground-reversal)"
|
|
||||||
class="mx-auto"
|
|
||||||
/>
|
|
||||||
<span class="sr-only">menu close</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user