141 lines
5.6 KiB
Vue
141 lines
5.6 KiB
Vue
<script setup lang="ts">
|
|
import type { GameDataValue, GameDataGnb } from "#layers/types/api/gameData";
|
|
|
|
const gameDataStore = useGameDataStore();
|
|
|
|
const gameData = gameDataStore.gameData as GameDataValue;
|
|
const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="bg-theme-foreground text-theme-foreground-reversal relative z-50"
|
|
>
|
|
<LayoutStoveGnb />
|
|
<div
|
|
data-name="header-game"
|
|
class="px-[40px] h-16 flex items-center whitespace-nowrap"
|
|
>
|
|
<!-- 로고 -->
|
|
<div data-name="header-logo" class="mr-[40px]">
|
|
<img
|
|
:src="gameData?.gnb?.bi_path"
|
|
:alt="gameData?.game_name"
|
|
class="h-[30px]"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 메인 네비게이션 -->
|
|
<nav data-name="header-nav" class="flex items-center space-x-[32px]">
|
|
<template v-if="gnbList">
|
|
<div
|
|
v-for="(gnbItem, key) in gnbList"
|
|
:key="key"
|
|
class="relative group"
|
|
>
|
|
<!-- Link 컴포넌트 사용 -->
|
|
<MoleculesLink
|
|
:to="gnbItem.url_path"
|
|
:target="gnbItem.link_target"
|
|
class="relative flex items-center h-[64px]"
|
|
>
|
|
{{ gnbItem.menu_name }}
|
|
<AtomsIconsArrowDown v-if="gnbItem.children" class="ml-1" />
|
|
<span
|
|
class="absolute bottom-0 left-0 w-full h-2 border-b-2 border-transparent transition-border-color group-hover:border-theme-foreground-reversal group-active:border-theme-foreground-reversal-10"
|
|
></span>
|
|
</MoleculesLink>
|
|
<div
|
|
v-if="gnbItem.children"
|
|
class="absolute top-full left-[-28px] min-w-[190px] pt-[4px]"
|
|
>
|
|
<ul
|
|
class="bg-theme-foreground-10 rounded-[20px] shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
|
|
>
|
|
<li v-for="child in gnbItem.children" :key="child.menu_name">
|
|
<!-- Link 컴포넌트 사용 -->
|
|
<MoleculesLink
|
|
:to="child.url_path"
|
|
:target="child.link_target"
|
|
class="flex items-center px-4 py-[9px] rounded-[12px] transition-background hover:bg-theme-foreground-reversal-40 active:bg-theme-foreground-reversal-70"
|
|
>
|
|
{{ child.menu_name }}
|
|
<AtomsIconsLinkOut
|
|
v-if="child.link_target === '_blank'"
|
|
class="ml-1"
|
|
/>
|
|
</MoleculesLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 구분선 -->
|
|
<div class="w-px h-4 bg-theme-foreground-reversal-30"></div>
|
|
|
|
<!-- 이벤트 -->
|
|
<a href="#" class="flex items-center space-x-[3px] text-gradient-pink">
|
|
<AtomsIconsStar />
|
|
<span>이벤트</span>
|
|
<AtomsIconsStar />
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- 오른쪽 영역 -->
|
|
<div data-name="header-right" class="relative group ml-auto">
|
|
<button
|
|
class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
|
|
>
|
|
게임 시작
|
|
</button>
|
|
|
|
<!-- 2단계 드롭다운 메뉴 -->
|
|
<div
|
|
class="absolute top-full right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
|
|
>
|
|
<div class="px-4 py-2">
|
|
<a
|
|
href="#"
|
|
class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
|
|
>
|
|
<div
|
|
class="w-8 h-8 bg-orange-500 rounded flex items-center justify-center"
|
|
>
|
|
<span class="text-white font-bold text-sm">S</span>
|
|
</div>
|
|
<span>PC 버전 다운로드</span>
|
|
</a>
|
|
</div>
|
|
<div class="px-4 py-2">
|
|
<a
|
|
href="#"
|
|
class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
|
|
>
|
|
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"
|
|
/>
|
|
</svg>
|
|
<span>Google Store</span>
|
|
</a>
|
|
</div>
|
|
<div class="px-4 py-2">
|
|
<a
|
|
href="#"
|
|
class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
|
|
>
|
|
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"
|
|
/>
|
|
</svg>
|
|
<span>App Store</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|