nav-panel {
    display: block;
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

nav-panel > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4rem);
    transition-property: transform, opacity;
    transition-duration: 0.3s;
}

nav-panel > *.on {
    z-index: 2;
    pointer-events: initial;
    opacity: 1;
    transform: none;
}

nav-panel > *.on ~ * {
    transform: translateX(4rem);
}