ProjectsMenu.vue

<template>
	<div class="ui menu projects">
		<div class="item">
			<label>
				Modération
			</label>
			<DropdownMenuItem
				:options="moderationOptions"
				v-on="$listeners"
			/>
		</div>
		<div class="item">
			<label>
				Niveau d'autorisation requis
			</label>
			<DropdownMenuItem
				:options="accessLevelOptions"
				v-on="$listeners"
			/>
		</div>
		<div class="item">
			<label>
				Mon niveau d'autorisation
			</label>
			<DropdownMenuItem
				:options="userAccessLevelOptions"
				v-on="$listeners"
			/>
		</div>
		<div class="right item">
			<search-projects />
		</div>
	</div>
</template>

<script>

import DropdownMenuItem from '@/components/Projects/DropdownMenuItem.vue';
import SearchProjects from '@/components/Projects/SearchProjects.vue';

export default {
	name: 'ProjectsMenu',

	components: {
		DropdownMenuItem,
		SearchProjects,
	},

	data() {
		return {
			moderationOptions: [
				{
					label: 'Tous',
					filter: 'moderation',
					value: null
				},
				{
					label: 'Projet modéré',
					filter: 'moderation',
					value: 'true'
				},
				{
					label: 'Projet non modéré',
					filter: 'moderation',
					value: 'false'
				},
			],
			accessLevelOptions: [
				{
					label: 'Tous',
					filter: 'access_level',
					value: null
				},
				{
					label: 'Utilisateur connecté',
					filter: 'access_level',
					value: 'logged_user'
				},
				{
					label: 'Contributeur',
					filter: 'access_level',
					value: 'contributor'
				},
				{
					label: 'Modérateur',
					filter: 'access_level',
					value: 'moderator'
				},
				{
					label: 'Administrateur projet',
					filter: 'access_level',
					value: 'admin'
				},
			],
			userAccessLevelOptions: [
				{
					label: 'Tous',
					filter: 'user_access_level',
					value: null
				},
				{
					label: 'Utilisateur connecté',
					filter: 'user_access_level',
					value: 'logged_user'
				},
				{
					label: 'Contributeur',
					filter: 'user_access_level',
					value: 'contributor'
				},
				{
					label: 'Modérateur',
					filter: 'user_access_level',
					value: 'moderator'
				},
				{
					label: 'Administrateur projet',
					filter: 'user_access_level',
					value: 'admin'
				},
			]
		}
	}
}
</script>

<style lang="less" scoped>
.projects {
	.item {
		display: flex;
		flex-direction: column;
		align-items: flex-start !important;

		padding: 0.4em 0.6em;

		label {
			margin-bottom: 0.2em;
			font-size: 0.9em;
			font-weight: 600;
		}
	}
	.item {
		width: 25%;
	}
}
</style>