sidebar-test-repo/style.scss

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
}

section.sidebar {
    width: 320px;
    background-color: #f8f9fa;
    border-left: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
}

// ----------------------------------------------------------------------------------

$text-color: #1f1f1f;
$border-color: #cdcdcd;
$subnav-indent: 10px;
$icon-width: 50px;
$level-one-indent: $icon-width;
$border-img: url("../img/border.png");
$dot-img: url("../img/dot.png");

$border-width: 20px;
$border-margin-right: 15px;

@mixin variable-left-border-connector($indent) {
    :not(:last-of-type) li {
        position: relative;
        &::before {
            content: " ";
            width: $border-width;
            height: 100%;
            position: absolute;
            top: 0;
            left: $indent;
            margin-right: $border-margin-right;
            background-image: $border-img;
            background-repeat: repeat-y;
            background-position: top center;
        }
    }
}

nav.main {
    li {
        border-bottom: 1px solid $border-color;
        &:first-of-type {
            border-top: 1px solid $border-color;
        }
    }

    li > a {
        display: block;
        padding: 15px 0;
        text-decoration: none;
        color: $text-color;
        &:hover {
            background-color: rgba($text-color, 0.03);
        }
    }

    // level 0: main items
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        > li {
            a.icon {
                position: relative;
                padding-left: $icon-width;

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: $icon-width;
                    height: 100%;
                    background-position: center center;
                    background-size: 22px 22px;
                    background-repeat: no-repeat;
                }

                &.icon-dashboard::before {
                    background-image: url("/img/menu-icons/dashboard.svg");
                }
                &.icon-machines::before {
                    background-image: url("/img/menu-icons/machines.svg");
                }
                &.icon-events::before {
                    background-image: url("/img/menu-icons/events.svg");
                }
                &.icon-reports::before {
                    background-image: url("/img/menu-icons/reports.svg");
                }
                &.icon-call-center::before {
                    background-image: url("/img/menu-icons/call-center.svg");
                }
                &.icon-warehouse-management::before {
                    background-image: url("/img/menu-icons/dashboard.svg");
                }
            }
        }
    }

    // subnav level 1
    ul.subnav {
        border-top: 1px solid $border-color;
        li {
            // reset parent borders
            border-bottom: none;
            &:first-of-type {
                border-top: none;
            }

            a {
                padding-left: $level-one-indent;
                position: relative;
                &::before {
                    content: " ";
                    width: $border-width;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: $subnav-indent;
                    margin-right: $border-margin-right;
                    background-image: $border-img;
                    background-repeat: no-repeat;
                    background-position: top center;
                }
            }
            // first item: dot + line down
            &:first-of-type {
                > a {
                    &::before {
                        background-image: $border-img, $dot-img;
                        top: 20px; // hardcoded!
                    }
                }
            }
            // last item: dot + line up
            &:last-of-type {
                > a {
                    &::before {
                        background-image: $border-img, $dot-img;
                        background-position: bottom;
                        top: -20px; // hardcoded!
                    }
                }
                // single item: just a dot
                &:first-of-type:last-of-type {
                    &::before {
                        // background-image: none;
                    }
                    > a {
                        &::before {
                            background-image: $dot-img;
                        }
                    }
                }
            }
            @include variable-left-border-connector($subnav-indent * 4);

            // subnav level 2
            > ul {
                li {
                    a {
                        padding-left: $subnav-indent * 7;
                        &::before {
                            left: $subnav-indent * 4;
                        }
                    }
                    @include variable-left-border-connector($subnav-indent * 7);

                    // subnav level 3
                    > ul {
                        li {
                            a {
                                padding-left: $subnav-indent * 10;
                                &::before {
                                    left: $subnav-indent * 7;
                                }
                            }
                            @include variable-left-border-connector($subnav-indent * 10);

                            // subnav level 4
                            > ul {
                                li {
                                    a {
                                        padding-left: $subnav-indent * 13;
                                        &::before {
                                            left: $subnav-indent * 10;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    @include variable-left-border-connector($subnav-indent * 1);
}