ProjectsMenu.vue

<template>
	<div class="filters-container">
		<div class="ui styled accordion">
			<div class="title collapsible-filters">
				FILTRES
				<i
					:class="isFiltersVisible ? 'caret down' : 'caret right'"
					class="ui icon"
				/>
			</div>
		</div>
		<div
			:class="isFiltersVisible ? '' : 'hidden'"
			class="ui menu filters"
		>
			<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="item">
				<label>
					Modération
				</label>
				<DropdownMenuItem
					:options="moderationOptions"
					v-on="$listeners"
				/>
			</div>
			<div class="right item">
				<label>
					Rechercher un projet
				</label>
				<search-projects
					:search-function="SEARCH_PROJECTS"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';

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

export default {
	name: 'ProjectsMenu',

	components: {
		DropdownMenuItem,
		SearchProjects,
	},

	data() {
		return {
			isFiltersVisible: false,
			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: '1'
				},
				{
					label: 'Contributeur',
					filter: 'user_access_level',
					value: '2'
				},
				{
					label: 'Modérateur',
					filter: 'user_access_level',
					value: '3'
				},
				{
					label: 'Administrateur projet',
					filter: 'user_access_level',
					value: '4'
				},
			]
		}
	},

	mounted() {
		const el = document.getElementsByClassName('collapsible-filters');

		el[0].addEventListener('click', function() {
			const content = document.getElementsByClassName('filters');
			content[0].classList.toggle('hidden');
			if (content[0].style.maxHeight){
				content[0].style.maxHeight = null;
			} else {
				content[0].style.maxHeight = content[0].scrollHeight + 5 + "px";
			}
		});
	},

	methods: {
		...mapActions('projects', [
			'SEARCH_PROJECTS'
		])
	}
}
</script>

<style lang="less" scoped>
.transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}

.filters-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	.accordion {
		width: fit-content;
		.collapsible-filters {
			cursor: pointer;
			font-size: 1.25em;
			padding-right: 0;
		}
	}
	.filters {
		width: 100%;
		height:auto;
		min-height: 0;
		max-height:75px;
		margin: 0 0 1em 0;
		.transition-properties(max-height 0.2s ease-out;);
		.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%;
		}
		.right.item::before {
			width: 0;
		}
	}
	.filters.hidden {
		max-height: 0;
		overflow: hidden;
		border: none;
	}
}
</style>