Spaces:
Running
Running
File size: 3,502 Bytes
b1722bb 1f881b6 b1722bb 1f881b6 b1722bb ffd0317 1f881b6 b1722bb 1f881b6 27ba647 1f881b6 27ba647 1f881b6 83579f2 1f881b6 3136a69 1f881b6 3136a69 1f881b6 3136a69 1f881b6 3136a69 10e2649 1f881b6 10e2649 1f881b6 10e2649 1f881b6 3136a69 1f881b6 3136a69 b1722bb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<template>
<header class="arena-header">
<div class="bar">
<!-- Title (left) -->
<button class="arena-title" aria-label="Asset Market Arena" @click="navigateTo('/')">
Asset Market Arena
</button>
<!-- Tabs (right) -->
<nav class="menu" aria-label="Primary">
<span
class="menu-item"
:class="{ active: isActive('/live') }"
@click="navigateTo('/live')"
>Live Arena</span>
<span
class="menu-item"
:class="{ active: isActive('/leaderboard') }"
@click="navigateTo('/leaderboard')"
>Leaderboard</span>
<span
class="menu-item"
:class="{ active: isActive('/add-asset') }"
@click="navigateTo('/add-asset')"
>Agent Arena</span>
</nav>
</div>
<!-- AMA gradient hairline -->
<div class="ama-gradient-rule" />
</header>
</template>
<script>
export default {
name: 'ArenaHeader',
methods: {
navigateTo(path) { this.$router.push(path) },
isActive(path) { return this.$route?.path?.startsWith(path) }
}
}
</script>
<!-- GLOBAL (UNSCOPED) — brand tokens must NOT be scoped -->
<style>
:root{
/* AMA brand gradient: rgb(0,0,185) → rgb(240,0,15) */
--ama-start: 0, 0, 185;
--ama-end: 240, 0, 15;
/* Podium palette (kept for future use) */
--gold: #D4AF37;
--silver: #C0C0C0;
--bronze: #CD7F32;
}
</style>
<!-- COMPONENT STYLES -->
<style scoped>
.arena-header{
position: sticky; top: 0; z-index: 50;
background: linear-gradient(135deg,#fbfcff 0%,#ffffff 100%);
border-bottom: 1px solid #e5e7eb;
backdrop-filter: blur(8px);
}
.bar{
max-width: 1200px;
margin: 0 auto;
padding: 16px 16px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* Title (left) with AMA gradient text */
.arena-title{
all: unset;
cursor: pointer;
font-size: 26px;
font-weight: 900;
letter-spacing: -0.01em;
background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Tabs (right) */
.menu{
display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
}
.menu-item{
cursor: pointer; position: relative;
font-size: 22px; font-weight: 700; color: #1f2937;
padding-bottom: 4px; transition: color .2s ease;
}
/* hover color + underline */
.menu-item:hover{ color: rgb(var(--ama-end)); }
.menu-item::after{
content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
transition: width .25s ease;
}
.menu-item:hover::after{ width:100%; }
/* active = gradient text + full underline */
.menu-item.active{
background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.menu-item.active::after{ width:100%; }
/* bottom hairline */
.ama-gradient-rule{
width:100%; height:3px; border-radius:2px;
background-image: linear-gradient(
90deg,
rgba(var(--ama-start),0),
rgb(var(--ama-start)),
rgb(var(--ama-end)),
rgba(var(--ama-end),0)
);
}
/* responsive */
@media (max-width: 720px){
.bar{ flex-direction: column; align-items: stretch; }
.menu{ justify-content: center; gap: 18px; }
.arena-title{ text-align: center; font-size: 22px; }
.menu-item{ font-size: 18px; }
}
</style>
|