Navigatie

				
					*********************************/
/***   BREAKPOINTS            ****/
/***   @author Hugo Giraudel  ****/
/*********************************/

$breakpoints: (
  "medium": 767px,
  "large": 1024px
) !default;

///
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin breakpoint($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }

  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}


/*********************/
/*  NAVBAR CENTERED  */
/*********************/

.c-navbar {
    position: relative;

    &__actions {
        position: absolute;
        z-index: 10;
        right: 1rem;
        top: .9em;
        display: flex;
        z-index: 1000;

        a {
            margin-left: .8rem;
            color: #fff;
        }

        @include breakpoint(large) {
            bottom: 1.2rem;
            top: auto;

            a {
                color: inherit;
            }
        }

    }

    &__topbar {
        --color-dark: black;
        background: var(--color-dark);
        color: white;
        height: 64px;

        .row {
            padding: 0 1rem;
        }
    }

    &__menu {
        justify-content: center;
        display: none;

        .menu > li {
            text-align: center;

            &:nth-child(3) {
                margin-right: 48px;
            }

            &:nth-child(4) {
                margin-left: 48px;
            }
        }

        @include breakpoint(large) {
            background: #fff;
            display: flex;
        }
    }

    &__splitmenu {
        display: none;
        @include breakpoint(large) {
            display: flex;
        }
    }

    &__splitmenu-links,
    &__splitmenu-rechts {
        flex: 1 0 50%;

        & > ul {
            display: flex;
            justify-content: space-evenly;
        }
    }

    &__splitmenu-links {
        padding-right: 4rem;
        padding-left: 2rem;
    }

    &__splitmenu-rechts {
        padding-left: 2rem;
        padding-right: 6rem;
    }

    &__idtag {
        position: absolute;
        left: 0;
        right: 0;
        top: .5rem;
        margin: 0 auto;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;

        @include breakpoint(large) {
            width: 120px;
            height: 120px;
        }
    }

    .toggleMenu {
        top: .90rem;
        left: 1rem;

        span {
            background: white;
        }
    }

}




/**********************/
/****  MENU TOGGLE ****/
/**********************/

.toggleMenu {
   
    --color-toggle: var(--color-text);
   
    width: 28px;
    height: 20px;
    display: block;
    position: absolute;
    left: 0;
    
    @include breakpoint(medium) {
        top: 1.4rem;
    }
    
    span {
        position: absolute;
        height: 2px;
        width: 100%;
        background: var(--color-toggle);
        border-radius: 2px;
        transition: .2s;
        transform-origin: left center;
        
        &:nth-child(1) { top: 0;    }
        &:nth-child(2) { top: 8px;  }
        &:nth-child(3) { top: 16px; }        
    }
    
    &:hover {
        span {
            &:nth-child(1) { transform: translateX(-2px);  }
            &:nth-child(2) { transform: translateX(2px);  }
            &:nth-child(3) { transform: translateX(-2px);  }                    
        }
    }
    
    .mobileNav & {
        
        span {
            &:nth-child(1) { transform: rotate(45deg) }
            &:nth-child(2) { top: 12px; transform: translateX(100%); opacity: 0; }
            &:nth-child(3) { top: 20px; transform: rotate(-45deg)}            
        }

    }
 
}