<script setup lang="ts">
import { usePage } from '@/composables/usePage';

const page = usePage();
const navCategories = page.props.navigation_categories;
</script>

<template>
    <VAppBar
        v-if="page.props.auth.user"
        flat
        :height="37"
        color="surface"
        style="top: 56px"
    >
        <div class="red-rule" />
        <div class="subbar">
            <template v-for="category in navCategories" :key="category.id">
                <a
                    v-if="!category.children?.length"
                    href="#"
                    class="subbar-link"
                >
                    {{ category.title }}
                </a>

                <VMenu v-else open-on-hover location="bottom start" :offset="2">
                    <template #activator="{ props: menuProps }">
                        <a
                            href="#"
                            class="subbar-link"
                            v-bind="menuProps"
                            @click.prevent
                        >
                            {{ category.title }}
                        </a>
                    </template>

                    <VList class="submenu" density="compact" elevation="4">
                        <VListItem
                            v-for="child in category.children"
                            :key="child.id"
                            :title="child.title"
                            href="#"
                            class="submenu-item"
                        />
                    </VList>
                </VMenu>
            </template>
        </div>
    </VAppBar>
</template>

<style scoped lang="sass">
.red-rule
    height: 3px
    background: #C0392B
    width: 100%
    position: absolute
    top: 0
    left: 0
    z-index: 1

.subbar
    width: 100%
    background: #fff
    border-bottom: 1px solid #E8E8E8
    display: flex
    overflow-x: auto
    padding: 0 1.5rem
    position: absolute
    top: 3px
    left: 0

    &::-webkit-scrollbar
        display: none

.subbar-link
    font-family: 'Inter', sans-serif
    font-size: 12px
    color: #666
    text-decoration: none
    padding: 8px 12px
    white-space: nowrap
    border-bottom: 2px solid transparent
    flex-shrink: 0
    cursor: pointer

    &:hover
        color: #111

    &.active
        color: #111
        border-bottom-color: #111

.submenu
    min-width: 160px
    max-width: 240px
    border: 1px solid #E8E8E8
    padding: 4px 0
    background: #fff

.submenu-item
    font-family: 'Inter', sans-serif
    font-size: 13px
    color: #444
    min-height: 32px
    padding: 0 14px

    :deep(.v-list-item-title)
        font-size: 13px

    &:hover
        background: #F7F7F5
        color: #111
</style>
