Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
const { g, p } = useContentInjected()
|
|
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
brandProps?: any
|
|
linkProps?: any
|
|
homeProps?: any
|
|
mobileProps?: any
|
|
}>()
|
|
|
|
const classes = useStyling(
|
|
'scaffoldSimpleHeader',
|
|
{
|
|
slots: {
|
|
background: 'w-full h-full',
|
|
container: 'flex',
|
|
brand: 'relative grow flex items-center min-w-0',
|
|
brandHome: 'hidden md:flex',
|
|
brandMobile: 'md:hidden',
|
|
navigation: 'flex items-center shrink-0',
|
|
navigationList: 'flex items-center',
|
|
navigationItem: 'hidden md:flex',
|
|
navigationLink: '',
|
|
separatorItem: 'hidden md:flex self-stretch items-center',
|
|
separator: 'px-0 h-[60%]',
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<XScaffoldContent id="header">
|
|
<template #background>
|
|
<div :class="classes.background" />
|
|
</template>
|
|
|
|
<div :class="classes.container">
|
|
<div :class="classes.brand">
|
|
<XScaffoldHomeButton :class="classes.brandHome" v-bind="props.homeProps" />
|
|
<XScaffoldMobileMenuOpenButton :class="classes.brandMobile" v-bind="props.mobileProps" />
|
|
<XScaffoldHeaderBrand v-bind="props.brandProps" />
|
|
</div>
|
|
|
|
<nav :class="classes.navigation">
|
|
<ul :class="classes.navigationList">
|
|
<li :class="classes.navigationItem" v-for="page in g.scaffold.pages">
|
|
<XText
|
|
:class="classes.navigationLink"
|
|
as="link"
|
|
:text="page.text"
|
|
:link-props="{ to: p(page.link) }"
|
|
v-bind="props.linkProps"
|
|
:margin="false"
|
|
/>
|
|
</li>
|
|
|
|
<li :class="classes.separatorItem" v-if="$slots.locale || $slots.variant">
|
|
<USeparator :class="classes.separator" orientation="vertical" />
|
|
</li>
|
|
|
|
<li v-if="$slots.locale">
|
|
<slot name="locale" />
|
|
</li>
|
|
|
|
<li v-if="$slots.variant">
|
|
<slot name="variant" />
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</XScaffoldContent>
|
|
</template>
|