wagtail/client/scss/components/_main-nav.scss

.nav-wrapper {
    position: relative;
    margin-left: -$menu-width;
    width: $menu-width;
    float: left;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: $nav-grey-1;

    .inner {
        background: $nav-grey-1;

        @include media-breakpoint-up(sm) {
            // On medium, make it possible for the nav links to scroll.
            display: flex;
            flex-flow: column nowrap;
        }
    }
}

.nav-toggle.icon {
    position: absolute;
    padding-left: $mobile-nice-padding;
    cursor: pointer;

    &:before {
        position: relative;
        top: 3px;
        font-size: 40px;
        color: $color-white;
        line-height: 40px;
        content: '\2261';
    }
}

.nav-main {
    ul,
    li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    li {
        @include transition(border-color 0.2s ease);
        position: relative;
    }

    a {
        @include transition(border-color 0.2s ease);
        -webkit-font-smoothing: auto;
        text-decoration: none;
        display: block;
        color: $color-menu-text;
        padding: 0.8em 1.7em;
        font-size: 1em;
        font-weight: normal;
        // Note, font-weights lower than normal,
        // and font-size smaller than 1em (80% ~= 12.8px),
        // makes the strokes thinner than 1px on non-retina screens
        // making the text semi-transparent
        &:hover,
        &:focus {
            background-color: $nav-item-hover-bg;
            color: $color-white;
            text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
        }
    }

    .menu-item a {
        position: relative;
        white-space: nowrap;
        border-left: 3px solid transparent;

        &:before {
            font-size: 1rem;
            vertical-align: -15%;
            margin-right: 0.5em;
        }

        // only really used for spinners and settings menu
        &:after {
            font-size: 1.5em;
            margin: 0;
            position: absolute;
            right: 0.5em;
            top: 0.5em;
            margin-top: 0;
        }

    }

    .menu-active {
        background: $nav-item-active-bg;
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);

        > a {
            border-left-color: $color-salmon;
            color: $color-white;
        }
    }

    .footer-submenu {
        a {
            border-left: 3px solid transparent;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:before {
                font-size: 1rem;
                margin-right: 0.5em;
                vertical-align: -10%;
            }
        }
    }

    .account {
        display: none;
    }

    *:focus {
        @include show-focus-outline-inside;
    }
}

.icon--menuitem {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.25em;
    vertical-align: text-top;
}

.icon--submenu-trigger {
    // The menus are collapsible on desktop only.
    display: none;
    @include media-breakpoint-up(sm) {
        display: block;
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        top: 0.8125em;
        right: 0.5em;
        @include transition(transform 0.3s ease);

        .menu-item.submenu-active & {
            transform-origin: 50% 50%;
            transform: rotate(180deg);
        }
    }
}

.icon--submenu-header {
    display: block;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 0.8em;
    opacity: 0.15;
}

.nav-submenu {
    background: $nav-submenu-bg;

    h2 {
        display: none;
    }

    .menu-item a {
        white-space: normal;
        padding: 0.9em 1.7em 0.9em 4.5em;

        &:before {
            margin-left: -1.5em;
        }

        .icon--menuitem {
            margin-left: -1.75em;
        }

        &:hover {
            background-color: rgba(100, 100, 100, 0.2);
        }
    }

    li {
        border: 0;
    }

    &__footer {
        margin: 0;
        padding: 0.9em 1.7em;
        text-align: center;
        color: $color-menu-text;
    }
}

.nav-search {
    position: relative;
    padding: 0 1em 1em;
    margin: 0;
    width: 100%;
    box-sizing: border-box;

    label {
        @include visuallyhidden();
    }

    input,
    button {
        border-radius: 0;
        font-size: 1em;
        border: 0;
    }

    input {
        cursor: pointer;
        border: 1px solid $nav-search-border;
        background-color: $nav-search-bg;
        color: $nav-search-color;
        padding: 0.8em 2.5em 0.8em 1em;
        font-weight: 600;

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

        &:active,
        &:focus {
            background-color: $nav-search-focus-bg;
            color: $nav-search-focus-color;
        }

        &::placeholder {
            color: $color-menu-text;
        }
    }

    button {
        background-color: transparent;
        position: absolute;
        top: 0;
        right: 1em;
        bottom: 0;
        padding: 0;
        width: 3em;

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

        &:active {
            background-color: $nav-item-active-bg;
        }

        &:before {
            font-family: wagtail;
            font-weight: 200;
            text-transform: none;
            content: map-get($icons, 'search');
            display: block;
            height: 100%;
            line-height: 3.3em;
            padding: 0 1em;
        }
    }
}

// Navigation open condition
body.nav-open {
    .wrapper {
        transform: translate3d($menu-width, 0, 0);
    }

    .content-wrapper {
        position: fixed;
    }

    footer {
        bottom: 1px;
    }
}

// Explorer open condition, widens navigation area
body.explorer-open {
    .wrapper {
        transform: translate3d($menu-width-max, 0, 0);
    }

    .nav-wrapper {
        margin-left: -$menu-width-max;
        width: $menu-width-max;
    }

    .nav-main {
        display: none;
    }
}

