gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat. gnb 아이콘 추가

Browse Source
This commit is contained in:
clkim
2025-10-13 16:04:57 +09:00
parent 7d5057fc43
commit 277532f0ba
16 changed files with 183 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
layers/components/layouts/Header.vue
View File

@@ -162,6 +162,7 @@ onMounted(() => {
/>
</AtomsLocaleLink>
<button class="btn-open" @click="handleMenuOpen">
<AtomsIconsMenuBoldLine class="mx-auto" />
<span class="sr-only">menu open</span>
</button>
<div
@@ -197,7 +198,7 @@ onMounted(() => {
:class="['nav-1depth', { active: isNavItemActive(gnbItem) }]"
>
<span>{{ gnbItem.menu_name }}</span>
<AtomsIconsArrowDown
<AtomsIconsArrowDownFill
v-if="gnbItem.children"
class="hidden md:block"
/>
@@ -213,7 +214,7 @@ onMounted(() => {
:target="child.link_target"
>
<span>{{ child.menu_name }}</span>
<AtomsIconsLinkOut
<AtomsIconsWebLinkLine
v-if="child.link_target === '_blank'"
/>
</BlocksHybridLink>
@@ -224,6 +225,7 @@ onMounted(() => {
</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">
@@ -255,7 +257,7 @@ onMounted(() => {
:target="child.link_target"
>
<span>{{ child.menu_name }}</span>
<AtomsIconsLinkOut
<AtomsIconsWebLinkLine
v-if="child.link_target === '_blank'"
/>
</BlocksHybridLink>
@@ -273,7 +275,9 @@ onMounted(() => {
:target="'_self'"
class="nav-1depth text-gradient-pink"
>
<AtomsIconsStarFill />
<span>이벤트</span>
<AtomsIconsStarFill />
</BlocksHybridLink>
</div>
</div>
@@ -284,6 +288,7 @@ onMounted(() => {
</AtomsButton>
</div>
<button class="btn-close" @click="handleMenuClose">
<AtomsIconsMenuCloseLine class="mx-auto" />
<span class="sr-only">menu close</span>
</button>
</div>
@@ -297,7 +302,7 @@ onMounted(() => {
@apply bg-theme-foreground text-theme-foreground-reversal relative z-50;
}
.game-wrapper {
@apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[64px] bg-theme-foreground md:h-16 md:pl-0 md:pr-[40px]
@apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[52px] bg-theme-foreground sm:px-[72px] md:h-16 md:pl-0 md:pr-[40px]
before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-px before:bg-theme-foreground-reversal-6;
}
.game-wrapper.is-fixed {
@@ -309,10 +314,10 @@ onMounted(() => {
.btn-open,
.btn-close {
@apply absolute w-[40px] h-[40px] md:hidden bg-[red];
@apply absolute w-[40px] h-[40px] md:hidden;
}
.btn-open {
@apply top-[4px] left-[12px];
@apply top-[4px] left-[12px] sm:left-[32px];
}
.btn-close {
@apply top-[11px] left-[12px];
@@ -416,7 +421,7 @@ onMounted(() => {
}
.event {
@apply relative md:ml-[64px] md:after:content-[''] md:after:absolute md:after:top-[50%] md:after:left-[-32px] md:after:w-[1px] md:after:h-[16px] md:after:bg-theme-foreground-reversal-30 md:after:translate-y-[-50%];
@apply relative md:ml-[64px] md:after:content-[''] md: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%];
}
.is-hidden {