开发第二类侧边栏

div#side-bar{
    padding-right: 1rem;
    padding-left: 0.5rem;
    transition: all 250ms
}
div#side-bar:has(li.sfhover) {
    padding-right:calc(0.8 * var(--sidebar-width-on-desktop));
    transition: all 250ms
}
.side-block:has(ul) {
    width:var(--sidebar-width-on-desktop)
}
#side-bar :is(ul,li,ol){
    list-style:none;
    padding:0;
    margin:0;
}
#side-bar ul {
    position:relative;
    width:var(--sidebar-width-on-desktop)
}
#side-bar ul>li {
    position:relative;
    animation: respire 4s linear;
    -moz-animation: respire 4s linear;
    -webkit-animation: respire 4s linear;
    -o-animation: respire 4s linear;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
}
#side-bar ul>li a {
    position:relative;
    width:calc(var(--sidebar-width-on-desktop) - 4px)
}
#side-bar ul>li>ul {
    background-color: rgb(var(--sideblock-bg-color),.7);
    padding: 0;
    box-shadow: 0 1px 5px rgb(var(--plain-third-color),.9);
    -webkit-backdrop-filter: blur(.5rem);
    backdrop-filter: blur(.5rem)
}
#side-bar ul>li>ul {
    opacity:0;
    list-style: none none;
    position: absolute;
    left: 0;
    width: calc(0.8 * var(--sidebar-width-on-desktop));
    top: 0px;
    margin: 0px;
    margin-left: 100%;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);   
    transition: all 150ms
}
#side-bar ul>li.sfhover>ul {
    opacity:1;
    -webkit-clip-path: polygon(-5% 0, 105% -5%, 105% 105%, -5% 105%);
    clip-path: polygon(-5% 0, 105% -5%, 105% 105%, -5% 105%);
    transition: all 150ms
}
#side-bar ul>li>ul>li {
    width: calc(0.8 * var(--sidebar-width-on-desktop))
}
#side-bar ul>li>ul>li a {
    box-sizing: border-box;
    max-width: calc(0.8 * var(--sidebar-width-on-desktop))
}
#side-bar ul>li a:before {
    --base-font-size: 0.9375rem;
    --clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: var(--clip-path) calc(100% + var(--base-font-size)* .93333);
    content: "";
    transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    width: 1%;
    height: 100%;
    background: rgb(var(--scale-8), 0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#side-bar ul>li a:hover:before {
    background: rgb(var(--bright-primary-color));
    width: 100%;
}