Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 16x 16x 16x 16x 16x 16x 16x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<aside
class="w-64 bg-white border-r border-secondary-200 flex flex-col h-full"
role="complementary"
aria-label="Main sidebar"
>
<!-- Logo and Language Switcher -->
<div class="p-4 border-b border-secondary-200">
<div class="flex items-center justify-between gap-3">
<NuxtLink
to="/"
class="flex items-center gap-2 text-xl font-bold text-primary-600 hover:text-primary-700 transition-colors"
>
<svg
class="w-8 h-8"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span>SpielerPlus</span>
</NuxtLink>
<LanguageSwitcher />
</div>
</div>
<!-- Authenticated: Team Badge -->
<Transition name="fade" mode="out-in">
<div v-if="isAuthenticated" class="p-4 border-b border-secondary-200">
<div class="flex items-center gap-3">
<!-- Team Logo Placeholder -->
<div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
<span class="text-primary-600 font-bold text-sm">
{{ teamName.charAt(0) }}
</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-secondary-900 truncate">
{{ teamName }}
</p>
<button
class="text-xs text-primary-600 hover:text-primary-700 transition-colors"
>
{{ $t('nav.switchTeams') }}
</button>
</div>
</div>
</div>
</Transition>
<!-- Navigation -->
<nav class="flex-1 p-4 space-y-1 overflow-y-auto">
<Transition name="fade" mode="out-in">
<div v-if="isAuthenticated" key="auth-nav" class="space-y-1">
<!-- Authenticated Navigation -->
<NuxtLink
to="/"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-secondary-700 hover:text-primary-600 hover:bg-secondary-100 transition-colors"
active-class="!bg-primary-50 !text-primary-700"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
{{ $t('nav.home') }}
</NuxtLink>
<NuxtLink
to="/events"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-secondary-700 hover:text-primary-600 hover:bg-secondary-100 transition-colors"
active-class="!bg-primary-50 !text-primary-700"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
{{ $t('nav.events') }}
</NuxtLink>
<span
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-secondary-400 cursor-not-allowed"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
{{ $t('nav.team') }}
</span>
<span
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-secondary-400 cursor-not-allowed"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
{{ $t('nav.communication') }}
</span>
<span
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-secondary-400 cursor-not-allowed"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
{{ $t('nav.profile') }}
</span>
</div>
<div v-else key="guest-nav" class="space-y-1">
<!-- Guest Navigation (disabled) -->
<span
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-secondary-400 cursor-not-allowed"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
{{ $t('nav.home') }}
</span>
<span
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-secondary-400 cursor-not-allowed"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
{{ $t('nav.events') }}
</span>
</div>
</Transition>
</nav>
<!-- Premium CTA (authenticated only) -->
<Transition name="slide-up">
<div v-if="isAuthenticated" class="p-4 border-t border-secondary-200">
<div class="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-4 text-white">
<p class="text-sm font-medium">{{ $t('nav.premium.title') }}</p>
<p class="text-xs opacity-90 mt-1">{{ $t('nav.premium.subtitle') }}</p>
<button class="mt-3 w-full bg-white text-primary-600 text-sm font-medium py-2 px-4 rounded-md hover:bg-primary-50 transition-colors">
{{ $t('nav.premium.button') }}
</button>
</div>
</div>
</Transition>
<!-- Auth Actions -->
<div class="p-4 border-t border-secondary-200">
<Transition name="fade" mode="out-in">
<button
v-if="isAuthenticated"
key="logout"
@click="logout()"
class="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium text-secondary-700 hover:bg-secondary-100 transition-colors"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
{{ $t('nav.logout') }}
</button>
<button
v-else
key="login"
@click="login()"
class="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium bg-primary-600 text-white hover:bg-primary-700 transition-colors"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
{{ $t('nav.login') }}
</button>
</Transition>
</div>
<!-- Dev Toggle (for demo) -->
<div class="p-4 border-t border-secondary-200 bg-secondary-50">
<p class="text-xs text-secondary-500 mb-2">{{ $t('nav.demo.title') }}</p>
<button
@click="toggleAuth"
class="w-full text-xs px-3 py-2 rounded border border-secondary-300 text-secondary-600 hover:bg-secondary-100 transition-colors"
>
{{ $t('nav.demo.toggleAuth') }}
</button>
</div>
</aside>
</template>
<script setup lang="ts">
/**
* AppSidebar
* @description Dynamic sidebar that displays different content based on authentication state
* Shows team info, navigation, and premium CTA when authenticated
*/
const { isAuthenticated, teamName, login, logout, toggleAuth } = useAuth()
</script>
|