@include media-breakpoint-up(sm) {
    .wrapper,
    body.nav-open .wrapper {
        transform: none;
        padding-left: $menu-width;
    }

    .nav-wrapper {
        // height and position necessary to force it to 100% height of screen (with some JS help)
        position: absolute;
        left: 0;
        height: 100%;
        margin-left: 0;

        .inner {
            height: 100%;
            position: fixed;
            width: $menu-width;
            z-index: $nav-wrapper-inner-z-index;
        }
    }

    .nav-toggle {
        display: none;
    }

    .nav-main {
        overflow: auto;
        margin-bottom: $nav-footer-closed-height;
        @include transition(margin-bottom 0.2s ease);

        .footer {
            position: fixed;
            width: $menu-width;
            bottom: 0;
            background-color: $nav-footer-submenu-bg;
        }

        .footer-submenu {
            @include transition(max-height 0.2s ease);
            max-height: 0;
        }

        &--open-footer {
            margin-bottom: $nav-footer-open-height;

            .footer-submenu {
                max-height: $nav-footer-submenu-height;
            }
        }

        .account {
            @include clearfix;
            background: $nav-footer-account-bg;
            color: $color-menu-text;
            text-transform: uppercase;
            display: block;
            cursor: pointer;

            &:hover {
                background-color: rgba(100, 100, 100, 0.15);
                color: $color-white;
                text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
            }

            .avatar {
                float: left;
                margin-right: 0.9em;

                &:before {
                    color: inherit;
                    border-color: inherit;
                }
            }

            em {
                box-sizing: border-box;
                padding-right: 1.8em;
                margin-top: 1.2em;
                font-style: normal;
                font-weight: 700;
                width: 110px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                float: left;

                &:after {
                    font-size: 1.5em;
                    position: absolute;
                    right: 0.25em;
                }
            }
        }
    }

    .nav-submenu {
        transform: translate3d(0, 0, 0);
        position: fixed;
        height: 100vh;
        width: 0;
        padding: 0;
        top: 0;
        left: $menu-width;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        h2,
        &__list {
            width: $menu-width;
        }

        h2 {
            display: block;
            padding: 0.2em 0;
            font-size: 1.2em;
            font-weight: 500;
            text-transform: none;
            text-align: center;
            color: $color-menu-text;

            &:before {
                font-size: 4em;
                display: block;
                text-align: center;
                margin: 0 0 0.2em;
                width: 100%;
                opacity: 0.15;
            }
        }

        &__list {
            overflow: auto;
            flex-grow: 1;
        }

        &__footer {
            line-height: $nav-footer-closed-height;
            padding: 0;
        }

    }

    li.submenu-active {
        background: $nav-submenu-bg;

        > a {
            text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);

            &:hover {
                background-color: transparent;
            }
        }

        .nav-submenu {
            @include transition(width 0.2s ease);
            box-shadow: 2px 0 2px rgba(0, 0, 0, 0.35);
            width: $menu-width;

            a {
                padding-left: 3.5em;
            }
        }
    }

    body.nav-open {
        .content-wrapper {
            position: relative;
        }
    }

    body.explorer-open {
        overflow: hidden;

        &:after {
            opacity: 1;
            visibility: visible;
        }

        .wrapper {
            transform: none;
        }

        .nav-wrapper {
            margin-left: 0;
            width: $menu-width;
        }

        .nav-main {
            display: block;
        }
    }
}

///////////////
// Z-indexes //
///////////////
.nav-toggle {
    z-index: 5;
}

.nav-wrapper {
    z-index: 2;
}

// Avoiding a stacking context for the content-wrapper saves us a world
// of pain when dealing with overlays that are appended to the end of
// <body>, eg Hallo & calendars. As long as content-wrapper remains floated,
// the z-index shouldn't be required.

// .content-wrapper {
// z-index: 3;
// }
.nav-submenu {
    z-index: 6;
}

footer,
.logo {
    z-index: 100;
}

@include media-breakpoint-up(sm) {
    .nav-main {
        .footer {
            z-index: 2;
        }
    }

    .nav-submenu {
        z-index: 500;
    }

    // Allows overspill of messages banner onto left menu, but also explorer
    // to spill over main content
    .nav-wrapper {
        z-index: auto;
    }

    // footer is z-index: 100, so ensure the navigation sits on top of it.
    .nav-wrapper.submenu-active {
        z-index: 200;
    }
}


///////////////////////
// Media query hacks //
///////////////////////

// to detect IE10+ which doesn't support 3d transform of static elements and needs a fallback
// stylelint-disable scss/media-feature-value-dollar-variable
@media all and (-ms-high-contrast: none),
    all and (-ms-high-contrast: active) {
    .wrapper {
        @include transition(left 0.2s ease);
        left: 0;
    }

    body.nav-open {
        .wrapper {
            transform: none;
            left: $menu-width;
            position: relative;
        }
    }

    body.explorer-open {
        .wrapper {
            transform: none;
            left: $menu-width-max;
        }

        .nav-wrapper {
            width: $menu-width-max;
        }
    }
}

@media all and (min-width: breakpoint-min(sm)) and (-ms-high-contrast: none),
    all and (min-width: breakpoint-min(sm)) and (-ms-high-contrast: active) {
    body.explorer-open {
        .wrapper {
            left: 0;
        }

        .nav-wrapper {
            width: $menu-width;
        }
    }
}