responsive-navbar-with-dropdown-vue

AccountDropdown.vue

<template>
    <div class="relative">
        <button @click="isOpen = !isOpen" class="relative z-10 block w-10 h-10 rounded-full overflow-hidden border-2 border-gray-600 focus:outline-none focus:border-white">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Your avatar">
        </button>
        <button v-if="isOpen" @click="isOpen = false" tabindex="-1" class="fixed inset-0 w-full h-full cursor-default"></button>
        <div v-if="isOpen" class="absolute right-0 w-48 mt-1 py-2 bg-white rounded-lg shadow-md">
            <p class="block px-4 pb-2 text-gray-800 text-lg font-semibold border-b">{{ this.username }}</p>
            <a href="#" class="block px-4 mt-0 py-2 text-gray-800 hover:bg-secondary-600 hover:text-white">Account settings</a>
            <a :href="logoutRoute" class="block px-4 py-2 text-gray-800 hover:bg-secondary-600 hover:text-white"
               onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                Sign out
            </a>

            <form id="logout-form" :action="logoutRoute" method="POST" class="hidden">
                <slot></slot>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AccountDropdown",
        props: {
            logoutRoute: String,
            username: String
        },
        data() {
            return {
                isOpen: false
            };
        },
        created() {
            const handleEscape = (e) => {
                if (e.key === 'Esc' || e.key === 'Escape') {
                    this.isOpen = false
                }
            }
            document.addEventListener('keydown', handleEscape)

            this.$once('hook:beforeDestroy', () => {
                document.removeEventListener('keydown', handleEscape)
            })
        }
    }
</script>

Navbar.vue

<template>
    <header class="bg-secondary-700 sm:flex sm:justify-between sm:items-center sm:px-4 md:px-10 lg:px-16">
        <div class="flex justify-between items-center px-4 sm:p-0">
            <div>
                <a href="/" class="h-full flex justify-start items-center">
                    <svg class="w-16 h-16 fill-current text-primary-600"
                         style=""
                         xmlns:svg="http://www.w3.org/2000/svg"
                         xmlns="http://www.w3.org/2000/svg"
                         id="svg5"
                         viewBox="0 0 1222 1222"
                         height="1222"
                         width="1222"
                         version="1.1">
                        <g
                            transform="matrix(1.0012687,0,0,1.0001782,605.68779,588.919)"
                            id="document">
                            <path
                                id="path2"
                                d="m 322.814,-174.112 c -73.454,0 -142.168,30.803 -189.557,78.1924 C 91.7911,-249.935 -50.3767,-364.854 -217.424,-364.854 c -200.22,0 -362.528,162.309 -362.528,362.52823 0,200.21977 162.308,361.34277 362.528,361.34277 h 540.238 c 148.091,0 267.749,-119.657 267.749,-267.7489 0,-148.0915 -119.658,-265.3801 -267.749,-265.3801 z M -378.973,5.30574 C -286.63,97.648 -137.044,97.648 -44.702,5.3057 L -2.91813,47.0895 C -118.241,162.413 -305.433,162.413 -420.756,47.0896 Z" />
                        </g>
                    </svg>
                    <p class="text-white ml-2 text-3xl leading-none">mercega</p>
                </a>
            </div>
            <div class="sm:hidden">
                <button @click="isOpen = !isOpen" type="button" class="block text-gray-500 hover:text-white focus:text-white focus:outline-none">
                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
                        <path v-if="isOpen" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
                        <path v-if="!isOpen" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                    </svg>
                </button>
            </div>
        </div>

        <nav :class="isOpen ? 'block' : 'hidden'" class="sm:block">
            <div class="px-2 pt-2 pb-4 sm:flex sm:items-center sm:p-0">
                <a href="#" class="block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">List your property</a>
                <a href="#" class="mt-1 sm:mt-0 sm:ml-2 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Trips</a>
                <a href="#" class="mt-1 sm:mt-0 sm:ml-2 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800">Messages</a>
                <account-dropdown class="hidden sm:block sm:ml-6" :logout-route="logoutRoute" :username="username">
                    <slot></slot>
                </account-dropdown>
            </div>
            <div class="px-4 py-5 border-t border-gray-800 sm:hidden">
                <div class="flex items-center">
                    <img class="w-10 h-10 border-2 border-gray-600 rounded-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Your avatar">
                    <span class="ml-3 font-semibold text-white">{{ username }}</span>
                </div>
                <div class="mt-4">
                    <a href="#" class="block text-gray-400 hover:text-white">Account settings</a>
                    <a :href="logoutRoute" class="mt-2 block text-gray-400 hover:text-white"
                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        Sign out
                    </a>

                    <form id="logout-form" :action="logoutRoute" method="POST" class="hidden">
                        <slot></slot>
                    </form>
                </div>
            </div>
        </nav>
    </header>
</template>

<script>
    export default {
        name: "Navbar",
        props: {
            logoutRoute: String,
            username: String
        },
        data() {
            return {
                isOpen: false
            };
        }
    }
</script>