ProjectsMenu.vue

<template>
	<div class="ui menu projects">
		<div class="item">
			<label>
				Modération
			</label>
			<DropdownMenuItem
				:options="moderationOptions"
			/>
		</div>
		<div class="item">
			<label>
				Niveau d'autorisation requis
			</label>
			<DropdownMenuItem
				:options="accessLevelOptions"
			/>
		</div>
		<div class="item">
			<label>
				Mon niveau d'autorisation
			</label>
			<DropdownMenuItem
				:options="userAccessLevelOptions"
			/>
		</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'
				},
				{
					label: 'Projet modéré'
				},
				{
					label: 'Projet non modéré'
				},
			],
			accessLevelOptions: [
				{
					label: 'Tous'
				},
				{
					label: 'Utilisateur connecté'
				},
				{
					label: 'Contributeur'
				},
				{
					label: 'Modérateur'
				},
				{
					label: 'Administrateur projet'
				},
			],
			userAccessLevelOptions: [
				{
					label: 'Tous'
				},
				{
					label: 'Utilisateur connecté'
				},
				{
					label: 'Contributeur'
				},
				{
					label: 'Modérateur'
				},
				{
					label: 'Administrateur projet'
				},
			]
		}
	}
}
</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>