SREBOT/web/views/partials/nav.ejs

<style>
#langDropdown .hidden-dropdown { display: none; }
#langDropdown.open .hidden-dropdown { display: block; }
</style>
<!-- Navigation Bar -->
<nav class="fixed top-0 left-0 right-0 bg-[#1E1E1E]/98 backdrop-blur-md border-b border-white/5" style="z-index: 1000;">
    <div class="w-full px-6 lg:px-8">
        <div class="flex items-center h-16">
            <!-- Left: Logo anchored -->
            <a href="/" class="flex items-center space-x-3 flex-shrink-0">
                <img src="/images/toothless_server.gif" alt="<%= botName %>" class="h-8 w-auto" width="32" height="32">
                <span class="text-lg font-semibold"><span class="text-[#90EE90]">Toothless</span> <span class="text-accent">SREBOT</span></span>
            </a>
            <!-- Center: Nav links -->
            <div class="hidden lg:flex items-center justify-center flex-1 space-x-6">
                <% const navLinks = [
                    { href: '/', key: 'home' },
                    { href: '/squadrons', key: 'squadrons' },
                    { href: '/leaderboard/players', key: 'leaderboards' },
                    { href: '/analytics', key: 'analytics' },
                    { href: '/docs', key: 'docs' },
                ]; %>
                <% navLinks.forEach(link => { %>
                    <% if (typeof activePage !== 'undefined' && activePage === link.key) { %>
                        <a href="<%= link.href %>" class="text-accent transition-colors text-sm font-medium border-b-2 border-accent pb-1"><%= t('nav.' + link.key) %></a>
                    <% } else { %>
                        <a href="<%= link.href %>" class="text-muted hover:text-accent transition-colors text-sm font-medium"><%= t('nav.' + link.key) %></a>
                    <% } %>
                <% }); %>
                <a href="/premium" class="<%= typeof activePage !== 'undefined' && activePage === 'premium' ? 'nav-premium transition-colors text-sm font-medium border-b-2 border-[#ffd700] pb-1' : 'nav-premium transition-colors text-sm font-medium' %>"><%= t('nav.premium') %></a>
                <a href="/support" class="nav-rainbow transition-colors text-sm font-medium flex items-center">
                    <i class="fas fa-life-ring mr-1.5 text-xs"></i>
                    <%= t('nav.support') %>
                </a>
                <a href="https://ko-fi.com/notsotoothless" target="_blank" rel="noopener noreferrer" class="nav-donate transition-colors text-sm font-medium flex items-center">
                    <i class="fas fa-heart mr-1.5 text-xs"></i>
                    <%= t('nav.donate') %>
                </a>
            </div>
            <!-- Right: Language toggle + Discord -->
            <div class="hidden lg:flex items-center space-x-6 flex-shrink-0">
                <div class="relative" id="langDropdown">
                    <button onclick="document.getElementById('langDropdown').classList.toggle('open')" class="flex items-center gap-3 px-3 py-1.5 text-sm font-medium rounded-md border transition-colors" style="border-color: rgba(144,238,144,0.2); color: #90EE90;">
                        <span id="langCurrent"><%= lang === 'en' ? 'ENG' : lang === 'ru' ? 'РУС' : lang === 'fr' ? 'FRA' : lang === 'it' ? 'ITA' : lang === 'uk' ? 'УКР' : lang === 'de' ? 'DEU' : lang === 'es' ? 'ESP' : lang === 'pl' ? 'POL' : lang === 'cs' ? 'CES' : '简中' %></span>
                        <i class="fas fa-chevron-down text-[10px] opacity-60"></i>
                    </button>
                    <div class="absolute right-0 top-full mt-1 min-w-[170px] bg-[#2A2A2A] border border-white/10 rounded-lg shadow-xl overflow-hidden hidden-dropdown" style="z-index: 100;">
                        <button onclick="switchLanguage('en')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'en' ? 'text-[#90EE90]' : 'text-white/70' %>">ENG <span class="text-white/30 ml-1">English</span></button>
                        <button onclick="switchLanguage('ru')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'ru' ? 'text-[#90EE90]' : 'text-white/70' %>">РУС <span class="text-white/30 ml-1">Русский</span></button>
                        <button onclick="switchLanguage('fr')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'fr' ? 'text-[#90EE90]' : 'text-white/70' %>">FRA <span class="text-white/30 ml-1">Français</span></button>
                        <button onclick="switchLanguage('it')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'it' ? 'text-[#90EE90]' : 'text-white/70' %>">ITA <span class="text-white/30 ml-1">Italiano</span></button>
                        <button onclick="switchLanguage('uk')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'uk' ? 'text-[#90EE90]' : 'text-white/70' %>">УКР <span class="text-white/30 ml-1">Українська</span></button>
                        <button onclick="switchLanguage('de')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'de' ? 'text-[#90EE90]' : 'text-white/70' %>">DEU <span class="text-white/30 ml-1">Deutsch</span></button>
                        <button onclick="switchLanguage('es')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'es' ? 'text-[#90EE90]' : 'text-white/70' %>">ESP <span class="text-white/30 ml-1">Español</span></button>
                        <button onclick="switchLanguage('pl')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'pl' ? 'text-[#90EE90]' : 'text-white/70' %>">POL <span class="text-white/30 ml-1">Polski</span></button>
                        <button onclick="switchLanguage('cs')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'cs' ? 'text-[#90EE90]' : 'text-white/70' %>">CES <span class="text-white/30 ml-1">Čeština</span></button>
                        <button onclick="switchLanguage('zh-CN')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'zh-CN' ? 'text-[#90EE90]' : 'text-white/70' %>">简中 <span class="text-white/30 ml-1">简体中文</span></button>
                    </div>
                </div>
                <button class="btn-primary px-4 py-2 rounded-lg text-sm font-bold inline-flex items-center" id="inviteBtn">
                    <i class="fab fa-discord mr-2"></i><%= t('nav.addToDiscord') %>
                </button>
            </div>
            <button class="lg:hidden text-accent" id="mobileMenuBtn">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </div>
    <div class="hidden lg:hidden border-t border-white/5 bg-[#1E1E1E]/98" id="mobileMenu">
        <div class="px-6 py-4 space-y-2">
            <% navLinks.forEach(link => { %>
                <% if (typeof activePage !== 'undefined' && activePage === link.key) { %>
                    <a href="<%= link.href %>" class="block px-4 py-2 text-accent bg-white/5 rounded-md"><%= t('nav.' + link.key) %></a>
                <% } else { %>
                    <a href="<%= link.href %>" class="block px-4 py-2 text-muted hover:bg-white/5 rounded-md"><%= t('nav.' + link.key) %></a>
                <% } %>
            <% }); %>
            <a href="/premium" class="block px-4 py-2 nav-premium <%= typeof activePage !== 'undefined' && activePage === 'premium' ? 'bg-white/5' : 'hover:bg-white/5' %> rounded-md"><%= t('nav.premium') %></a>
            <a href="/support" class="block px-4 py-2 nav-rainbow hover:bg-white/5 rounded-md">
                <i class="fas fa-life-ring mr-2"></i><%= t('nav.support') %>
            </a>
            <a href="https://ko-fi.com/notsotoothless" target="_blank" rel="noopener noreferrer" class="block px-4 py-2 nav-donate hover:bg-white/5 rounded-md">
                <i class="fas fa-heart mr-2"></i><%= t('nav.donate') %>
            </a>
            <button class="block w-full px-4 py-2 btn-primary font-semibold rounded-md text-center" id="inviteBtnMobile">
                <i class="fab fa-discord mr-2"></i><%= t('nav.addToDiscord') %>
            </button>
            <div class="border border-white/10 rounded-md overflow-hidden">
                <button onclick="switchLanguage('en')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'en' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ENG — English</button>
                <button onclick="switchLanguage('ru')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'ru' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">РУС — Русский</button>
                <button onclick="switchLanguage('fr')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'fr' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">FRA — Français</button>
                <button onclick="switchLanguage('it')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'it' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ITA — Italiano</button>
                <button onclick="switchLanguage('uk')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'uk' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">УКР — Українська</button>
                <button onclick="switchLanguage('de')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'de' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">DEU — Deutsch</button>
                <button onclick="switchLanguage('es')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'es' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ESP — Español</button>
                <button onclick="switchLanguage('pl')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'pl' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">POL — Polski</button>
                <button onclick="switchLanguage('cs')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'cs' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">CES — Čeština</button>
                <button onclick="switchLanguage('zh-CN')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'zh-CN' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">简中 — 简体中文</button>
            </div>
        </div>
    </div>
</nav>