<template>
    <nav class="nav layout-block">
        <button @click="toggleMenu">Menu</button>

        <router-link to="/search">Search</router-link>
    </nav>
</template>

<script setup>
import useMenu from '@/composables/useMenu'
import { onMounted } from 'vue'

const { menuOpen, closeMenu, openMenu } = useMenu()

const toggleMenu = () => {
    if (menuOpen.value) {
        closeMenu()
    } else {
        openMenu()
    }
}

onMounted(() => {
    // Initialize menu state or perform any other necessary setup
    // Example: Check if the user is logged in and update menu accordingly
    // if (isLoggedIn()) {
    //     openMenu()
    // }
})
</script>

<style lang="scss">
.nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 9px;
    color: var(--grey-100);
}
</style>
