117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<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>
|