traxxx/assets/components/expand/expand.vue

<template>
	<div>
		<div
			v-show="expanded"
			class="expand-button expanded noselect"
			@click="$emit('expand', false)"
		><Icon icon="arrow-up3" /></div>

		<div
			v-show="!expanded"
			class="expand-button noselect"
			@click="$emit('expand', true)"
		><Icon icon="arrow-down3" /></div>
	</div>
</template>

<script>
export default {
	props: {
		expanded: {
			type: Boolean,
			default: false,
		},
	},
};
</script>

<style lang="scss" scoped>
.expand-button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem;

	.icon {
		fill: var(--shadow);
	}

	&:hover {
		cursor: pointer;
		background: var(--shadow-hint);

		.icon {
			fill: var(--text);
		}
	}
}

.expand-dark {
	.icon {
		fill: var(--lighten);
	}

	&:hover {
		background: var(--lighten-hint);

		.icon {
			fill: var(--text-light);
		}
	}
}
</style>