From f5fe7e992d6e0b10e42d96cfbb7fde13f5a39c2c Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 3 Dec 2025 16:43:44 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20gnb=20menu=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=20=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/layouts/Header.vue | 176 ++++++++++++++-------------
 1 file changed, 92 insertions(+), 84 deletions(-)

diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index ac082a6..b7128b3 100644
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -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;