Asymmetrik/ngx-starter

@use 'sass:map';
@import '../../../../styles/shared';

$sidebar-width: 250px !default;
$sidebar-transition-duration: 0.15s !default;

:host {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: map.get($spacers, 3);
    opacity: 0;
    width: 0;
    min-width: 0;

    @include transition(
        width $sidebar-transition-duration ease-in-out,
        min-width $sidebar-transition-duration ease-in-out,
        margin-left $sidebar-transition-duration ease-in-out,
        opacity 0s ease-in-out $sidebar-transition-duration
    );

    &.sidebar-open {
        margin-left: map.get($spacers, 3);
        opacity: 1;
        width: $sidebar-width;
        min-width: $sidebar-width;
        @include transition(
            width $sidebar-transition-duration ease-in-out,
            min-width $sidebar-transition-duration ease-in-out,
            margin-left $sidebar-transition-duration ease-in-out
        );

        &.sidebar-left {
            margin-left: 0;
            margin-right: map.get($spacers, 3);
        }
    }
}

.sidebar-header {
    white-space: nowrap;
}

.sidebar-body {
    flex-grow: 1;
    overflow: auto;
}