@if $useTopNavbarComponent == true {
    .TopNavBar {
        @extend .align-center-y;
        @extend .width-100;
        @extend .bg-white;
        @extend .pad-#{$gap-val}-x;
    }
    // Nav Buttons
    .tnb-nav {
        @extend .align-center-y;
        @extend .mar-#{$gap-val}-l;
        &.underline-items {
            .tnb-nav-item {
                @extend .underline-effect;
                @extend .hover;
            }
        }
    }
    .tnb-nav-item {
        @extend .mar-25-r;
        @extend .relative;
        @extend .fc-black-lighten;
        @extend .mar-0-last;
        &.active {
            > .tnb-nav-link {
                &:after {
                    @extend .width-50;
                }
            }
        }
    }
    .tnb-nav-link {
        color: inherit;
    }

    // Nav Management
    .tnb-mng {
        @extend .mar-auto-l;
        > :first-child {
            @extend .align-center-y;
            span {
                @extend .mar-10-r;
            }
            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid $colorWhite;
                vertical-align: middle;
            }
        }
    }

    // MOBİLE
    .tnb-mob-btn {
        display: none;
        @extend .absolute;
        top: 40px;
        transform: translateY(-50%);
        left: $gap-px;
        z-index: 9999;
        transition: all 300ms ease-out;
        &.active {
            @extend .pad-10;
            @extend .bg-black-lighten;
            border-radius: 50%;
            transform: translateY(-50%) translateX(-50%);
            > i {
                @extend .fc-white;
                &:before {
                    content: '\f00d';
                }
            }
        }
        > i {
            font-size: 24px;
        }
    }
    .tnb-mob-nav {
        @extend .absolute;
        @extend .left-0;
        @extend .top-0;
        height: 100vh;
        @extend .width-100;
        background-color: rgba(0, 0, 0, .6);
        z-index: -1;
        opacity: 0;
        overflow: hidden;
        &.active {
            opacity: 1;
            z-index: 9998;
            transition: all 300ms linear;
            > .tnb-mob-nav-content {
                transform: translateX(0);
                transition: all 300ms ease-out;
            }
        }
        &.leave {
            opacity: 0;
            transition: all 300ms linear;
            z-index: 9999;
        }
    }
    .tnb-mob-nav-content {
        width: 85%;
        @extend .height-100;
        background-color: $colorWhiteDarkest;
        transform: translateX(100%);
        transition: all 150ms ease-in;
        @extend .right-0;
        @extend .absolute;
        overflow-y: auto;
        overflow-x: hidden;
        h1 {
            @extend .align-center;
            @include padding(25, 10);
            @extend .fc-white;
            @extend .bg-black-lighten;
            border-bottom: 1px solid $colorWhiteDarkest;
        }
    }
    .tnb-mob-nav-item {
        border-left: 3px solid $colorWhiteDarkest;
        a {
            @include font("white", md, 400, first);
            display: block;
            @include padding(20, 15);
            transition: 250ms all linear;
        }
        > ul {
            display: none;
            @extend .pad-15-l;
            a {
                @extend .pad-15-y;
                &:hover {
                    text-indent: 5px;
                    @extend .fc-first;
                }
            }
        }
        &.is-plus {
            > a {
                @extend .relative;
                &:before {
                    content: '+';
                    @extend .transform-center-y;
                    @extend .right-0;
                    @extend .pad-20-r;
                    @include font("lightest", lg, 700);
                }
            }
        }
        &.is-plus.active {
            > a {
                &:before {
                    content: '-';
                }
            }
        }
        &:hover {
            border-left: 3px solid $colorFirst;
            @extend .bg-black-lighten;
            > a {
                text-indent: 5px;
            }
        }
    }
    .tnb-mob-active-body {
        height: 100vh !important;
        overflow: hidden !important;
    }
}

