.app-wrap{
    display: grid;
    grid-template-columns: clamp(280px, 10vw, 450px) minmax(1020px, 1fr);
    grid-template-rows: 60px minmax(851px, 1226px);
    grid-template-areas:
        "sidebar header "
        "sidebar main ";
    height: 100%;
    background-color: #f0f3fa;

    header{
        // background-color: #f8f9fa;
        padding: 1rem 3rem;
        // border-bottom: 1px solid #e9ecef;
        grid-area: header;
        @include flex-layout(flex, center, space-between);
        .selected-menu-info{
             @include flex-layout(flex, center);
            span:nth-child(1){
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                background-color: #4b40b5;
                @include flex-layout(flex, center, center);
                margin-right:.8rem;
            }
        }
        .user-info{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .user-name{
                font-size: var(--fz-body-md);
                font-weight: 600;
                padding: 0 1rem;
            }
            .user-logout{
                color: #ffffff;
                background-color: #4b40b5;
                padding: .5rem 1rem;
                border-radius: 3rem;
                cursor: pointer;
                @include flex-layout(flex, center, center);
            }
        }
    }

    nav{
        // height: 100%;
        grid-area: sidebar;
        background-color: #ffffff;
        padding: 3rem;

        .logo-wrap{
            margin-bottom: 3rem;
        }

        ul{
            height: calc(100% - 118px);
            li{
                padding: 1rem 0;
                &.active > a,
                .active > .router-link-active {
                    display: block;
                    border-radius: 1rem;
                    font-weight: bold;
                    background-color: #4b40b5;
                    color: #ffffff;
                }

                a{
                    padding: 1rem; 
                }
            }
        }

       
    }

    main{
        height: 100%;
        grid-area: main;
        padding: 1rem 3rem 3rem 3rem;
    }

    &.page{
        display: block;
    }
}