docs/source/_static/scss/includes/_header.scss

.header {
    height: $header-height;
    background-color: $header-bg;
    display: flex;
    align-items: center;
    box-shadow: 0 0 0.75rem rgba($black, 0.1);
    width: 100%;
    z-index: $z-index-header;
    flex-shrink: 0;
    display: flex;
    align-items: center;

    @extend %content-padding;

    .toggle-icon {
        @include breakpoint-min(breakpoints(lg)) {
            display: none;
        }
    } 

    .toggle-icon--menu {
        margin-left: auto;
    }
}

.logo {
    flex-shrink: 0;
    display: inline-flex;

    @include breakpoint-max(breakpoints(lg)) {
        margin-left: 1rem;
    }

    &>img {
        height: $logo-height;
        box-shadow: none;
    }
}

.nav {
    margin-left: auto;

    @include breakpoint-max(breakpoints(lg)) {
        position: fixed;
        height: 100vh;
        width: $sidebar-width;
        top: 0;
        right: 0;
        transform: translate3d($sidebar-width, 0, 0);
        opacity: 0;
        box-shadow: 0 0 0.8rem rgba($black, 0.1);
        background-color: rgba($white, 0.9925);
        pointer-events: none;
        transition: opacity 400ms, transform 300ms;
        display: flex;
        flex-direction: column;
        padding: 1rem 2rem 2rem;
        height: 100%;
        overflow-y: auto;
    }

    & > .toggle-icon {
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        z-index: 1;
    }
}

.nav-toggled {
    .nav {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: all;
    }
}

.nav__item {
    position: relative;
    font-size: 0.95rem;
    line-height: 100%;
    border-radius: $border-radius-sm;
    cursor: pointer;

    &,
    &:hover {
        color: $nav-color;
    }

    @include breakpoint-min(breakpoints(lg)) {
        padding: 0.4rem 1.2rem 0.55rem;

        &:hover {
            .nav__dropdown {
                opacity: 1;
                pointer-events: all;
            }
        }
    }

    @include breakpoint-max(breakpoints(lg)) {
        padding: 0.85rem 0;
    }

    &:last-child {
        border: 1px solid $theme-red;
        transition: background-color 300ms, color 300ms;
        text-align: center;

        &:hover {
            background-color: $theme-red;
            color: $white;
        }

        @include breakpoint-max(breakpoints(lg)) {
            margin-top: 1rem;
        }
    }
}

a.nav__item {
    &:not(:last-child) {
        &>span {
            position: relative;
            cursor: pointer;

            &:after {
                left: 0;
                bottom: -7px;
                height: 1px;
                width: 100%;
                position: absolute;
                content: "";
                opacity: 0;
                transform: translateY(5px);
                transition: opacity 250ms, transform 250ms;
                background-color: $nav-border-color;
            }
        }

        &.active,
        &:hover {
            &>span {
                &::after {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
        }
    }
}

span.nav__item {
    @include breakpoint-min(breakpoints(lg)) {
        &:after {
            left: 50%;
            margin-left: -12px;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 12px 10px;
            border-color: transparent transparent $white transparent;
            position: absolute;
            bottom: -3px;
            opacity: 0;
            transition: opacity 200ms;
        }

        &:hover {
            &:after {
                opacity: 1;
            }
        }
    }
}

.nav__dropdown {
    @include breakpoint-min(breakpoints(lg)) {
        background-color: $white;
        padding: 1.25rem;
        border-radius: $border-radius;
        box-shadow: 0 -1px 1.25rem rgba($black, 0.13);
        margin-top: 0.3rem;
        width: 24rem;
        transform: translateX(calc(-50% + 2.8rem));
        position: absolute;
        left: 0;
        top: 86%;
        opacity: 0;
        transition: opacity 200ms;
        pointer-events: none;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    @include breakpoint-max(breakpoints(lg)) {
        margin: 1rem (-$content-padding-sm) -0.8rem;
        padding: 0.5rem $content-padding-sm;
        background-color: $nav-dropdown-mobile-bg;
    }
}

.nav__sub {
    display: block;
    text-align: left;
    font-size: 1rem;
    color: $black;
    position: relative;

    @include breakpoint-min(breakpoints(lg)) {
        padding: 1rem;
        border-radius: $border-radius;
        transition: background-color 300ms;

        &:hover {
            background-color: $nav-sub-hover-bg;
            color: $black;
        }
    }

    @include breakpoint-max(breakpoints(lg)) {
        padding: 0.75rem 0;
    }

    &>small {
        display: block;
        font-size: 0.8rem;
        color: lighten($text-muted-color, 5%);
        margin-top: 0.7rem;
        line-height: 1.4;
    }
}

.nav__close {
    position: absolute;
    top: 1.25rem;
    left: -2.7rem;
}

.toggle-icon {
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    border-radius: $border-radius-sm;
    transition: background-color 300ms;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;

    &:hover {
        background-color: $toggle-icon-hover-bg;
    }
}

$toggleIcons: (
    docs: 'docs.svg', 
    close: 'close-circle.svg',
    menu: 'menu.svg',
    toc: 'toc.svg'
);

@each $name, $icon in $toggleIcons {
    .toggle-icon--#{$name} {
        background-image: url(../img/icons/#{$icon});
    }
}