traxxx-web/components/filters/filters.vue

<template>
	<div class="filters-frame">
		<div
			v-show="showFilters"
			class="filters-container"
			:class="{ show: showFiltersCompact }"
			@click="toggleFilters(false)"
		>
			<div class="filters-sidebar">
				<form
					class="filters"
					@submit.prevent
					@click.stop
				>
					<slot />
				</form>

				<button
					v-if="typeof results === 'number'"
					class="button results"
				>Show {{ results }} {{ results > 1 ? 'results' : 'result' }}</button>
			</div>

			<div
				class="filters-toggle close"
				:class="{ 'show-full': showFilters, 'show-compact': showFiltersCompact }"
				@click.stop="toggleFilters(false)"
			>
				<Icon
					icon="arrow-left3"
					class="arrow"
				/>

				<Icon
					icon="cross2"
					class="cross"
				/>
			</div>
		</div>

		<div
			class="filters-toggle open"
			:class="{ 'show-full': !showFilters, 'show-compact': !showFiltersCompact }"
			@click.stop="toggleFilters(true)"
		><Icon icon="filter" /></div>
	</div>
</template>

<script setup>
import { ref } from 'vue';

defineProps({
	results: {
		type: Number,
		default: null,
	},
});

// desktop defaults to open, compact defaults to closed
// we can't measure viewframe in SSR, so use separate toggles
const showFilters = ref(true);
const showFiltersCompact = ref(false);

function toggleFilters(state) {
	showFilters.value = state ?? !showFilters.value;
	showFiltersCompact.value = state ?? !showFiltersCompact.value;
}
</script>

<style scoped>
.filters-frame {
	position: relative;
}

.filters-container {
	display: flex;
	height: 100%;
}

.filters-sidebar {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.filters {
	width: 17rem;
	flex-grow: 1;
	position: relative;
	box-sizing: border-box;
	padding: .5rem 0;
	background: var(--background);
	box-shadow: 0 0 3px var(--shadow-weak-30);

	&::-webkit-scrollbar {
		display: none;
	}
}

.filters-toggle {
	min-width: 1.5rem;
	height: 2rem;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 0 .25rem;
	position: absolute;
	top: .5rem;
	right: -2rem;
	border-radius: 0 .5rem .5rem 0;
	background: var(--background);
	color: var(--shadow);
	font-weight: bold;
	box-shadow: inset 0 0 3px var(--shadow-weak-30);

	&.open {
		left: 0;
		right: auto;
	}

	&.show-full {
		display: flex;
	}

	&.close .cross {
		display: none;
	}

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

	&:hover {
		cursor: pointer;

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

.results {
	display: none;
	justify-content: center;
	background: var(--primary);
	color: var(--text-light);
	border-radius: 0;
}

@media (max-width: 1200px) {
	.filters-container {
		display: none;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background: var(--background-dim);

		&.show {
			display: flex;
		}
	}

	.filters {
		overflow-y: auto;
	}

	.filters-toggle {
		&.show-full {
			display: none;
		}

		&.show-compact {
			display: flex;

			&.close {
				background: var(--grey-light-40);
				position: relative;
				right: 0;
			}
		}

		&.close .cross {
			display: flex;
		}

		&.close .arrow {
			display: none;
		}
	}

	.compact-hide {
		display: none;
	}

	.results {
		display: flex;
	}
}
</style>