checkScreen & checkScroll

navigation.vue

<template>
    <header :class="{ 'scrolled-nav': scrolledNav }">
        <nav>
            <div class="branding">
                <img src="@/assets/logo.png" alt="" />
            </div>
            <ul class="navigation" v-show="!mobile">
                <li>
                    <router-link class="link" :to="{ name: 'Home' }">
                        Home
                    </router-link>
                </li>
                <li>
                    <router-link class="link" :to="{ name: 'About' }">
                        About
                    </router-link>
                </li>
                <li>
                    <router-link class="link" :to="{ name: 'Portfolio' }">
                        Portfolio
                    </router-link>
                </li>
                <li>
                    <router-link class="link" :to="{ name: 'Contact' }">
                        Contact
                    </router-link>
                </li>
            </ul>
            <div class="icon">
                <i
                    class="fad fa-bars"
                    v-show="mobile"
                    @click="toggleMobileNav"
                    :class="{ 'icon-active': mobileNav }"
                ></i>
            </div>
            <transition name="mobile-nav">
                <ul class="dropdown-nav" v-show="mobileNav">
                    <li>
                        <router-link class="link" :to="{ name: 'Home' }">
                            Home
                        </router-link>
                    </li>
                    <li>
                        <router-link class="link" :to="{ name: 'About' }">
                            About
                        </router-link>
                    </li>
                    <li>
                        <router-link class="link" :to="{ name: 'Portfolio' }">
                            Portfolio
                        </router-link>
                    </li>
                    <li>
                        <router-link class="link" :to="{ name: 'Contact' }">
                            Contact
                        </router-link>
                    </li>
                </ul>
            </transition>
        </nav>
    </header>
</template>

<script>
    export default {
        data() {
            return {
                scrolledNav: null,
                mobile: null,
                mobileNav: null,
                windowWidth: null,
            }
        },
        created() {
            window.addEventListener("resize", this.checkScreen)
            this.checkScreen()
        },
        mounted() {
            window.addEventListener("scroll", this.updateScroll)
        },
        methods: {
            toggleMobileNav() {
                this.mobileNav = !this.mobileNav
            },
            checkScreen() {
                this.windowWidth = window.innerWidth
                if (this.windowWidth <= 750) {
                    this.mobile = true
                    return
                }
                this.mobile = false
                this.mobileNav = false
                return
            },
            updateScroll() {
                const scrollPosition = window.scrollY
                if (scrollPosition > 50) {
                    this.scrolledNav = true
                    return
                }
                this.scrolledNav = false
            }
        },
    }
</script>

<style lang="scss" scoped>
    header {
        background-color: rgba(black, 0.8);
        width: 100%;
        position: fixed;
        z-index: 99;
        transition: 500ms ease all;

        nav {
            display: flex;
            padding: 12px 0;
            width: 90%;
            margin: 0 auto;
            position: relative;

            @media (min-width: 1140px) {
                max-width: 1140px;
            }

            .branding {
                display: flex;
                align-items: center;

                img {
                    width: 50px;
                    transition: 500ms ease all;
                }
            }
            .navigation {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex: 1;

                li {
                    text-transform: uppercase;
                    padding: 16px;
                    margin-left: 16px;

                    .link {
                        border-bottom: 1px solid transparent;
                        color: white;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: 500;
                        padding-bottom: 4px;

                        &:hover {
                            color: #00afea;
                            border-color: #00afea;
                        }
                    }
                }
            }
            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                right: 24px;
                height: 100%;

                i {
                    cursor: pointer;
                    font-size: 24px;
                    transition: 800ms ease all;
                    color: white;
                }
            }
            .icon-active {
                transform: rotate(180deg);
            }
            .dropdown-nav {
                background-color: white;
                max-width: 250px;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                position: fixed;
                top: 0;
                left: 0;

                li {
                    padding: 16px;
                    text-transform: uppercase;

                    .link {
                        color: black;
                    }
                }
            }
            .mobile-nav-enter-active,
            .mobile-nav-leave-active {
                transition: 1s ease all;
            }
            .mobile-nav-enter-from,
            .mobile-nav-leave-to {
                transform: translateX(-250px);
            }
            .mobile-nav-enter-to {
                transform: translateX(0);
            }
        }
    }
    .scrolled-nav {
        background-color: black;
        box-shadow: 0 4px 6px -1px rgba(black, 0.1), 0 2px 4px -1px rgba(black, 0.6);

        nav {
            padding: 8px 0;

            .branding {
                img {
                    width: 40px;
                    box-shadow: 0 4px 6px -1px rgba(black, 0.1),
                        0 2px 4px -1px rgba(black, 0.6);
                }
            }
        }
    }
</style>