core2026/app/game-frontend/src/components/main/MainGlobalMenu.vue

<script setup lang="ts">
import { computed } from 'vue';
import MainNavigationLink from './MainNavigationLink.vue';
import {
    buildGlobalNavigation,
    isNavigationConfigured,
    type MainNavigationLink as MainNavigationLinkItem,
} from './mainNavigation';
import { useMenuPopup } from './useMenuPopup';

const props = defineProps<{
    npcMode: number;
    voteActive: boolean;
}>();

const entries = computed(() => buildGlobalNavigation(props.npcMode));
const { setRoot, openId, close, toggle } = useMenuPopup();
const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props.voteActive;
</script>

<template>
    <nav :ref="setRoot" class="main-global-menu" aria-label="게임 공통 메뉴">
        <template v-for="entry in entries" :key="entry.id">
            <MainNavigationLink
                v-if="entry.kind === 'link'"
                :link="entry"
                :enabled="isNavigationConfigured(entry)"
                :active="isActive(entry)"
            />
            <div v-else-if="entry.kind === 'group'" class="main-menu-popup">
                <button
                    class="main-menu-button"
                    type="button"
                    :data-menu-id="entry.id"
                    :aria-expanded="openId === entry.id"
                    :aria-controls="`global-menu-${entry.id}`"
                    @click="toggle(entry.id, $event)"
                >
                    {{ entry.label }}
                    <span class="menu-caret" aria-hidden="true"></span>
                </button>
                <ul
                    v-show="openId === entry.id"
                    :id="`global-menu-${entry.id}`"
                    class="main-menu-popup__list"
                    role="menu"
                >
                    <template v-for="item in entry.items" :key="item.id">
                        <li v-if="item.kind === 'divider'" class="main-menu-divider" role="separator"></li>
                        <li v-else role="none">
                            <MainNavigationLink
                                :link="item"
                                :enabled="isNavigationConfigured(item)"
                                role="menuitem"
                                @navigate="close()"
                            />
                        </li>
                    </template>
                </ul>
            </div>
            <div v-else class="main-menu-split">
                <MainNavigationLink
                    :link="entry.main"
                    :enabled="isNavigationConfigured(entry.main)"
                    :active="isActive(entry.main)"
                />
                <button
                    class="main-menu-button main-menu-split__toggle"
                    type="button"
                    :data-menu-id="entry.id"
                    :aria-label="`${entry.main.label} 하위 메뉴`"
                    :aria-expanded="openId === entry.id"
                    :aria-controls="`global-menu-${entry.id}`"
                    @click="toggle(entry.id, $event)"
                >
                    <span class="menu-caret" aria-hidden="true"></span>
                </button>
                <ul
                    v-show="openId === entry.id"
                    :id="`global-menu-${entry.id}`"
                    class="main-menu-popup__list"
                    role="menu"
                >
                    <template v-for="item in entry.items" :key="item.id">
                        <li v-if="item.kind === 'divider'" class="main-menu-divider" role="separator"></li>
                        <li v-else role="none">
                            <MainNavigationLink
                                :link="item"
                                :enabled="isNavigationConfigured(item)"
                                role="menuitem"
                                @navigate="close()"
                            />
                        </li>
                    </template>
                </ul>
            </div>
        </template>
    </nav>
</template>

<style scoped>
.main-global-menu {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1.6px;
    width: 100%;
    white-space: nowrap;
}

.main-menu-popup,
.main-menu-split {
    position: relative;
    min-width: 0;
}

.main-global-menu > :deep(.main-menu-link),
.main-menu-popup > .main-menu-button,
.main-menu-split > :deep(.main-menu-link),
.main-menu-split > .main-menu-split__toggle {
    border-color: var(--sammo-button-navigation-border);
    background-color: var(--sammo-button-navigation-bg);
    background-image: none;
}

.main-global-menu > :deep(.main-menu-link:hover),
.main-global-menu > :deep(.main-menu-link:focus-visible),
.main-global-menu > :deep(.main-menu-link:active),
.main-menu-popup > .main-menu-button:hover,
.main-menu-popup > .main-menu-button:focus-visible,
.main-menu-popup > .main-menu-button:active,
.main-menu-popup > .main-menu-button[aria-expanded='true'],
.main-menu-split > :deep(.main-menu-link:hover),
.main-menu-split > :deep(.main-menu-link:focus-visible),
.main-menu-split > :deep(.main-menu-link:active),
.main-menu-split > .main-menu-split__toggle:hover,
.main-menu-split > .main-menu-split__toggle:focus-visible,
.main-menu-split > .main-menu-split__toggle:active,
.main-menu-split > .main-menu-split__toggle[aria-expanded='true'] {
    border-color: var(--sammo-button-navigation-border);
    background-color: var(--sammo-button-navigation-bg);
}

.main-menu-popup > .main-menu-button,
.main-menu-split > :deep(.main-menu-link) {
    width: 100%;
}

.main-menu-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
}

.main-menu-split__toggle {
    min-width: 28px;
    width: 28px;
    padding: 0;
    border-left-width: 0;
    border-radius: 0 3px 3px 0;
}

.menu-caret {
    display: inline-block;
    margin-left: 5px;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    vertical-align: middle;
}

.main-menu-popup__list {
    position: absolute;
    z-index: 120;
    top: calc(100% + 2px);
    left: 0;
    min-width: max(100%, 180px);
    margin: 0;
    border: 1px solid #282828;
    border-radius: 3px;
    padding: 4px 0;
    background: #202020;
    box-shadow: 0 8px 18px rgb(0 0 0 / 45%);
    list-style: none;
}

.main-menu-split .main-menu-popup__list {
    right: 0;
    left: auto;
}

.main-menu-popup__list :deep(.main-menu-link) {
    min-height: 30px;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    padding: 5px 16px;
    background: transparent;
}

.main-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: #555;
}

@media (max-width: 939.98px) {
    .main-global-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
</style>