133 lines
2.0 KiB
Vue
133 lines
2.0 KiB
Vue
<template>
|
|
<nav class="domains">
|
|
<Link
|
|
v-if="domains.includes('scenes')"
|
|
:href="`${path}/scenes`"
|
|
class="domain domain-scenes nolink"
|
|
:active="domain === 'scenes'"
|
|
>
|
|
<Icon icon="clapboard-play" />
|
|
<span class="domain-label">Scenes</span>
|
|
</Link>
|
|
|
|
<Link
|
|
v-if="domains.includes('actors')"
|
|
:href="`${path}/actors`"
|
|
class="domain domain-actors nolink"
|
|
:active="domain === 'actors'"
|
|
>
|
|
<Icon icon="star" />
|
|
<span class="domain-label">Actors</span>
|
|
</Link>
|
|
|
|
<Link
|
|
v-if="domains.includes('movies')"
|
|
:href="`${path}/movies`"
|
|
class="domain domain-movies nolink"
|
|
:active="domain === 'movies'"
|
|
>
|
|
<Icon icon="movie" />
|
|
<span class="domain-label">Movies</span>
|
|
</Link>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
stash: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
path: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
domains: {
|
|
type: Array,
|
|
default: () => ['scenes', 'actors', 'movies'],
|
|
},
|
|
domain: {
|
|
type: String,
|
|
default: 'scenes',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.domains {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
padding: 0 1rem;
|
|
|
|
&.light .domain,
|
|
&.light .domain {
|
|
color: var(--glass-strong-10);
|
|
|
|
.icon {
|
|
fill: var(--glass-strong-10);
|
|
}
|
|
|
|
&.active,
|
|
&:hover {
|
|
color: var(--primary);
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.domain {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: .75rem 1rem;
|
|
color: var(--highlight-strong-10);
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
|
|
.icon {
|
|
display: none;
|
|
height: 1rem;
|
|
fill: var(--highlight-strong-10);
|
|
}
|
|
|
|
&.active,
|
|
&:hover {
|
|
color: var(--text-light);
|
|
|
|
.icon {
|
|
fill: var(--text-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.domain-actors .icon {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.domains-bar:not(.light) {
|
|
background: var(--grey-dark-50);
|
|
box-shadow: inset 0 0 3px var(--shadow);
|
|
}
|
|
|
|
@media(--small-60) {
|
|
.domains-bar {
|
|
.domain {
|
|
font-size: 0;
|
|
}
|
|
|
|
.domain .icon {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.domain-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|