窗口调整高度时侧边栏列表项与菜单切换按钮重叠问题求助

我尝试了多种方法仍无法实现需求，目标是在调整窗口高度时，避免侧边栏的列表项（sidebar items）与菜单切换按钮（menu toggle）发生重叠。恳请各位协助解决此问题？

可查看效果的在线演示

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Titillium Web', sans-serif;
}
html{
    height: 100%;
}
body{
    background: linear-gradient(
        to left, #43c6ac, #191654
    );
}
.navigation{
    position: fixed;
    inset: 20px 0 20px 20px;
    width: 75px;
    background: #fff;
    transition: 0.5s ;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    .menuToggle{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 23px;
        &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 2px;
            background: #333;
            transform: translateY(-8px);
            transition: 0.5s;
        }
        &::after{
            content: "";
            position: absolute;
            width: 30px;
            height: 2px;
            background: #333;
            transform: translateY(8px);
            transition: 0.5s;
            box-shadow: 0 -8px 0 #333;
        }
    }
    ul{
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        li{
            list-style: none;
            position: relative;
            width: 100%;
            height: 60px;
            padding: 0 10px;
            transition: 0.5s;
            &.active{
                transform: translateX(30px);
                a{
                    .icon{
                        color: #fff;
                        background: var(--clr);
                        &::before{
                            opacity: 0.5;
                        }
                    }
                    .text{
                        color: var(--clr);
                    }
                }
            }
            a{
                position: relative;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                text-align: center;
                text-decoration: none;
                .icon{
                    position: relative;
                    display: block;
                    min-width: 55px;
                    height: 55px;
                    line-height: 60px;
                    transition: 0.5s;
                    border-radius: 10px;
                    font-size: 1.75em;
                    color: #222;
                    &::before{
                        content: "";
                        position: absolute;
                        top: 10px;
                        left: 0px;
                        width: 100%;
                        height: 100%;
                        background: var(--clr);
                        filter: blur(8px);
                        opacity: 0;
                        transition: 0.5s;
                    }
                }
                .text{
                    position: relative;
                    padding: 0 15px;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    color: #333;
                    opacity: 0;
                    visibility: hidden;
                    transition: 0.5s;
                }
            }
        }
    }
    &.open .menuToggle::before{
        transform: translateY(0px) rotate(45deg);
    }
    &.open{
        width: 250px;
    }
    &.open .menuToggle::after{
        transform: translateY(0px) rotate(-45deg);
        box-shadow: 0 0 0 #333;
    }
    &.open ul li.active{
        transform: translateX(15px);
    }
    &.open ul li a .text{
        opacity: 1;
        visibility: visible;
    }
}

我尝试修改SCSS文件并添加代码片段，但因自身经验有限未能修复问题。

内容的提问来源于stack exchange，提问作者SandroFlex