Global Navigation Style

spa-global-navigation-style.scss

@import '../../variables.scss';
$mobileFontSize: 1.2rem;

.globalNav {
    z-index: 1200;
    top: 0;
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;

    .NavbarItems {
        background-color: white;
        height: $appTopMargin;
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        top: 0;
        position: fixed;
        margin: 0 auto;
        width: 100%;
        z-index: 200;
    }

    .logo {
        margin-left: 2rem;

        h3 {
            color: $themeColor;
            margin: 0px 0;
            font-size: 1.4rem !important;
            font-weight: 700 !important;

            a {
                color: $themeColor;

                img {
                    width: 40px;
                }
            }
        }
    }

    .navMenu {
        display: grid;
        grid-template-columns: repeat(10, auto);
        list-style: none;
        justify-content: flex-start;
        color: $blue;
        padding: .6rem 0 0 1rem;
        line-height: 30px;

        li {
            margin-right: 20px;
            border-bottom: solid 2px white;
            font-weight: 600;
        }
    }

    .subMenu {
        display: none;
    }

    .secondLevel {
        list-style: none;
        padding-left: 0;
    }

    .parent {
        color: $darkTextColor;

        .icon {
            display: none;
        }
    }

    .parent:hover {
        border-bottom: solid 2px $themeColor;
        transition: border-bottom .1s ease-out;
        color: $darkTextColor;

        .subMenu {
            display: block;
            position: absolute;
            list-style: none;
            padding-left: 0;
            background-color: white;
            min-width: 250px;
            margin-top: 2px;
            border-right: solid 1px lightgray;
            border-left: solid 1px lightgray;
            border-bottom: solid 1px lightgray;

            li {
                padding: 5px;

                &:hover {
                }
            }
        }
    }


    .navLinks {
        text-decoration: none;
        color: $darkTextColor;
        border-bottom: solid 2px white;
        padding-bottom: .5em;
    }

    .navLinks:hover {
        border-radius: 2px;
        color: $darkTextColor;
    }

    .actions {
        margin-right: 5px;
        margin-left: auto;
    }

    .actions:hover {
        color: white;
        border-radius: 2px;
    }

    .navLinksMobile {
        display: none;
    }

    .menuIcon {
        display: none;
    }

    .navbarButtons {
        display: flex;

        .contactButtons {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;

            a {
                color: $themeColor;
                font-size: larger;
                border: solid 1px $themeColor;
                padding: 3px 6px;
                height: 37px;
                text-align: center;
                font-weight: 500;
                border-radius: 3px;

                &:hover {
                    position: relative;
                    box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem -.75rem rgba(22,28,45,.1) !important;
                    -webkit-transition: all 0.3s ease-out;
                    -moz-transition: all 0.3s ease-out;
                    -o-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
                }
            }
        }

        button {
            cursor: pointer;
            border-radius: .375rem;
            margin: 5px;
            font-size: 1.0625rem;
            line-height: 1.6;
            color: white;
            padding: .6rem 1.2rem;
            border: none;

            &:hover {
                color: white;
                position: relative;
                box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem -.75rem rgba(22,28,45,.1) !important;
                -webkit-transition: all 0.3s ease-out;
                -moz-transition: all 0.3s ease-out;
                -o-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .globalNav {
        .logo {
            display: none;
        }

        .NavbarItems {
            position: relative;
            font-size: $mobileFontSize;
        }

        .navMenu {
            display: flex;
            flex-direction: column;
            flex-flow: column;
            width: 75vw;
            position: absolute;
            top: $appTopMargin;
            right: -120%;
            opacity: 1;
            min-height: 100vh;
            justify-content: flex-start;
            padding: 20px 0 0 5px;
            margin-top: 5px;
            min-width: 100vw;
        }

        .navMenu.active {
            background: white;
            left: 0;
            top: $appTopMargin;
            min-height: 100vh;
            opacity: 1;
            z-index: 1000;

            li {
                padding-left: .5rem;
                border-bottom: none;
            }
        }

        .navbarButtons {
            a {
                padding: 0
            }
        }

        .subMenu {
        }

        .parent,
        .parent:hover {
            cursor: pointer;
            background-color: white;
            display: block;
            border: none;
            font-size: $mobileFontSize;

            .icon {
                display: inline;
                font-size: 15px;
                margin-right: 8px;
                color: $blue;
            }

            li {
                border: none;
                font-size: $mobileFontSize;
                color: $themeColor;
            }

            .subMenu {
                display: block;
                list-style: none;
                padding-left: 15px;
                min-width: 250px;
                margin-top: 0px;
                background-color: white;
                position: relative;
                border: none;

                li {
                    padding: 4px;
                    border: none;
                }
            }
        }

        .navLinks {
            text-align: left;
            padding: 0.5rem .5rem;
            display: table;
            color: white;
            border: none;
            color: $darkTextColor;
            font-size: $mobileFontSize;
        }

        .navLinks:active {
            color: $darkTextColor;
            border-radius: 5px;
            padding: 0.5rem .5rem;
            text-decoration: underline;
        }

        .actions {
            color: $black;
        }

        .menuIcon {
            display: block;
            position: absolute;
            font-size: 1.8rem;
            cursor: pointer;
            left: 10px;
            top: 20px;

            img {
                width: 50px;
                height: 50px;
                padding: 10px;
            }
        }
    }
}