@php
    $isAdminArea = ($area ?? 'user') === 'admin';
    $notificationsRoute = $isAdminArea ? route('admin.notifications') : route('app.notifications');
    $notificationUnreadCount = (! $isAdminArea && auth()->check())
        ? \App\Support\NotificationFeed::unreadCountFor(auth()->user())
        : 0;
@endphp
<header class="vpm-mobile-header">
    <div class="vpm-mobile-header__left">
        <button
            type="button"
            class="vpm-mobile-header__menu"
            aria-label="Menu"
            aria-expanded="false"
            aria-controls="vpm-user-menu"
            data-vpm-menu-open
        >
            <span class="material-icons notranslate" aria-hidden="true">menu</span>
        </button>
        <x-vpm.logo
            :href="$isAdminArea ? route('admin.deposits') : route('app.home')"
            class="vpm-mobile-header__brand vpm-mobile-header__logo notranslate"
        />
    </div>
    <div class="vpm-mobile-header__right">
        <p class="vpm-mobile-header__user">{{ auth()->user()->name }}</p>
        <a href="{{ $notificationsRoute }}" class="vpm-mobile-header__icon-btn" aria-label="Notifications">
            <span class="material-icons notranslate" aria-hidden="true">notifications</span>
            @if ($notificationUnreadCount > 0)
                <span class="vpm-mobile-header__badge" aria-hidden="true"></span>
            @endif
        </a>
        <button type="button" class="vpm-mobile-header__theme" data-vpm-theme-toggle aria-pressed="false">
            <svg class="vpm-theme-icon vpm-theme-icon--sun" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
            </svg>
            <svg class="vpm-theme-icon vpm-theme-icon--moon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
            </svg>
            <span class="sr-only">Toggle theme</span>
        </button>
    </div>
</header>