.allHeaderPanel{
    position: fixed;
    z-index: 998;
    top: 0;
    right: 17rem;
    left: 0;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: .5rem;
    padding: 1rem;
    border-right: 2px solid #eee;
    box-shadow: 0 5px 10px rgba(0,0,0,.05);
    .right{
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 1rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        .alignIcon{
            display: grid;
            align-items: center;
            cursor: pointer;
            svg{
                width: 1.5rem;
                height: 1.5rem;
            }
        }
        h2{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
    .left{
        .user{
            .pic{
                cursor: pointer;
                img{
                    width: 100%;
                    height: 3rem;
                    object-fit: contain;
                }
            }
            ul{
                background: white;
                position: absolute;
                top: 85%;
                left: 1rem;
                width: 13rem;
                border-radius: 10px;
                transition: all .3s ease-in-out;
                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
                border: 1px solid #eee;
                z-index: 100;
                display: none;
                li{
                    color: $text1;
                    .picUser{
                        width: 2.2rem;
                        height: 2.2rem;
                        border-radius: 5rem;
                        overflow: hidden;
                        img{
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }
                    .infoUser{
                        display: grid;
                        grid-template-columns: 1fr;
                        grid-gap: .2rem;
                        span{
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            font-size: .75rem;
                            font-weight: 300;
                        }
                    }
                    a{
                        display: grid;
                        grid-template-columns: auto auto;
                        justify-content: right;
                        align-items: center;
                        grid-gap: .5rem;
                        padding: .7rem;
                        background: transparent;
                        color: $text1;
                        font-size: .75rem;
                        font-weight: 300;
                        width: 10rem;
                        i{
                            display: grid;
                            justify-content: center;
                            align-items: center;
                            svg{
                                width: 1rem;
                                height: 1rem;
                                fill: $text1;
                            }
                        }
                    }
                    &:first-child{
                        display: grid;
                        grid-template-columns: auto auto;
                        justify-content: right;
                        align-items: center;
                        background: transparent;
                        grid-gap: .5rem;
                        border-bottom: 1px solid #eee;
                        padding: .5rem;
                    }
                    &:first-child{
                        border-bottom-right-radius: 0;
                        border-bottom-left-radius: 0;
                        overflow: hidden;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 800px) {
        .left{
            .user{
                ul{
                    background: white;
                    position: absolute;
                    top: 85%;
                    left: 1rem;
                    width: 13rem;
                    border-radius: 10px;
                    transition: all .3s ease-in-out;
                    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
                    border: 1px solid #eee;
                    z-index: 100;
                    display: none;
                    li{
                        color: $text1;
                        .picUser{
                            width: 2.2rem;
                            height: 2.2rem;
                            border-radius: 5rem;
                            overflow: hidden;
                            img{
                                height: 100%;
                                width: 100%;
                                object-fit: cover;
                            }
                        }
                        .infoUser{
                            display: grid;
                            grid-template-columns: 1fr;
                            grid-gap: .2rem;
                            span{
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                font-size: .75rem;
                                font-weight: 300;
                            }
                        }
                        a{
                            display: grid;
                            grid-template-columns: auto auto;
                            justify-content: right;
                            align-items: center;
                            grid-gap: .5rem;
                            padding: .7rem;
                            background: transparent;
                            color: $text1;
                            font-size: .75rem;
                            font-weight: 300;
                            width: 10rem;
                            i{
                                display: grid;
                                justify-content: center;
                                align-items: center;
                                svg{
                                    width: 1rem;
                                    height: 1rem;
                                    fill: $text1;
                                }
                            }
                        }
                        &:first-child{
                            display: grid;
                            grid-template-columns: auto auto;
                            justify-content: right;
                            align-items: center;
                            background: transparent;
                            grid-gap: .5rem;
                            border-bottom: 1px solid #eee;
                            padding: .5rem;
                        }
                        &:first-child{
                            border-bottom-right-radius: 0;
                            border-bottom-left-radius: 0;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
}
