wanderhome-quiz-client/client/src/components/navbar/Index.vue

<script>
    import mdiMenu from '@/components/icons/Menu.vue'
    import SvgIcon from '@jamescoyle/vue-icon'
    import Navlink from '@/components/navbar/Navlink.vue'
    import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
    export default {
        name: 'Navbar',
        components: {
            mdiMenu,
            Navlink,
            Menu,
            MenuButton,
            MenuItem,
            MenuItems,
            SvgIcon
        },
        data() {
            return {
                menuActive: false
            }
        },
        methods: {
            toggleMenu() {
                this.menuActive = !this.menuActive
            }
        }
    }

</script>
<template>
    <nav class="fixed bg-olive-900 text-white drop-shadow-xl w-full z-50">
        <div class="flex relative px-2 max-w-5xl mx-auto items-center justify-between">
            <!-- Logo -->
                <router-link class-active="" class="transition-all ease-in-out duration-500 hover:text-orange-300 active:text-orange-500 inline-flex justify-center items-center" to="/">
                    <img src="@/assets/img/cover.png" class="p-2 drop-shadow-2xl rounded-2xl" alt="Site Logo (Wanderhome Cover)" width="50" height="50">
                    <span class="text-m md:text-lg h-fit align-middle p-1"><span class="uncial-antiqua">Wanderhome</span> Quiz | V.S.</span>
                </router-link>
            <!-- Menu Items -->
            <div class="hidden md:flex space-x-3 justify-center items-center">
                <Navlink :svgPath="route.meta.svgPath" :text="route.meta.title" :to="route.path" v-for="route in $router.options.routes.filter( value => value.meta.indexBase >= 0 )" :key="route.path" />
            </div>
            <Menu v-slot="{ open }" as="div" class="relative inline-block text-left md:hidden">
            <div>
            <MenuButton class="inline-flex justify-center w-full rounded-md drop-shadow-sm px-4 py-2 bg-olive-800 text-white hover:bg-olive-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
                <span class="scale-150">
                    <mdiMenu/>
                </span>
            </MenuButton>
            </div>
            <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
            <MenuItems class="origin-top-right absolute right-0 mt-2 p-1 space-y-2 w-56 rounded-md drop-shadow-lg bg-olive-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
                <div class="py-1">
                <MenuItem v-slot="{ active }" v-for="route in $router.options.routes.filter( value => value.meta.indexBase >= 0 )" :key="route.path" >
                    <a :href="route.path" target="_blank" rel="noopener noreferrer" :class="[active ? 'text-orange-300' : 'text-white', 'flex px-4 py-2  active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500']" v-if="route.path.startsWith('http')">
                        <div class="inline-flex px-3 py-1 space-x-1">
                            <span class="scale-75">
                                <svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon>
                            </span>
                            <span>{{ route.meta.title }}</span>
                        </div>
                    </a>
                    <router-link :to="route.path" :class="[active ? 'text-white bg-olive-600' : 'text-white', 'flex px-4 py-2  active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500', this.$route.fullPath == route.path ? 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white' : '']" v-else>
                        <div class="inline-flex px-3 py-1 space-x-1">
                            <span class="scale-75">
                                <svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon>
                            </span>
                            <span>{{ route.meta.title }}</span>
                        </div>
                    </router-link>
                </MenuItem>
                </div>
            </MenuItems>
            </transition>
        </Menu>
        </div>
    </nav>
</template>
<style scoped>
    .menu-toggle {
        cursor: pointer;
        width: 24px;
        height: 24px;
        transition: all 0.3s;
        position: relative;
    }
    .menu-toggle-top, .menu-toggle-middle, .menu-toggle-bottom {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 2px;
        @apply bg-white;
        transform: rotate(0);
        transition: all 0.5s;
    }
    
    .menu-toggle-top {
        transform: translateY(4px);
    }

    .menu-toggle-middle {
        transform: translateY(11px);
    }

    .menu-toggle-bottom {
        transform: translateY(18px);
    }

    .menu-active {
        transform: rotate(90deg) translateY(0px);
    }

    .menu-active .menu-toggle-top {
        transform: rotate(45deg) translateX(6px) translateY(6px);
    }

    .menu-active .menu-toggle-middle {
        display: none;
    }

    .menu-active .menu-toggle-bottom {
        transform: rotate(-45deg) translateX(-6px) translateY(6px);
    }
</style>