primeng/resources/components/sidebar/sidebar.css

[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/No

@layer primeng {
    .p-sidebar {
        position: fixed;
        transition: transform 0.3s;
        display: flex;
        flex-direction: column;
    }

    .p-sidebar-content {
        position: relative;
        overflow-y: auto;
        flex-grow: 1;
    }

    .p-sidebar-header {
        display: flex;
        align-items: center;
    }

    .p-sidebar-footer {
        margin-top: auto;
    }

    .p-sidebar-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .p-sidebar-left {
        top: 0;
        left: 0;
        width: 20rem;
        height: 100%;
    }

    .p-sidebar-right {
        top: 0;
        right: 0;
        width: 20rem;
        height: 100%;
    }

    .p-sidebar-top {
        top: 0;
        left: 0;
        width: 100%;
        height: 10rem;
    }

    .p-sidebar-bottom {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10rem;
    }

    .p-sidebar-full {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-transition: none;
        transition: none;
    }

    .p-sidebar-left.p-sidebar-sm,
    .p-sidebar-right.p-sidebar-sm {
        width: 20rem;
    }

    .p-sidebar-left.p-sidebar-md,
    .p-sidebar-right.p-sidebar-md {
        width: 40rem;
    }

    .p-sidebar-left.p-sidebar-lg,
    .p-sidebar-right.p-sidebar-lg {
        width: 60rem;
    }

    .p-sidebar-top.p-sidebar-sm,
    .p-sidebar-bottom.p-sidebar-sm {
        height: 10rem;
    }

    .p-sidebar-top.p-sidebar-md,
    .p-sidebar-bottom.p-sidebar-md {
        height: 20rem;
    }

    .p-sidebar-top.p-sidebar-lg,
    .p-sidebar-bottom.p-sidebar-lg {
        height: 30rem;
    }

    @media screen and (max-width: 64em) {
        .p-sidebar-left.p-sidebar-lg,
        .p-sidebar-left.p-sidebar-md,
        .p-sidebar-right.p-sidebar-lg,
        .p-sidebar-right.p-sidebar-md {
            width: 20rem;
        }
    }
}