fix. gnb깨지는 현상 수정
This commit is contained in:
clkim
@@ -254,43 +254,85 @@ onMounted(() => {
|
||||
class="h-[30px]"
|
||||
/>
|
||||
</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
|
||||
v-if="gnbData?.menus"
|
||||
class="official custom-theme-scrollbar"
|
||||
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,
|
||||
}"
|
||||
>
|
||||
<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) },
|
||||
]"
|
||||
>
|
||||
<AtomsLocaleLink
|
||||
:to="isNotClickable(gnbItem) ? '#' : gnbItem.url_path"
|
||||
:target="gnbItem.link_target"
|
||||
:class="[
|
||||
'nav-1depth',
|
||||
{ 'has-link': !isNotClickable(gnbItem) },
|
||||
{ active: isNavItemActive(gnbItem) },
|
||||
]"
|
||||
<span>{{ gnbItem.menu_name }}</span>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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">
|
||||
<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"
|
||||
@@ -308,117 +350,70 @@ onMounted(() => {
|
||||
</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,
|
||||
}"
|
||||
>
|
||||
<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 v-if="gameData?.event_banner" class="event">
|
||||
<div class="nav-item">
|
||||
<AtomsLocaleLink
|
||||
:to="gameData.event_banner?.page_url"
|
||||
:target="
|
||||
gameData.event_banner?.link_type === 1
|
||||
? '_self'
|
||||
: '_blank'
|
||||
"
|
||||
class="nav-1depth text-gradient-pink"
|
||||
>
|
||||
<AtomsIconsStarFill />
|
||||
<span>{{ tm('Gnb_Event') }}</span>
|
||||
<AtomsIconsStarFill />
|
||||
</AtomsLocaleLink>
|
||||
</div>
|
||||
<div v-if="gameData?.event_banner" class="event">
|
||||
<div class="nav-item">
|
||||
<AtomsLocaleLink
|
||||
:to="gameData.event_banner?.page_url"
|
||||
:target="
|
||||
gameData.event_banner?.link_type === 1 ? '_self' : '_blank'
|
||||
"
|
||||
class="nav-1depth text-gradient-pink"
|
||||
>
|
||||
<AtomsIconsStarFill />
|
||||
<span>{{ tm('Gnb_Event') }}</span>
|
||||
<AtomsIconsStarFill />
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user