felixarntz/theme-boilerplate

.site-navbar {
    position: relative;
    color: $color__text-navbar;
    background-color: $color__background-navbar;

    a {
        color: $color__link-navbar;

        &:visited {
            color: $color__link-navbar-visited;
        }

        &:hover,
        &:focus,
        &:active {
            color: $color__link-navbar-hover;
        }
    }

    &.site-component > .site-component-inner {
        min-height: 5rem;
    }

    &.site-component.is-flex {
        > .site-component-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        @media screen and (min-width: $site_breakpoint) {
            .site-navigation {
                flex: 1;
            }

            .site-navigation-content {
                display: flex;
                justify-content: space-between;
            }
        }
    }

    &.site-component.is-flex.centered {
        > .site-component-inner {
            justify-content: center;
        }

        @media screen and (min-width: $site_breakpoint) {
            .site-navigation-content {
                justify-content: center;
            }
        }
    }

    .site-branding.sticky-content {
        display: none;

        body.scrolled-past-header-site-branding & {
            display: block;
        }
    }

    .site-branding:first-child {
        text-align: left;
    }

    .site-branding:last-child {
        text-align: right;
    }

    .site-navigation-content {
        @media (min-width: $site_breakpoint) {
            > * {
                padding-right: $padding_horizontal;
                padding-left: $padding_horizontal;

                &:first-child {
                    padding-left: 0;
                }

                &:last-child {
                    padding-right: 0;
                }
            }
        }
    }

    .site-navigation-extra {
        margin-top: $spacing_vertical;

        @media (min-width: $site_breakpoint) {
            margin-top: 0;
        }
    }

    .site-navbar-toggle {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 100;
        display: none;
        width: $site_navbar-vertical-width-collapsed;
        background-color: rgba(0, 0, 0, 0.065);

        &:hover,
        &:focus {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .icon-close {
            display: none;
        }

        .toggle-text {
            display: block;
            transform: rotate(90deg);
            transform-origin: center;
        }
    }

    body.navbar-left &,
    body.navbar-right & {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 10000;
        overflow-x: hidden;
        overflow-y: auto;
        width: $site_navbar-vertical-width;

        .site-navbar-toggle {
            display: block;

            @media (min-width: $site_breakpoint) {
                display: none;
            }
        }

        .js &,
        .amp & {
            width: $site_navbar-vertical-width-collapsed;

            @media (min-width: $site_breakpoint) {
                width: $site_navbar-vertical-width;
            }

            > .site-component-inner {
                display: none;

                @media screen and (min-width: $site_breakpoint) {
                    display: block;
                }
            }

            &.toggled {
                width: $site_navbar-vertical-width;

                > .site-component-inner {
                    display: block;

                    @media screen and (min-width: $site_breakpoint) {
                        display: block;
                    }
                }

                .site-navbar-toggle .icon-close {
                    display: inline-block;
                }

                .site-navbar-toggle .icon-bars {
                    display: none;
                }
            }
        }
    }

    body.navbar-left & {
        left: 0;

        > .site-component-inner {
            padding-right: ($padding_horizontal + $site_navbar-vertical-width-collapsed);

            @media (min-width: $site_breakpoint) {
                padding-right: $padding_horizontal;
            }
        }

        .js &,
        .amp & {
            .site-navbar-toggle {
                left: 0;
            }

            &.toggled .site-navbar-toggle {
                left: ($site_navbar-vertical-width - $site_navbar-vertical-width-collapsed);
            }
        }
    }

    body.navbar-right & {
        right: 0;

        > .site-component-inner {
            padding-left: ($padding_horizontal + $site_navbar-vertical-width-collapsed);

            @media (min-width: $site_breakpoint) {
                padding-left: $padding_horizontal;
            }
        }

        .js &,
        .amp & {
            .site-navbar-toggle {
                right: 0;
            }

            &.toggled .site-navbar-toggle {
                right: ($site_navbar-vertical-width - $site_navbar-vertical-width-collapsed);
            }
        }
    }

    body.admin-bar.navbar-left &,
    body.admin-bar.navbar-right & {
        &,
        .site-navbar-toggle {
            top: 46px;

            @media (min-width: 783px) {
                top: 32px;
            }
        }
    }

    .js & .site-navigation,
    .amp & .site-navigation {
        .site-navigation-content {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            z-index: 2;
            display: none;
            padding: $padding_vertical (0.5 * $padding_horizontal);
            background-color: $color__background-navbar;

            .site-navigation-extra {
                padding: 0 (0.5 * $padding_horizontal);
            }

            @media screen and (min-width: $site_breakpoint) {
                position: static;
                display: flex;
                padding: 0;

                .site-navigation-extra {
                    padding: 0;
                }
            }
        }

        &.toggled {
            .site-navigation-content {
                display: block;

                @media screen and (min-width: $site_breakpoint) {
                    display: flex;
                }
            }
        }
    }

    body.navbar-left & .site-navigation,
    body.navbar-right & .site-navigation {
        ul.menu {
            display: block;

            @media screen and (min-width: $site_breakpoint) {
                > li {
                    display: block;
                }
            }
        }
    }

    .js body.navbar-left & .site-navigation,
    .js body.navbar-right & .site-navigation,
    .amp body.navbar-left & .site-navigation,
    .amp body.navbar-right & .site-navigation {
        a {
            padding: (0.5 * $padding_vertical) 0;
        }

        .site-navigation-content {
            position: static;
            padding: $padding_vertical 0;

            @media screen and (min-width: $site_breakpoint) {
                display: block;
            }
        }

        &.toggled {
            .site-navigation-content {
                display: block;

                @media screen and (min-width: $site_breakpoint) {
                    display: block;
                }
            }

            ul.menu {
                display: block;
            }
        }

        ul.menu {
            display: none;

            @media screen and (min-width: $site_breakpoint) {
                display: block;
            }
        }
    }
}

body.navbar-left .site {
    margin-left: $site_navbar-vertical-width-collapsed;

    @media (min-width: $site_breakpoint) {
        margin-left: $site_navbar-vertical-width;
    }
}

body.navbar-right .site {
    margin-right: $site_navbar-vertical-width-collapsed;

    @media (min-width: $site_breakpoint) {
        margin-right: $site_navbar-vertical-width;
    }
}