CodeLiturgy.Dashboard/CodeLiturgy.Views/Views/Shared/_HeaderMenu.cshtml

@using CodeLiturgy.Views.Utils
@using CodeLiturgy.Data.Auth
@using Duende.IdentityServer.Extensions
@{
    Layout = null;
    var userAuthenticated = User.IsAuthenticated();
    var user = ViewData.GetUserViewData();
    var rootUrl = SessionConstants.CookieDomain;
    var menu = LayoutCache.GetDefaultHeaderMenu(ViewData, User.IsAuthenticated());
}

<div class="q-tabs items-center  row no-wrap items-center q-tabs--not-scrollable q-tabs--horizontal q-tabs__arrows--inside">
    <div class="q-tabs__content row no-wrap items-center self-stretch hide-scrollbar relative-position q-tabs__content--align-center">
        @if (menu is {Count: > 0 })
        {
            @foreach (var record in menu)
            {
                <a class="q-tab relative-position self-stretch flex flex-center text-center q-tab--inactive q-focusable q-hoverable cursor-pointer " href="@record.Location">
                    <div class="q-tab__content self-stretch flex-center relative-position q-anchor--skip non-selectable column">
                        <div class="q-tab__label">@record.Name</div>
                    </div>
                    <div class="q-tab__indicator absolute-bottom"></div>
                </a>
            }
        }
        @if (userAuthenticated && user != null)
        {
            <div class="q-chip row inline no-wrap items-center q-chip--dark q-dark" id="profile-wrap">
                <div class="q-chip__content col row no-wrap items-center q-anchor--skip">
                    <div class="q-avatar">
                        <div class="q-avatar__content row flex-center overflow-hidden">
                            <img src="@rootUrl/static/profile/boy-avatar.png">
                        </div>
                    </div> @user.Email
                </div>
            </div>
            <style lang="css">
  
            </style>
        }
    </div>
</div>
       @if (userAuthenticated && user != null)
       {
           <div class="profileMenuContainer" id="profile-menu" style="display: none">
               <div>
                   <a href="@AuthAccountRoute" class="profile-link">
                       <button class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-black text-white q-btn--actionable q-focusable q-hoverable q-btn--active" type="button">
                           <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
                               <span class="block">Profile</span>
                           </span>
                       </button>
                   </a>
               </div>
               <div>
                   <a href="@AuthLogoutRoute" class="profile-link">
                       <button class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-black text-white q-btn--actionable q-focusable q-hoverable q-btn--active" type="button">
                           <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
                               <span class="block">Logout</span>
                           </span>
                       </button>
                   </a>

               </div>
           </div>
       }
<script >
(() => {
    const wrapMenu = document.getElementById("profile-wrap");
    const profileMenu = document.getElementById("profile-menu");
    wrapMenu.onclick = () => { 
        if (profileMenu.style.display === "none") {
            profileMenu.style.display = "block";
        } else {
            profileMenu.style.display = "none";
        }
    }
})();
</script>