@props(['username' => ''])
<header class="bg-white/10 backdrop-blur-sm p-4 flex justify-between items-center fixed top-0 right-0 left-0 md:left-64 md:w-[calc(100%-16rem)] z-10 animate-slideDown">
                <h1 class="text-xl font-bold flex items-center"><img src="/img/app/logo.png" alt="logo"></h1>
                <div class="text-gray-400 flex gap-x-5"> 
                    <a href="{{ route('core.notifications') }}" class="hover:bg-gray-100 p-2 w-10 h-10 transition-all hover:scale-110 text-xl flex justify-center items-center rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="MuiBox-root css-1t9pz9x iconify iconify--eva" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88a6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79M14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4Z"></path></svg></a>
                    <a href="{{ route('profile.edit') }}" class="bg-primary p-1 w-9 h-9 transition-all hover:scale-110 text-xl flex justify-center items-center rounded-full text-black">{{ strtoupper(substr($username, 0, 1)) }}</a>   
                </div>
            </header>