_sidebar.scss

$ui-02: $eccgui-color-workspace-background !default;

@import "~@carbon/react/scss/components/ui-shell/side-nav/index";

// tweak original layout

.#{$prefix}--side-nav--ux {
    top: mini-units(8);
    width: mini-units(40);
    max-width: mini-units(40);
}

.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed) {
    width: mini-units(8);
    transform: translateX(0);

    &:hover {
        width: mini-units(40);
        transition: width $pt-transition-duration ease-in 0.75s;
    }
}

.#{$prefix}--side-nav--collapsed {
    transform: translateX(mini-units(-40));
}

.#{$prefix}--side-nav__navigation {
    padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
    transition: none;
}

.#{$eccgui}-application__menu__toggler.cds--header__action {
    &:focus-visible {
        @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
    }
}