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;
}

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

$image-path: "/img"; // image path without trailing slash
$text-color: #1f1f1f;
$border-color: #cdcdcd;
$subnav-indent: 10px;
$icon-width: 60px;
$level-one-indent: $icon-width;
$border-img: url("#{$image-path}/border.png");
$dot-img: url("#{$image-path}/dot.png");
$expand-arrow-height: 18px;
$expand-animation-duration: 0.2s;

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

// menu icons in format "icon class": "svg filename"
// get font awesome icons from https://fontawesome.com/v5/search
$menu-icons: (
    "icon-administration": "administration.svg",
    "icon-call-center": "call-center.svg",
    "icon-contract-center": "contract-center.svg",
    "icon-custom-forms": "custom-forms.svg",
    "icon-dashboard": "dashboard.svg",
    "icon-events": "events.svg",
    "icon-evoca-horeca": "evoca-horeca.svg",
    "icon-fiscal-devices": "fiscal-devices.svg",
    "icon-machines": "machines.svg",
    "icon-menu-arrow": "menu-arrow.svg",
    "icon-reports": "reports.svg",
    "icon-routes": "routes.svg",
    "icon-switch-to-desktop": "switch-to-desktop.svg",
    "icon-switch-to-mobile": "switch-to-mobile.svg",
    "icon-tax-center": "tax-center.svg",
    "icon-technical-center": "technical-center.svg",
    "icon-warehouse-management": "warehouse-management.svg",
);

@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;
        }
    }
}

@mixin reset-single-item-background($li-background-image) {
    &:first-of-type:last-of-type {
        &::before {
            background-image: $li-background-image;
        }
        > a {
            &::before {
                background-image: $dot-img;
            }
        }
    }
}

nav.main {
    li {
        border-bottom: 1px solid $border-color;
        &:first-of-type {
            border-top: 1px solid $border-color;
        }
        > a {
            font-size: 1rem;
            display: block;
            line-height: 55px;
            text-decoration: none;
            color: $text-color;
            &:hover {
                background-color: rgba($text-color, 0.03);
            }
        }
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    // level 0: main items
    > ul > li {
        a.icon {
            position: relative;
            padding-left: $icon-width;
            display: flex;
            align-items: center;

            // main icons
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: -2px;
                width: $icon-width;
                height: 100%;
                background-position: center center;
                background-size: 22px 22px;
                background-repeat: no-repeat;
                filter: opacity(69%); // make icons transparent (black -> grayish)
            }

            // define menu icons
            @each $icon-class, $icon-file in $menu-icons {
                &.#{$icon-class}::before {
                    background-image: url("#{$image-path}/menu-icons/#{$icon-file}");
                }
            }

            // menu arrow
            &::after {
                content: "";
                margin-left: auto;
                width: $expand-arrow-height / 2;
                height: $expand-arrow-height;
                margin-right: 12px;
                background-repeat: no-repeat;
                background-image: url("#{$image-path}/menu-icons/menu-arrow.svg");
                transition: transform $expand-animation-duration;
                transform-origin: 50% 50%;
            }
            &.collapsable:not(.collapsed) {
                &::after {
                    transform: rotate(90deg);
                }
            }
        }
    }

    // subnav level 1
    ul.subnav {
        border-top: 1px solid $border-color;

        &.collapsing {
            -webkit-transition-duration: $expand-animation-duration;
            transition-duration: $expand-animation-duration;
        }

        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: 22px;
                    }
                }
            }
            // last item: dot + line up
            &:last-of-type {
                > a {
                    &::before {
                        background-image: $border-img, $dot-img;
                        background-position: bottom;
                        top: -24px;
                    }
                }
            }
            @include reset-single-item-background(none);
            @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 reset-single-item-background($border-img);
                    @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 reset-single-item-background($border-img);
                        @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);
    }
}