141 lines
2.3 KiB
Vue
141 lines
2.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
// desktop and compact have separate open states, because we can't measure the viewport in SSR
|
|
showFull: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showCompact: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
count: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['toggle']);
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
class="filter-toggle nobutton"
|
|
:class="{
|
|
'open-full': showFull,
|
|
'open-compact': showCompact,
|
|
'active': count > 0,
|
|
}"
|
|
@click="emit('toggle')"
|
|
>
|
|
<!-- the media query picks the open state of the current viewport, matching the sidebar's own breakpoint -->
|
|
<Icon
|
|
icon="arrow-left2"
|
|
class="toggle-close"
|
|
/>
|
|
|
|
<Icon
|
|
icon="filter"
|
|
class="toggle-open"
|
|
/>
|
|
|
|
<!-- not filter-count, the filters sidebar has a global style by that name -->
|
|
<span
|
|
v-if="count > 0"
|
|
class="toggle-count"
|
|
>{{ count }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.filter-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .75rem;
|
|
padding: 0 1rem;
|
|
border-radius: 0 .25rem .25rem 0;
|
|
margin-right: 1rem;
|
|
font-weight: bold;
|
|
color: var(--glass-strong-10);
|
|
background: var(--background);
|
|
box-shadow: 0 0 3px var(--shadow-weak-30);
|
|
|
|
.icon {
|
|
fill: var(--glass-strong-10);
|
|
margin: .75rem 0 .75rem 0;
|
|
}
|
|
|
|
&.active {
|
|
padding-right: .75rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--primary);
|
|
cursor: pointer;
|
|
box-shadow: 0 0 3px var(--shadow-weak-20);
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
|
|
.toggle-close {
|
|
display: none;
|
|
}
|
|
|
|
&.open-full {
|
|
.toggle-close {
|
|
display: inline-block;
|
|
}
|
|
|
|
.toggle-open {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-count {
|
|
min-width: 1.25rem;
|
|
height: 1.25rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 0 .25rem;
|
|
border-radius: .625rem;
|
|
background: var(--primary);
|
|
color: var(--text-light);
|
|
font-size: .8rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
@media (--compact) {
|
|
.filter-toggle {
|
|
/* the full mode state doesn't apply in compact mode, matches the specificity of the open-full rule to override it */
|
|
&,
|
|
&.open-full {
|
|
.toggle-close {
|
|
display: none;
|
|
}
|
|
|
|
.toggle-open {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
/* after the reset, so it wins when both states are open */
|
|
&.open-compact {
|
|
.toggle-close {
|
|
display: inline-block;
|
|
}
|
|
|
|
.toggle-open {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|