We_Relese/OnlineApp/Relese/Views/Shared/Layout/_MainSidebar.Play.cshtml

@using WeOnlineApp.Helpers
@{
    var imagePath = string.IsNullOrEmpty(AbpSession.AvatarImagePath) ? "/Content/Image/user.png" : AbpSession.AvatarImagePath;

}
<style>

    .text-sm .sidebar-nav > .nav-item .nav-icon.fa,
    .text-sm .sidebar-nav > .nav-item .nav-icon.fab,
    .text-sm .sidebar-nav > .nav-item .nav-icon.far,
    .text-sm .sidebar-nav > .nav-item .nav-icon.fas,
    .text-sm .sidebar-nav > .nav-item .nav-icon.glyphicon,
    .text-sm .sidebar-nav > .nav-item .nav-icon.ion {
        font-size: 0.875rem;
    }

    .sidebar-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .sidebar-nav .nav-item {
            width: 100%;
        }
            /*
    .sidebar-nav .nav-item img {
        display: block;
        width: 100px;
        height: 100px;
        margin: 20px auto 5px;
    }

    .sidebar-nav .nav-item .name {
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        color: var(--mainColor);
        margin-bottom: 20px
    }*/

            .sidebar-nav .nav-item .nav-link {
                display: flex;
                align-items: center;
                height: 60px;
                padding: 10px 10%;
                text-align: left;
                color: var(--mainColor);
            }

                .sidebar-nav .nav-item .nav-link span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: transparent;
                    margin-right: 10px;
                }

        .sidebar-nav .nav-link.active span, .sidebar-nav .nav-link:hover span {
            color: #eee;
            background: var(--mainColor);
            transition: background .15s ease-in-out;
        }

        .sidebar-nav .nav-link:hover span {
            color: #fff;
        }

        .sidebar-nav .nav-link.active:before {
            content: "";
            position: absolute;
            left: 0;
            background: var(--mainColor);
            width: 6px;
            height: 40px;
            border-radius: 0 5px 5px 0;
        }
</style>
<!-- Main Sidebar Container -->
<div class="nav sidebar-nav">

    @*<div class="nav-item">
            <img class="img-circle" src="@(imagePath)" alt="" />
            <div class="name">@(AbpSession.RealName)</div>
        </div>*@
    <div class="nav-item">
        <a id="nav-home" href="@Url.Action("Index", "Play")" class="nav-link">
            <span class="fa fa-home"></span>
            主页
        </a>
    </div>
    <div class="nav-item">
        <a id="nav-start" href="@Url.Action("Start", "Play")" class="nav-link">
            <span class="fa fa-book"></span>
            演练课程
        </a>
    </div>
    @*<div class="nav-item">
            <a id="nav-plan" href="@Url.Action("PlanLearn", "Play")" class="nav-link">预案学习</a>
        </div>*@
    <div class="nav-item">
        <a id="nav-history" href="@Url.Action("History", "Play")" class="nav-link">
            <span class="fa fa-history"></span>
            演练历史
        </a>
    </div>
    <div class="nav-item">
        <a id="nav-medal" href="@Url.Action("Medal", "Play")" class="nav-link">
            <span class="fa fa-swatchbook"></span>
            我的勋章
        </a>
    </div>
    <div class="nav-item">
        <a id="nav-team" href="@Url.Action("Team", "Play")" class="nav-link">
            <span class="fa fa-user-friends"></span>
            我的团队
        </a>
    </div>
    <div class="nav-item">
        <a id="nav-profile" href="@Url.Action("PlayUserProfile", "Home")" class="nav-link">
            <span class="fa fa-user"></span>
            我的资料
        </a>
    </div>
    <div class="nav-item">
        <a id="" href="javascript:LoginOut()" class="nav-link">
            <span class="fa fa-sign-out-alt"></span>
            注销账号
        </a>
    </div>
</div>
<!-- /.sidebar -->
@using (Html.BeginScripts())
{
    <script>
        $('.sidebar-nav').find('.nav-link').removeClass('active');
        $('#nav-@(ViewBag.PageId)').addClass('active');

        function LoginOut() {
            MsgConfirm("您确定注销账号吗？",
                "注销账号",
                function() {
                    window.location.href = "/Account/LogOut";
                });
        }
    </script>
}