Improved scenes and movies meta header layout and responsiveness.

components/filters/toggle.vue

@@ -1,50 +1,140 @@
 <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>
-	<div
-		class="filters-toggle open"
-		@click.stop="emit('toggle')"
-	><Icon icon="filter" /></div>
+	<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>
-.filters-toggle {
-	min-width: 2.75rem;
-	height: 3rem;
-	justify-content: center;
+.filter-toggle {
+	display: flex;
 	align-items: center;
-	padding: 0 .25rem;
-	border-radius: 0 .5rem .5rem 0;
-	background: var(--background);
-	color: var(--glass);
+	gap: .75rem;
+	padding: 0 1rem;
+	border-radius: 0 .25rem .25rem 0;
+	margin-right: 1rem;
 	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;
-	}
+	color: var(--glass-strong-10);
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
 
 	.icon {
-		fill: var(--glass);
+		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>