BetterDesk/web-nodejs/views/partials/navbar.ejs

<!-- Top Navigation Bar -->
<% if (typeof emergencyMode !== 'undefined' && emergencyMode) { %>
<div class="emergency-banner" role="alert">
    <span class="material-icons">warning</span>
    <span><%= _('auth.emergency_mode_banner') %></span>
</div>
<% } %>
<header class="navbar">
    <div class="navbar-left">
        <!-- Mobile menu button -->
        <button class="navbar-btn mobile-menu-btn" id="mobile-menu-btn" style="display: none;">
            <span class="material-icons">menu</span>
        </button>
        
        <!-- Breadcrumb -->
        <nav class="navbar-breadcrumb">
            <a href="/"><%= _('nav.dashboard') %></a>
            <% if (typeof breadcrumb !== 'undefined' && breadcrumb.length) { %>
                <% breadcrumb.forEach((item, index) => { %>
                    <span class="separator">/</span>
                    <% if (index === breadcrumb.length - 1) { %>
                        <span class="current"><%= item.label %></span>
                    <% } else if (item.href) { %>
                        <a href="<%= item.href %>"><%= item.label %></a>
                    <% } else { %>
                        <span class="breadcrumb-section"><%= item.label %></span>
                    <% } %>
                <% }); %>
            <% } %>
        </nav>
    </div>
    
    <div class="navbar-right">
        <!-- UI shell: optional UX 3.5 (Beta) — classic remains default -->
        <button type="button" class="navbar-btn navbar-btn--shell-beta" id="ui-shell-switch-btn" data-ui-shell-switch="ux35"
                title="<%= _('ux35.switch_to_ux35') || 'Switch to UX 3.5 (Beta)' %>"
                aria-label="<%= _('ux35.switch_to_ux35') || 'Switch to UX 3.5 (Beta)' %>">
            <span class="material-icons">view_sidebar</span>
            <span class="ui-shell-beta-badge" title="<%= _('ux35.beta_tooltip') || 'Beta console layout — optional; classic UI remains the default.' %>"><%= _('ux35.beta_badge') || 'BETA' %></span>
        </button>

        <!-- Refresh button -->
        <button class="navbar-btn" id="refresh-btn" title="<%= _('actions.refresh') %>">
            <span class="material-icons">refresh</span>
        </button>

        <!-- Notification bell -->
        <div class="notif-wrapper">
            <button class="navbar-btn notif-btn" id="notif-btn" title="<%= _('notifications.title') %>" aria-haspopup="true" aria-expanded="false">
                <span class="material-icons">notifications</span>
                <span class="notif-badge" id="notif-badge" hidden>0</span>
            </button>
            <div class="notif-dropdown" id="notif-dropdown" role="menu" hidden>
                <div class="notif-header">
                    <span><%= _('notifications.title') %></span>
                    <button type="button" class="notif-mark-all" id="notif-mark-all"><%= _('notifications.mark_all_read') %></button>
                </div>
                <div class="notif-list" id="notif-list" aria-live="polite">
                    <div class="notif-empty"><%= _('notifications.empty') %></div>
                </div>
                <div class="notif-footer">
                    <a href="/help-requests" class="notif-see-all"><%= _('notifications.see_all') %></a>
                </div>
            </div>
        </div>

        <!-- Accessibility preferences -->
        <button class="navbar-btn accessibility-btn" id="accessibility-btn" title="<%= _('accessibility.title') %>" aria-label="<%= _('accessibility.title') %>" aria-haspopup="dialog">
            <span class="material-icons">accessibility_new</span>
        </button>
        
        <!-- Language selector -->
        <div class="lang-selector">
            <button class="navbar-btn" id="lang-btn" title="<%= _('settings.language') %>">
                <span class="material-icons">language</span>
            </button>
            <div class="lang-dropdown" id="lang-dropdown">
                <% (availableLanguageList || Object.values(availableLanguages || {})).forEach(function(language) { %>
                    <div class="lang-option <%= lang === language.code ? 'active' : '' %>" data-lang="<%= language.code %>" role="button" tabindex="0">
                        <span class="lang-flag"><%= language.flag || '🌐' %></span>
                        <span class="lang-label"><%= language.native || language.name || language.code %></span>
                        <% if (lang === language.code) { %>
                            <span class="material-icons lang-check">check</span>
                        <% } %>
                    </div>
                <% }); %>
            </div>
        </div>
        
        <!-- User dropdown -->
        <div class="lang-selector">
            <button class="navbar-btn" id="user-btn" title="<%= user ? user.username : 'User' %>">
                <span class="material-icons">account_circle</span>
            </button>
            <div class="lang-dropdown" id="user-dropdown">
                <div class="lang-option" id="change-password-btn">
                    <span class="material-icons" style="font-size: 18px;">lock</span>
                    <span><%= _('auth.change_password') %></span>
                </div>
                <div class="lang-option" id="logout-btn" style="color: var(--accent-red);">
                    <span class="material-icons" style="font-size: 18px;">logout</span>
                    <span><%= _('auth.logout') %></span>
                </div>
            </div>
        </div>
    </div>
</header>